Projects from the FreeCodeCamp Curriculum.
Sections:
- Responsive Web Design
- JavaScript Algorithms and Data Structures
- Front-End Libraries Development
- Data Visualization
- Back-End Development and APIs
Responsive Web Design projects with HTML, CSS, SCSS, Sass and Bootstrap.
| Project | Description | Technologies | Source | Live |
|---|---|---|---|---|
| Tribute Page | A simple tribute page | HTML, Bootstrap | View | View |
| Survey Form | A simple page with a form | HTML, CSS | View | View |
| Product Landing Page | A product landing page | HTML, CSS, Flexbox | View | View |
| Technical Documentation | A simple technical documentation page | HTML, SCSS, Flexbox | View | View |
| Personal Portfolio | A portfolio page showcasing these projects | HTML, Sass, Grid | View | View |
JavaScript Algorithms and Data Structure projects, with vanilla JS.
| Project | Description | Technologies | Source |
|---|---|---|---|
| Palindrome Checker | Checks if word is a palindrome | JavaScript | View |
| Roman Numeral Converter | Converts decimal to roman numeral | JavaScript | View |
| Caesars Cipher | Decipher string based on ROT13 cipher Cipher | JavaScript | View |
| Telephone Validator | Validates string using Regular Expression | JavaScript | View |
| Cash Register | Calculate currency units to give as the change in a cash transaction | JavaScript | View |
Front-End Libraries Development with libraries like jQuery and React.
| Project | Description | Technologies | Source | Live |
|---|---|---|---|---|
| Random Quote Machine* | Generate a random quote from an API | jQuery / React | jQuery, React | jQuery, React |
| Markdown Previewer | Render HTML from markdown markup | React | View | View |
| Drum Machine | Play a sound by clicking an element or pressing a key | React | View | View |
| Calculator | A simple calculator | React | View | View |
| 25 + 5 Clock | A countdown timer with option to set intervals | React | View | View |
* Two projects with the same idea, but different libraries.
Data Visualization projects - charts, maps and diagrams - with D3.js.
| Project | Description | Technologies | Source | Live |
|---|---|---|---|---|
| Bar Chart | United States Gross Domestic Product Chart | D3.js | View | View |
| Scatterplot Graph | Doping in Professional Bicycle Racing Graph | D3.js | View | View |
| Heat Map | Global Land-Surface Temperature Map | D3.js | View | View |
| Choropleth Map | United States Educational Attainment Map | D3.js | View | View |
| Treemap Diagram | Video Game Sales Diagram | D3.js | View | View |
Back-End Development and APIs projects with Node.js, Express.js, MongoDB and Mongoose.
| Project | Description | Technologies | Source |
|---|---|---|---|
| Timestamp Microservice | API to handle date and timestamp | Node.js, Express.js | View |
| Request Header Parser Microservice | API to parse request headers | Node.js, Express.js | View |
| URL Shortener Microservice | API to shorten URLs | Node.js, Express.js | View |
| Exercise Tracker Microservice | API to handle users register and their exercises | Node.js, Express.js | View |
| File Metadata Microservice | API to handle file metadata from upload | Node.js, Express.js | View |
Coding challenges that test the knowledge of algorithms, data structures, and mathematics.
Take-home Projects you can use to practice development, or add to a portfolio.
| Project | Description | Technologies | Source | Live |
|---|---|---|---|---|
| Local Weather | Shows local weather from IP geo-location | jQuery | View | View |
| Wikipedia Viewer | Searches Wikipedia article | jQuery | View | View |
| Twitch Checker | Show information about Twitch streamers | jQuery | View | View |
| Recipe Box | Manage a recipe list | React, React Router | View | View |
| freeCodeCamp Forum Homepage | Fetches the latest posts and user data | React, Styled Components | View | View |
| Image Search Abstraction Layer | Get results from Google Custom Search API | Node.js, Express.js, Axios, PouchDB | View | - |