freeCodeCamp solutions

This repo contains my final projects solutions for web-related courses I've done on freeCodeCamp in 2021.

• Visit here to see actual web pages.
• See my timeline on freeCodeCamp here: start in 2021/03/11, finish in 2022/07/04. There is a big gap in this journey, after I finished all the courses listed below except the "Front End Development Libraries". It's because after gone through that course, I still feel uncomfortable developing Front End. Too many libs, frameworks, tools, concepts.
• If you want to play around with this repo locally, fork it, inspect the code, especially the shell scripts, Makefile and .github workflows. The repo should be runable after cloning via make serve

Table of contents

• Course
  • JavaScript Algorithms and Data Structures
  • Responsive Web Design
  • Data Visualization
  • Scientific Computing with Python
  • Data Analysis with Python
  • APIs and Microservices
  • Quality assurance
  • Information Security
  • Machine Learning with Python
  • Coding Interview Prep
  • Front End Development Libraries
• Local setup

Course

JavaScript Algorithms and Data Structures

• Course link
• Cert
• Total time: 10h

This is easy if since I already have some experience with LeetCode, just need to get a bit more familiar with data structure in JS. Thankfully, JS has strong support for functional programming.

Responsive Web Design

• Course link
• Cert
• Total time: 35h

The course is very helpful, I learned many things: Flex Box, Grid, media query...

Except the Documentation page (Markdown Guide), other 4 projects is hand-written HTML, CSS and JS. It feels a bit weird to do that in 2021, when there are too many JS frameworks available. But on the other hand, it feels cool to finally able to build such sites.

Task	Site
Build a Tribute Page	./web/tribute
Build a Survey Form	./web/survey
Build a Product Landing Page	./web/landing
Build a Technical Documentation Page	./web/doc
Build a Personal Portfolio Webpage	./web/portfolio

Data Visualization

• Course link
• Cert
• Total time: 18h

d3 is awesome! I don't know how many times I have that thought when working on this cert. There's a lot of things in and behind it. No wonder why there's so many books on d3. I will definitely use it for my other (real) data visualization projects.

Beside many things I've tried with these projects, I feel like my code for iterate through data and rendering the chart is not efficient. I need to learn more about JS performance. The code could also be structured better.

Task	Site
Visualize Data with a Bar Char	./d3/bar
Visualize Data with a Scatterplot Graph	./d3/scatterplot
Visualize Data with a Heat Map	./d3/heat
Visualize Data with a Choropleth Map	./d3/choropleth
Visualize Data with a Treemap Diagram	./d3/treemap

Scientific Computing with Python

• Course link
• Cert
• Time:
  • Course: 20m, pretty quick since I'm experienced and there's only 56 multi choice questions.
  • Problems: 4h, need time to learn Python OOP

Task	Code (on Github)
Arithmetic Formatter	arithmetic_arranger.py
Time Calculator	time_calculator.py
Budget App	budget.py
Polygon Area Calculator	shape_calculator.py
Probability Calculator	prob_calculator.py

Data Analysis with Python

• Course link
• Cert
• Total time: 13h
  • 8.5h for final projects.
  • 4.5h for the course, but I spent probably only 30m on the course content (skipped videos, guest the answers), and use the rest to write scripts for converting Python scripts to Jupyter Notebook, HTML and markdown, then live serving the HTML as I editing the Python script. What's a waste of time, yes. But in the end, we have some nice pages to view.

There's a lot of things to I've yet to learn. Don't count on my data analysis skill with Pandas, Numpy, ... I think I'm just good at reading documents and guessing.

Off topic, I used to try Jupyter when it first came out, and used to think about seriously learn Data Analysis. However, I couldn't edit code on the web interface (because of Vim, but I'm not complain), so I drop that thought. I can't understand why web editing become so popular now. Perhaps many people are OK inefficient workflows.

Task	Site
Mean-Variance-Standard Deviation Calculator	./pyda/mean-var-std/
Demographic Data Analyzer	./pyda/demographic
Medical Data Visualizer	./pyda/plot
Page View Time Series Visualizer	./pyda/time
Sea Level Predictor	./pyda/sea

APIs and Microservices

• Course link
• Cert
• Time:
  • 15.5h to setting up local development, heroku site, Github Actions, then benchmark and try nodejs cluster to see if it could be faster. The result of this effort is used for other courses like QA, infosec, so perhaps it's not fair for this course to to include this time here. But, who care?
  • 3.5h to implement all final projects.

This and other courses need a backend require more setup. So I build a small Express app to serve all of them on Heroku.

In order to do that, I had to modify some files that's suppose to not modified, remove the app = express() and expose express.Router(). See the main app code and some custom middleware in heroku folder

The setup works quite well for passing the courses quickly, but I'm not happy with its performance. I've tried stress test the dummy GET /, implement buffered logging and use cluster to run it with multi cores. If you know any good resources or see any of my mistakes, I'm eager to learn.

Task	Note	Site
Timestamp Microservice	./microservices/timestamp	timestamp
Request Header Parser Microservice	./microservices/who	who
URL Shortener Microservice	./microservices/short	short
Exercise Tracker	./microservices/tracker	tracker
File Metadata Microservice	./microservices/file	file

Quality assurance

• Course link
• Cert
• Time:
  • 2.5h for the course, learn about using Passport.js, seem like a good framework to use if I would build backend with NodeJS.
  • 10h for final projects. I focused only on the API, ignored the UI. So please don't expect the UI to be usable.

For this course, honestly I'm not interested in the final projects. I like unit test, but I really hate this combination:

• Unclear spec that force us to guess what the author means.
• Hidden tests that make it extremely frustrated to pass them. Yes, I could find the source for the tests, but that doesn't change my feeling about hidden tests.

As a result of such bad feelings, I have to do my best to get rid of those projects as quickly as possible, including writing dummy tests in some of below projects to pass the FCC tests. Sorry.

Task	Note	Site
Metric-Imperial Converter	./qa/converter	converter
Issue Tracker	./qa/tracker	tracker
Personal Library	./qa/lib	lib
Sudoku Solver	./qa/sudoku	sudoku
American British Translator	./qa/translator	translator

Information Security

• Course link
• Cert
• Time:
  • 40m for both helmet and python part. For python part, I just guess, didn't watch the videos.
  • 8h for the final projects. I've tried to build a proper game, but it needs much more time, so let's do it later. See note for the game project for more detail.

Task	Note	Site
Stock Price Checker	./infosec/stonk	stonk
Anonymous Message Board	./infosec/bulletin-board	bulletin-board
Port Scanner	./infosec/portscan	Code
SHA-1 Password Cracker	./infosec/pwcracker	Code
Secure Real Time Multiplayer Game	./infosec/game	game (unfinished)

Machine Learning with Python

• Course link
• Cert
• Time:
  • 10m for guessing on multi choice questions
  • 22h for final projects.

See its note here

Task	Site
Rock Paper Scissors	./ai/rps
Cat and Dog Image Classifier	./ai/cv
Book Recommendation Engine using K	./ai/recommendation
Linear Regression Health Costs Calculator	./ai/linear_regression
Neural Network SMS Text Classifier	./ai/nn

Coding Interview Prep

• Course link

This doesn't have a cert, but I still do it to understand more about JS. See here for the notes and some solutions.

Front End Development Libraries

• Course link
• Cert
• Time: more than 20h, span through 1 year due to procrastination

Task	Site	Time	Lib
Build a Random Quote Machine	./fe/quote	4h	React
Build a Markdown Previewer	./fe/markdown	4h	Vue
Build a Drum Machine	./fe/drum	3h	Svelte
Build a JavaScript Calculator	./fe/calc	3h	(none)
Build a 25 + 5 Clock	./fe/clock	4h	React

Note:

• I tried to use a minimal setup for these exercises, which load the UI libraries (React, Vue, ...) directly in the browser instead of using typical NodeJS build process, because I don't want to pull thousands of modules and also to challenge myself.

• Learned about various <script> types: module,babel/text, importmap (doesn't work natively on Firefox and Safari at the moment)

• I actually didn't pass all the test for the last project (25 + 5 clock), although my implementation should cover all user stories. Their requirements are incomplete (what happens when we click *-increment, *-decrement buttons during timer running), and their tests are faulty (clicking reset button in my solution perfectly reset all the labels and values, but it keeps failing, there's also funny error message like Value in element with id of "break-length" is less than 1.: expected '5' to equal '1'). I spent too much time try to work around their test, but eventually gave up.