The Production of Code One

https://codeone.herokuapp.com/

Diva Lei
3 min readMar 26, 2020

Code One is a project that helps front end developers better visualize and access their projects. I created Code One to offer functionality to other web developers like myself. This web application was intended to optimize and simplify front end development by providing immediate visual feedback along with other useful tools. My main focus was to create a functional and easy-to-use web application. Code One was created over the course of two weeks and was created with React Js.

Code One Logo

Just a few weeks ago, I decided I wanted to steer my software engineering career towards the specialty of web development. I developed an interest and curiosity for ReactJs, and the best way to learn it was the build with it. During my journey in becoming a developer, I was caught in many inefficient habits of development, the main one being the constant refreshing of the browser. This problem further inspired the creation of Code One.

Technologies

Code one is hosted on Heroku. The entire application was created using the React Js library. Routing was implemented using React Router Dom and user authentication/storage was done with FireBase.

Features

The main feature of Code One is the Playground. The playground allows the user to write HTML, CSS, and JS code as a live browser updates itself.

Additional Features

Export — The user can change file names and export files onto their device.

Save — If logged in, the user can save projects to their account and access it later

Revisions

Because Code One was my first React project, I implemented the application using very basic React concepts. I was able to create a fully functioning application despite some bad practices. As the application grew larger, I started to encounter problems sharing data between components, resulting in props drilling.

After an additional week of learning Redux/hooks, I reconstructed CodeOne and implemented these new concepts.

Data structure and architecture of Code One

About Me

My name is Diva Lei and I am an aspiring software engineer. I majored in Computer Science in college, and decided to leave the traditional 4 year institution for a non traditional intensive 2-year curriculum specific to the field. I am currently looking for new opportunities and challenges, so feel free to contact me if you are interested in what I have to offer!

Github: https://github.com/lei-diva

Linked In: https://www.linkedin.com/in/diva-lei-68b20b13b/

Code One: https://codeone.herokuapp.com/

--

--