Free Code Camp Front End Curriculum
See the live explanation of this project here
I built the Free Code Camp Front End Projects once using HTML, CSS, and jQuery, and then rebuilt them using React and Sass.
This repository contains the code for the Intermediate and Advanced Projects from Free Code Camp's Front End Curriculum, all built with React and Sass. I build these projects to improve my understanding of React.
In order to improve my workflow, I created a template (project-template folder in the repo) for each project which included a simple project directory and basic HTML, CSS, and JS files setup with boilerplate code (e.g. a root React Component, html title, body, etc.). I also configured my main.scss file with several font-families and colors I pre-selected to have available for each project. Overall, this made my development process much quicker.
I analyzed the amount of code required to build each project and compared it to my prior attempt. Here are the results, evaluated roughly on the number of characters typed in all the files in each project (e.g. all HTMl, CSS, and JS). I think it's very interesting that the total code required to write all the projects was very similar on my first and second attempt, even though it diverged significantly on a few individual projects.
| Project | 1st Try | 2nd Try | Gain or (Loss) on 2nd Try |
|---|---|---|---|
| Random Quotes | 3,679 characters | 3,703 characters | +24 characters more |
| Weather API | 13,347 characters | 7,937 characters | -5,410 characters less |
| Wikipedia Viewer | 6,788 characters | 6,506 characters | -282 characters less |
| Twitch TV | 5,987 characters | 6,192 characters | -205 characters less |
| Javascript Calculator | 8,497 characters | 6,206 characters | -2291 characters less |
| Pomodoro Clock | 8,709 characters | 7,739 characters | -970 characters less |
| Tic-Tac-Toe* | 9,984 characters | 16,573 characters | +6,589 characters more |
| Simon Game | 13,769 characters | 14,892 characters | +1,123 characters more |
| Total Characters | 70,760 characters | 69,748 characters | -1,012 characters less |
*The first Tic-Tac-Toe game was beatable, the second one not-so.
I also used Toggl to record the time spent on each of the projects I built with React. Unfortunately, I do not have any of these numbers for the first time I completed these projects, but I know it took me substantially longer the first time.
| Project | Time |
|---|---|
| Random Quotes | 1:33:27 |
| Weather API | 2:24:28 |
| Wikipedia Viewer | 3:22:58 |
| Twitch TV | 4:18:52 |
| Javascript Calculator | 1:46:18 |
| Pomodoro Clock | 2:41:33 |
| Tic-Tac-Toe* | 5:59:29 |
| Simon Game | 5:17:48 |
| Total Time | 27:24:53 |