Free Code Camp Projects

A of projects from http://freecodecamp.com

Use notes

Add google search API_KEY and CSE_ID to .env for the image-search program

Development

Run in development with hot module reloading with npm start

Production

configure server.js in the root directory run a production build and start the server.

npm run build && node server.js

Directories

• webpack webpack configuration and development server directory
• data development data directory for local-databases used by pouchdb-server
• src/app client side applicaiton container
• src/server server side renderer, api routes
• src/projects Each project has a directory in-here
• src/common files and infornmation shared between applicaitons

Usefull files

Update these when adding a project

• src/projects/portfolio/appData.js Information about projects, and the routes used by them.
• src/projects/common/routes.jsx Routes used by react router, this file also uses the appData file mentioned above

Todos

Basic Front End Development Projects

• tribute-page Build a Tribute Page
• portfolio Build a Personal Portfolio Webpage

Intermediate Front End Development Projects

• local-weather Show the Local Weather
• quote-machine Build a Random Quote Machine
• wikipedia-viewer Build a Wikipedia Viewer
• twitch-tv Use the Twitch.tv JSON API

Advanced Front End Development Projects

• calculator Build a JavaScript Calculator
• pomodoro Build a Pomodoro Clock
• tic-tac-toe Build a Tic Tac Toe Game
• simon Build a Simon Game

React Projects

• dungeon-crawler Build a Roguelike Dungeon Crawler Game
• game-of-life Build the Game of Life
• leader-board Build a Camper Leaderboard
• recipe-box Build a Recipe Box
• markdown-previewer Build a Markdown Previewer

Data Visualization Projects

• bar-chart Visualize Data with a Bar Chart
• data-globe Map Data Across the Globe
• force-directed Show National Contiguity with a Force Directed Graph
• heat-map Visualize Data with a Heat Map
• scatterplot-graph Visualize Data with a Scatterplot Graph

API Projects

• file-size File Metadata Microservice
• header-parser Request Header Parser Microservice
• image-search Image Search Abstraction Layer
• timestamp Timestamp Microservice
• url-shortener URL Shortener Microservice

Dynamic Web Application Projects

• voting Build a Voting App
• nightlife-coordination Build a Nightlife Coordination App
• stock-market-charts Chart the Stock Market
• book-trader Manage a Book Trading Club
• not-pintrest Build a Pinterest Clone