40 Side Project Ideas for Software Engineers

Computer Science Side Projects

These projects are suited for engineers trying to beef up their computer science
fundamentals. They’ll help you learn more about specific aspects of computing, like file
transfer and operating systems design. These projects can be particularly useful for self-
taught developers who’ve focused more on practical skills than comp sci fundamentals.

1. FTP Client (suggested implementation: web, desktop or CLI app).

Build a simple FTP client. As a bonus challenge, support secure file transfer.
2. HTTP Server (suggested implementation: any programming language you want to

master). To understand HTTP deeply, build an HTTP server. There are a number
of tutorials available to guide you through the process.
3. Build a simple operating system (suggested implementation: any programming

language you want to master). This is a project that is technically challenging and
will deepen your understanding of how computers and operating systems work. You
might wish to start with the free (and cleverly named) book, Operating Systems:
From 0 to 1.
4. Build a web scraper (suggested implementation: any programming language you
want to master). Build a tool that takes a URL as input and returns the content of
the URL as HTML or XML.
5. Bandwidth monitor (suggested implementation: live updating CLI tool). Build a tool
to track how much data you have downloaded or uploaded on the internet. Have it
email you a weekly report of your usage. As a bonus challenge, predict peak usage
times.
6. Implement a cipher (suggested implementation: any programming language you

want to master). Build a tool that takes a string of text as input and encrypts it using
a cipher, such as the Caesar cipher.
7. Create a text message downtime alerter (suggested implementation: app hooked

up to the Twilio API for sending text messages). Create an app that takes a URL as
input and sends you a text message when a request to the URL returns a response
code other than 200 (OK).
Personal Finance Side Projects

These projects will help you achieve a practical goal (get a better handle on your
finances), while also improving your software engineering skills.

8. A net worth calculator and tracker (suggested implementation: CLI, web, or

mobile app). Build a calculator you can use to track the rise or fall of your net worth
on a monthly basis. You can use something like this net worth worksheet from
Charles Schwab to guide you. Optional extension: have it send you a 12 month
report for the previous year on the first of January each year.
9. A tax forecaster (suggested implementation: web app). This will be particularly
useful if you do any freelance software engineering. Build a tool that takes your
freelance earnings as input and then predicts your expected tax liability for the rest
of the financial year. Make it smart enough to predict periods of higher or lower
demand for your services, and adjust accordingly.
10. A deal finder (suggested implementation: web app with mobile notifications).
Build a simple web app to notify you when an item you covet goes on sale for a
good price. You could use a web scraper to pull the item’s product page and notify
you of any price changes.
11. An expense tracker (suggested implementation: web or mobile app). Create
a simple interface you can use to add and categorize your expenses. Generate
monthly reports based on the inputs and write custom alerts for things, like,
“spending too much money on coffee… as always.”
12. A financial independence calculator (suggested implementation: web

app). Financial independence is, essentially, saving and investing as much of your

income as possible so that you don’t need to work for money. While many
financially independent people continue to work, they can now focus on doing work
that they love, rather than work that pays the most. Build a tool to calculate, based
on your: current savings, investments, income, retirement accounts, and expenses,
how far away you are from financial independence. Some
examples: FIREcalc, cFIREsim.
13. A bill splitter (suggested implementation: mobile app). Build a simple tool to
help you and your friends split bills when you go out to eat together.
Games and Simulation Side Projects

Most software engineers I know are fascinated by the world of game development,
graphics, and simulations, but don’t have a lot of experience with them. These projects
are small enough that you can set foot into this world without biting off more than you can
chew.

14. A random name generator (suggested implementation: CLI, web, or mobile app).

Build a random name generator (example) that creates unique names on the fly,
based on an algorithm. Use machine learning techniques to help you by training the
program with a sample data set of names similar to those you want to generate.
Otherwise, create your own lexical rules for how names are generated. For
example, a name generating algorithm inspired by The Handmaid's Tale  might
stipulate that names for Handmaid women should start with 'Of', and end with a
random male name, e.g., Ofpeter.
15. Conway’s Game of Life (suggested implementation: any platform capable of real-

time graphical rendering). Conway’s Game of Life simulates the lives of simple cells
that obey algorithmic laws. This video explains how the game works and includes
an example of one possible result:

16. A procedurally generated map maker (suggested implementation: browser-based

app). Create a browser-based application that allows users to procedurally generate

a terrain map based on a random seed. The map can be as detailed or as simple as
you’d like. This project is a good opportunity to learn about procedural generation .
17. A character generator (suggested implementation: browser-based or mobile
app, CLI). Create a tool that allows you to randomly generate playable characters
for your favorite role-playing games, whether they be tabletop games, like
Pathfinder, or video games, like Divinity: Original Sin.
18. Interactive fiction (suggested implementation: CLI). A fun way to get into game

development without having to worry about graphical assets, interactive fiction

renders the world for the player through text descriptions. The Dreamhold is a good
example of interactive fiction with a useful ‘help’ command.
Artificial Intelligence Side Projects

AI’s usefulness in day-to-day software engineering is increasing by leaps and bounds. It’s
now easier than ever before to make your first forays into the world of Artificial
Intelligence.

19. An unbeatable Tic-Tac-Toe engine (suggested implementation: CLI program). For

an excellent first AI project, try to write an engine that cannot be beaten at Tic-Tac-
Toe. You can achieve this by implementing this strategy, which produces a draw as
its worst-case outcome.
20. A chess engine (suggested implementation: an engine written in a programming

language you want to learn, or master). Try to write an engine that can play chess
against a human opponent using a Universal Chess Interface  compatible GUI, such
as XBoard. See Stockfish as an example. For a less daunting challenge, you may
wish to focus on the behavior of just one piece, e.g., Knights.
21. A niche chatbot (suggested implementation: web app). Some of the greatest

minds in the world are working on chatbots that respond in lifelike ways. It’s an
incredibly difficult challenge, but, by reducing the scope of your chatbot, you have a
side project that is more approachable for evenings and weekends. Create a
chatbot that produces real-sounding responses based on a niche topic that you’re
passionate about: your favorite band, video game, sports team, or TV show.
Leverage an existing library to help you, such as ChatterBot.
22. A spam classifier (suggested implementation: any programming language you

want to master). Build a tool to classify whether an email is or isn’t spam based on
the content alone. You can use this public data set of emails from the Enron
investigation to test your spam classifier.

Entertainment Side Projects

These projects are for software engineers who want to work on something fun and light-
hearted.

23. A movie showtime finder (suggested implementation: web or mobile app with

email or text message notifications). Build a program that notifies you, by text or
email, about showtimes for potentially interesting movies playing at your favorite
 cinema. The concept of an 'interesting movie' can be derived using machine
learning (if you watch enough movies to have good training data), or a handcrafted
algorithm. For example, you might use the Open Movie Database API , paired with
an HTML parser like BeautifulSoup, to build a program that alerts you to sci-fi
movies rated 7.0 or above on IMDB, movies starring Amy Adams, and/or any movie
with an average rating of 8.0 or higher.
24. A spoiler blocker (suggested implementation: browser extension). Short of
implementing a total social media/internet/watercooler chat ban, it can be difficult to
avoid seeing spoilers for your favorite TV show… especially if that TV show is as
popular as Game of Thrones. Create a browser extension that removes all
mentions of your favorite show from any webpage loaded in your browser… or
replaces them with cute pictures of puppies.

Fun Side Projects

These projects are all different, from logging sensor data to finding new desktop
backgrounds for your computer. One thing they all have in common is that they’re fun,
and several of them will have you work with interesting APIs.

25. Pixel art generator (suggested implementation: any programming language

you want to master). Build a tool that takes an image as input and samples the
image to produce pixel art as output. If you want to improve your front-end skills,
generate the resulting pixel art using CSS.
26. Music suggestion tool (suggested implementation: build a wrapper for the Spotify

API). Create a tool that tracks the music you listen to and generates a playlist with
similar qualities, but of songs you haven’t heard before. The Spotify API provides all
of the tools needed to extract what you’ve listened to and create a playlist — the
recommendation engine is up to you!
27. Temperature logger (suggested implementation: Raspberry Pi, temperature

sensor, web app). Have your Raspberry Pi hooked up to a temperature sensor and
send temperature data from your home to a web app that saves the data to a
database or updates a CSV file. For bonus points, have a weekly temperature
report emailed to you. Other Raspberry Pi projects: home automation, home
security.
 28. Microlearning app (suggested implementation: web or mobile app). Build an

application that sends you one page per day about something you want to learn.
This could be a random page from Wikipedia, a page of React documentation,
a Kanji character, or a page from the CIA World Factbook.
29. Slack bot (suggested implementation: Slack API). If you or your team use the

popular chat app Slack, build a bot to make some aspect of your (or your team’s)
life easier. Ideas: a coffee order bot, a bot that reports daily on the number of
commits made to your team repos, or a daily stand-up reminder bot.
30. Daily desktop background (suggested implementation: Unsplash API, scripting

language for your OS). Build an app that refreshes your desktop background with a
new image every day.

Coding Challenge Side Projects

Rather than building a project from scratch, these are collections of coding challenges to
improve your skills. If you want to get better at solving discrete problems, or improving
your chops with a new programming language, these are all good options.

31. Advent of Code  (suggested implementation: any language you want to practice).

Advent of Code challenges occur every year in the days leading up to Christmas.
They include lots of fun programming challenges that can help you develop your
chops in a programming language you’re learning or one you want to master. The
challenges from 2015, 2016, and 2017 are still available.
32. Kaggle’s Titanic Challenge  (suggested implementation: Python or R). Kaggle

offers a fascinating challenge to introduce you to the basics of machine learning

with Python or R: use a real data set from the Titanic passenger log to predict which
passengers were most likely to survive the disaster.
33. Project Euler (suggested implementation: any programming language you want to

practice). Project Euler challenges are dedicated to exploring the marriage between
mathematics and programming. Use programming tools to solve various
mathematical challenges.
Daily Life Side Projects

These side projects have a practical purpose: they help with some aspect of your daily
life. Though they solve simple real-world problems (things like what to have for lunch), the
solutions can be as simple, or as complex, as you’d like.

34. Lunch picker (suggested implementation: CLI, web or mobile app). If you’re

a working software engineer, you’ve probably wrestled with one of the toughest
questions in software development… where should I have lunch? Your lunch picker
is the tool you’ll turn to to answer this question. It can be super simple and pick from
a range of options you know you like at random, or more complex — pulling in data
from Google Reviews and taking into account: location, price, and type of cuisine.
35. Date planner (suggested implementation: mobile app). One of the hardest
things about dating, or being in a long-term relationship, is deciding where to go on
dates. Build a tool that scours restaurant reviews, event calendars, and other data
for date idea suggestions.
36. Tool to simplify your email newsletters (suggested implementation: scripts
hooked up to a mail server). If you’re like me, you receive way too many email
newsletters every week and they clutter up your inbox. Instead of unsubscribing
from all of them in a fit of rage, build a tool that captures these emails and compiles
them all into a single email that is sent once a week.
37. ‘Bring your umbrella’ notifier (suggested implementation: mobile app). Build
a simple mobile app that sends you a phone notification in the morning telling you if
you should bring your umbrella to work (e.g., if it is going to rain in your area that
day).
38. Collection tracker (suggested implementation: web or mobile app). Build a
tool to keep track of something you collect. You could keep track of: the value of the
item, the year it was made, its condition, and its location.

Data Side Projects

These projects will improve your ability to work with data. Software engineers work with
ever-larger amounts of data. These projects will help you learn how to collate, parse, and
analyze data with confidence.
 39. Create and automatically update a data set (suggested implementation:
web scraper input to CSV output). Build a tool to automatically build and update a
data set about something you’re interested in. Suggested data sets: stats about
your favorite sports team, flights to destinations you want to visit, meteorological
data from where you live, or anything else that interests you. The most important
thing is that the data set should require constant updates as new data is generated
— and should occur automatically. For example, as soon as your sport’s team’s
results are posted on a website, the data should be automatically scraped and
added to your data set.
40. Enter a data science competition (suggested implementation: R or Python).
Kaggle hosts a number of data science competitions featuring real-world data sets
and hefty cash prizes. You’ll also often be tasked with solving real-world problems
like: how to classify toxic online comments, forecast restaurant visitors, or recognize
objects from space.

Project #1: A Calendar app for making appointments (like Google calendar)
A simple calendar appointments app
This can start off as a simple app which you can gradually improve by adding more features and UX
improvements.

It will help you practice using nested components (like a day component, nested inside a week component,
or a nested inside a month component).

I use this as an example app in my Free Complete React on Rails course. So check it out if you want to try
this out.

You can see the full step-by-step code here:

learnetto/calreact calreact - React and Rails 5 calendar appointment appgithub.com

Project #2: A Github explorer app for finding interesting code repositories
https://github.algolia.com
You can build the search part purely on the client side, but you can make it more fun by storing the
searches in a database using Rails and show the most popular searches.

You will practice using an external API and handling the JSON response. You could experiment with pre-
rendering the component on the server.

See this browser plugin by Algolia to get your idea juices flowing:

algolia/github-awesome-autocomplete github-awesome-autocomplete - :octocat: Add instant search

capabilities to GitHub's search bargithub.com

Project #3: A note-taking app

Simplenote
You could see the power of React handling a lot of state changes, say, by enabling auto-save. Check
out Simplenote for a good example of a simple but powerful notes app.

If that’s too hard as a first app, you could first try out using an external text editor component to learn how
it works, and then implement your own:

facebook/draft-js draft-js - A React framework for building text editors.github.com

Use the react-slack-chat component to add a chat widget to your existing Rails site. The component does
most of the heavy lifting but you can have fun by making your own bot in Rails and customizing the widget
in React.

The code for the component is on Github:

5punk/react-slack-chat react-slack-chat - A Beautiful Gooey / Material Design Slack Chat Web Integrating

Widget.github.com

Project #5: Meme generator

Rails can handle storing and serving an image library and existing memes. Use React for rendering and
handling the form for making the meme.

You could generate the meme on the server using ImageMagick or in the browser using canvas. See this
repo by Hung Tran:

tranhungt/meme-maker meme-maker - Make your favorite memes and send them to your friend!
github.com

Project #6: Realtime Free Image search app

Help Medium bloggers find their inner hispter
Use the Unsplash API for the high quality free photos:

unsplash/unsplash_rb unsplash_rb - Ruby wrapper for the Unsplash API.github.com

Add cool animations using the React Animation Add-Ons.

Allow users to bookmark their favorite images. You could even experiment with making the backend just a
Rails API app and make a separate React app for the front end.

Project #7: Book club

Goodreads is a great site to copy for this project
A simple app where you and your friends can share your favorite books and discuss them
(like Goodreads). The backend could be a simple Rails CRUD app, but you could make the front end a
single page React app and play with React router and Redux.

Project #8: Twitter web client for multiple accounts (like Tweetdeck)
I use Tweetdeck for running my personal and business Twitter accounts from one place
A Twitter web client app in which you can connect more than one Twitter account (using OAuth) and then
add multiple columns to the UI — for things like the feed, notifications, search, direct messages.

Use the Twitter gem by Erik Michaels-Ober:

sferik/twitter twitter - A Ruby interface to the Twitter API.github.com

This will give you the unparalleled joy of dealing with the ridiculous API rate limits from the most developer-
friendly company in the world.

You could add Tweetdeck-style automatic fetching of new tweets and notifications using polling or Action
Cable.

Lots of nested components and you can try out some simple animations in React.

It might be best to start off with building just reading capabilities. Once you have that, you can add the
ability to post, like and retweet.

Project #9: OpenStreetMap Custom UI

My hometown Pune (India) on OpenStreetMap :)
Did you know the OpenStreetMap website is a Rails app?

You can get the repo here, set it up on your own machine and then tinker with adding React to the front
end!

openstreetmap/openstreetmap-website openstreetmap-website - Mirror of the Rails application

powering http://www.openstreetmap.org (hosted at git://git…github.com

Project #10: Team lunch roulette

Check out http://whatsforlunchshoreditch.com built by NEVERBLAND
A website for helping you decide where to go for lunch with your team. The Rails backend just needs to be
a simple CRUD app which lets team members enter place suggestions. You could use the Foursquare
API for search and auto complete.

And use React for some ridiculous animations!

If you’re not into lunch, do coffee or cocktails or something else more exciting.

Project #11: Super Procrastinator

http://reader.one/
A single website you can go to avoid work — read Reddit, Hacker News, Product Hunt, Medium, Slashdot
and more in one place.

Use the Rails backend for saving user accounts and preferences, and talking to the different APIs. You
could also fetch data from the APIs directly from the client side.
Want to build these apps with me? Come, check out my Free Complete React on Rails Course, where I
will teach you how to be a pro at using React with Rails, while building some fun stuff.

Project #12: Chatroom with Action Cable

Remember AIM?
In addition to learning React, this would make a great little project to try out Action Cable, a cool new Rails
5 feature which adds WebSocket support to Rails. See these examples to get started:

rails/actioncable-examples actioncable-examples - Action Cable Examplesgithub.com

Because extra small is extra beautiful!

Check out this series of blog posts by Andrea Mazzini, in which he describes in detail how he built a
Medium clone with a Rails API app, React and Flux.

FancyPixel/small-rails small-rails - Small, a tiny clone of Medium. Rails APIgithub.comFancyPixel/small-

frontend small-frontend - Small, a tiny clone of Medium. React + Flux frontendgithub.com

You can build it without using Flux, but it might be worth a try if you’re up for the challenge.

Project #14: Face tagger

D to da A to da V to da I to da D to da C
An app where you can upload photos and tag people (like on Facebook). Use the OpenCV Ruby gem for
automatic face detection:

ruby-opencv/ruby-opencv ruby-opencv - Versioned fork of the OpenCV gem for Rubygithub.com

Project #15: ActiveAdmin on steroids

ActiveAdmin default UI
You’ve probably used ActiveAdmin for managing your app records. But the UI is not exactly inspiring. You
can change that by taking one view at a time and turning it into a nicely styled React component.

Look into the ActiveAdmin code here:

activeadmin/activeadmin activeadmin - The administration framework for Ruby on Rails

applications.github.com

Project #16: An Ecommerce Store

Sunlit uplands as a service
Jam, beer, England flags, curry, all served by React on Rails. If you don’t want to build up the store
features in Rails, just use Spree and focus on practicing React components for the front end.

spree/spree spree - Spree is a complete open source e-commerce solution for Ruby on Rails.github.com

Guess what? I’m building this online store idea in a series of tutorials. The first one will be published right
here on the freeCodeCamp blog! Make sure you follow me on Medium and sign up on Learnetto to get it in
your inbox.
Project #17: Just Mail No Chimp
I have a love-hate relationship with Mailchimp
An email newsletter app with a good UI that doesn’t make you want to tear your hair out. And no cute
monkey nonsense ?

You can still use the Mailchimp API or use Sendgrid. If you’ve used Mailchimp, you know there are a ton
of features you can try building — viewing/filtering/managing subscribers, designing forms, creating
campaigns, and more.

Just pick one feature and try to build it. Most features will involve some kind of form, so it should be good
practice for dividing your UI into React components that will handle state and some stateless functional
components.

Project #18: Gmail on Rails

LeBron James’ Inbox (2012)
Gmail has a pretty complex UI but you could start off by just building the UI for listing and reading emails.
Or maybe search could be more fun?

Use the google-api-client gem and check out this awesome React tutorial and code repo by Mark Brown
☕ to get started:

markbrown4/gmail-react gmail-react - A React.js tutorial - Gmailgithub.com

Project #19: DJ Spotify

A DJ’ing app built on top of Spotify. Get recommendations, create and mix playlists and even allow others
to add songs to your playlists.

Use a Ruby wrapper gem for the Spotify API:

guilhermesad/rspotify rspotify - A ruby wrapper for the Spotify Web APIgithub.com

I’ve built a tiny little app with it before and it’s quite easy to use. Spotify only allows the music itself to be
played with their own apps, so you have to keep the app running alongside.

Project #20: Heroku dashboard

As a Rails developer, you’re probably very familiar with Heroku. It’s an awesome service for quickly
deploying and hosting Rails apps — perfect when you’re making lots of little things for learning

Build a simple dashboard which lists your apps and lets you quickly view key information about each of
them. You can add editing capabilities as a second step.

Use this gem to access the Heroku API:

heroku/platform-api platform-api - Ruby HTTP client for the Heroku APIgithub.com

Project #21: AWS S3 client

UI design ‘95
Build a nice modern UI for managing your AWS S3 account. Use the Ruby gem and start off by building a
simple file browser component. Then add a form component to upload files.

aws/aws-sdk-ruby aws-sdk-ruby - The official AWS SDK for Ruby.github.com

Project #22: Stripe analytics dashboard
Check out Baremetrics for some inspiration — https://demo.baremetrics.com/
A dashboard for showing some statistics and charts based on Stripe data. The API is very well
documented and this is a great chance to try using D3 with React (look at this and this).

Project #23: Google analytics dashboard

Look at the GA iPad app for inspiration (it’s much nicer than the website)
The default Google analytics web dashboard is cluttered and confusing. You could build a simpler one
which just shows the most important information.

Another chance to use D3 or you could try another library.

You can access the GA API with this gem.

Project #24: Habit Tracker

The Loop Habit Tracker has a nice simple UI
Build an app for tracking your daily and weekly habits — morning routines, gym sessions, running, cooking,
meditation, guitar practice, tea ceremonies?

For inspiration, check out the Loop Habit Tracker or Coach.

Make it mobile-friendly so that you can use it on the go. Once you’re comfortable with React, you could
even build a mobile app using React Native.

Project #25: Fitness dashboard

Check out Exist for inspiration (built by Josh Sharp and Belle Beth Cooper)
Build a dashboard for all your personal fitness data, that pulls in data from different apps and presents
some useful statistics in a nice UI.

Depending on what you, your family and friends use, you could easily pull in data from a number of APIs
— Fitbit, Google Fit, Moves, Runkeeper, Strava, Withings and lots more!

You could even allow the user to manually enter data for simple things like weight tracking and exercise
routines.

You could start off by just showing reports and then enhance it with new features like adding notes and
sharing.

I’ve built a simple dashboard for Fitbit data. See the code here:

learnetto/reactfit reactfit - A fitness dashboard app built using Rails 5.1 and React.jsgithub.com

Project #26: Guess My Sketch (game)

Google Quick Draw
Make a drawing app in which you can draw with a mouse, and a friend has to guess what you drew. You
can use canvas for drawing. See react-sketchpad by Michal Svrček for some ideas on how to start:

svrcekmichal/react-sketchpad react-sketchpad - Sketch pad created with canvasgithub.com

Use Rails to upload and save the drawing and show it to someone on another computer.
As an advanced exercise in fun, add machine learning and make the computer guess ?

Project #27: You Write Like

Always good to know who inspires famous internet people
Make a text classifier app which matches your writing style to a famous author — just like I Write
Like (made by Dmitry Chestnykh).

Use classifier-reborn for classifying the text and React for handling the form. This app is mostly backend-
heavy, so experiment with some UI animations. See this repo for some cool ideas:

FormidableLabs/react-animations react-animations - A collection of animations for inline style

librariesgithub.com

Project #28: Idea Board

An Idea Board app with idea tiles
Build an Idea board app using a Rails 5.1 API app and a separate React app built using Create React
App. The Idea board is a simple board which displays ideas in the form of square tiles. You can add ideas,
edit existing ideas and delete ideas.

I’ve already built this one! Check out these two video tutorials which will show you how to build this step-
by-step:

Part 1:

Rails 5 API and React.js tutorial - How to make an Idea board app | Learnetto Rails 5 API and React.js
tutorial - How to make an Idea board app | Learnettolearnetto.com

Part 2:

How to animate a component using React Transition Group | Learnetto How to animate a component
using React Transition Group | Learnettolearnetto.com

These tutorials cover many practical concepts including stateless functional components, class-based
components, use of axios for making API calls, immutability-helper and more.

So many ideas!

Now that’s a whole lot of interesting ideas for you to kickstart your React on Rails journey!

Want to build these apps with me? Come, check out free tutorials on React, Rails and more on
Learnetto.com.

6 Absurd Ideas For Building Your First Web

App
1. FastFood Guru
The Idea: Yelp is a pretty popular source of restaurant reviews. However,
most people use it to learn about restaurants they have never heard about
before. What about massive fast-food chains like McDonald’s and Burger
 King? Plenty of people go to these, but somehow, they are not a popular
review candidate.
Yes, you might tell me that every menu is pretty much the same, and the
food always tastes the same as well. However, if you visited many of these
chain “restaurants”, you know there are a few things that differ wildly.

Which one has the most luxurious bathroom? Which ones mark up their
menu prices? Which ones have funny drunks at 1AM in the morning? This
would be a review site for those fast-food chains that are supposedly
consistent.

Type of Site: Reviews
Key Functions:
 Ability to create an account with a picture, username and location
 Use Google Maps to let a user pick out a specific restaurant, either through
searching a location on the map or through typing in a name and choosing from a
list (typeahead)
 Allow the user to write a review
 Allow user to rate the following fast-food specific topics on 1–5 scale:
Bathroom Quality, Staff, Cleanliness, Drive-thru Sassy Level, Delivery Speed
 Ability to add pictures to the review
 Responsive design down to mobile
Key Feature Decisions:
 Is this a serious website, or is it really about the funny things that can happen
at a fast-food joint?
 Who will be using this site? People on roadtrips trying to choose a lunch
place? Frequent fast-food visitors looking to share their experience?
 Should this be a community where people frequently check the site for funny
stories and participate? Or more one-time, infrequent use?
 What social media integration might help spread stories/reviews?
What You Will Learn: User systems and picture storage are two major
challenges. This will be a good chance to implement a basic version of
each. Also, if you choose to make this a humor-oriented site, how can your
design influence an appropriate level of humor that is not nasty? If you
want to gain a following, this will be a good test to see where you might be
able to source current fast food reviews to seed your database and create
immediate content.
 2. GrillBer
The Idea: Yep, you guessed it. Uber for grills. If you live in a city, you may
not have the space for a grill or a safe place to lock it up. For example, if
you live on the 20th floor of an apartment building, where can you put your
grill?
Problem solved with GrillBer, a delivery service for grill rentals. This will
allow customers to put on a cookout with none of the logistics. In fact, you
might want to include a roll of turf and chairs so your customers can create
a pop-up park in a parking space!
Type of Site: Delivery/Logistics
Key Functions:
 Form that allows a user to book a grill for a certain number of hours at a
certain hourly rate, and stores that in a database. User must input their name,
address etc.
 Calendar that shows different times that grills are available. Check
out Zipcar for an example of this.
 Product details page that shows the grill and tells you more about the
different add-ons, like chairs and turf.
 Social media integration with Instagram that shows all the awesome
cookouts people have held with GrillBer.
 A checkout process and payments system with Stripe so users can complete
the process.
Key Feature Decisions:
 This does not need to be visually stimulating like Uber. But does it even
need a cool interactive calendar? Or can you get away with a basic form like an e-
commerce site?
 How many pains in the grilling process will you offer to address? Do you
expect the user to clean the grill? Are these the cheaper but slower charcoal grills,
or more expensive gas grills?
 Cookouts are meant to be a low-stress experience. If people have to hurry to
cook their food, it will not be a great experience. How can you use copy and
microcopy to clearly state how this will not be a stressful process?
 What logic do you need to have on your back-end for the booking system?
Do you need to allow a half-hour before and after for grill delivery?
What You Will Learn: How to coordinate the front-end and back-end of a
booking system. Think about how many sites do this. Restaurant booking
sites. Conference room booking sites. There are many more. This is a very
common pattern, and a great accomplishment to have on your resume for
discussion.

3. NetworkTap
The Idea: Social media is an increasingly popular advertisement strategy.
Companies use Twitter, Facebook, LinkedIn and Pinterest to reach
customers in the middle of browsing. However, there is one untapped
space: the user’s actual post.
Advertisers love word of mouth marketing, and having users post the
actual ads themselves would be a great way to confuse others in their
newsfeed!

This site would allow users that want to make a little extra cash to
volunteer information on themselves, and advertisers to briefly hijack a
post with an ad. Users get paid on a per-view basis or another method.
Now, ads can reach eyeballs in new and innovative ways!

Type of Site: Marketplace
Key Functions:
 Individual users must be able to create an account with info like: location,
age, interests, and family status so advertisers can pick who they want to post
about their product
 Advertisers must be able to create an account and post about their brand
identity, and who they are looking to reach.
 Each user must be able to reach out to an advertiser to talk about their
interest in doing a post.
 Each advertiser must be able to search all users by criteria like age, gender
etc. and send a mass message to their chosen demographic about interest in doing
an ad.
 Users and advertisers must agree on a payment method: pay-per-like, pay-
per-view, pay-per-click or other.
Key Feature Decisions:
 Search functionality will be a big deal for the advertisers. How do you
represent each search result? May want to use data visualization like Google
Analytics.
 How can you get the most info out of users? Integrating with a social media
account? Perhaps paying them more based on how much info they offer?
 What power dynamics are there between advertisers and users? Do users get
input on the ad text and picture? Or do advertisers make all the decisions on what
gets shown?
 People will not want $10 a week out of this. They will probably want more
like $100 at minimum. How can you balance this with the number of ads they will
likely need to show to get there? Nobody wants to completely pollute their news
feed.
 How sly do you want the ads to be? Should it be obvious, or should it feel
more like an authentic post?
What You Will Learn: Marketplaces are another very popular type of site.
This one will let you create two types of accounts, which is a common
structure. Messaging within a site will be a good skill to learn with this one.
Check out Fiverr for an example.
 4. Repair My ‘Ship
The Idea: This is short for “Repair My Relationship”. It is a forum where
users can post about their relationship issues, and others can chime in
with advice on how to fix their problems.
If you have experienced the fine communities on sites like 4chan, Reddit
or Bodybuilding.com, then you know that there are plenty of people willing
to donate a few minutes of time to help out.

Type of Site: Forum
Key Functions:
 A post/comment system similar to Reddit or Quora.
 An upvote system for both posts and comments
 An opportunity for the user to post what they actually tried with their
significant other, and what results ensued
 A badges or karma system to reward frequently upvoted users
 A user account system for those that want to comment or post, similar to
Reddit
Key Feature Decisions:
 Should this be more anonymized like Reddit, or tied to a social media
account like Quora for credibility?
 There will be plenty of trolls on this site. How do you deal with it?
 Should this strictly relate to romantic relationships? Or friendships as well?
 How can you use the badge system to motivate especially good commenters
to come back?
What You Will Learn: How to build a forum! Also, there are plenty of
people out there that are willing to donate a few minutes of their time to
help Internet strangers in need. Seriously. Your main challenge is making
sure these helpful users feel rewarded for their efforts, because that will
motivate them to come back.
 5. CatBattles
The Idea: Cat videos are… incredibly popular. One particularly distinctive
form of cat video is the amateur battle, where two cats duke it out with
minimal consequences, but plenty of meowing and wrestling.
This site would allow users to post videos of their cats wrestling, and allow
viewers to offer funny comments. This site would also NOT allow
professional cat battles, or fights with gruesome ends. It is strictly for
casual entertainment, not animal rights violations.

Type of Site: Video Content

Key Functions:
 Anybody can upload a cat video
 Users can create an anonymous account and add comments.
 A screenshot of each cat that the user clicks on to guess the victor before the
fight starts
 Upvotes for best videos and best comments
 The ability to report malicious videos, or ones that seem to be staged
Key Feature Decisions:
 Why would somebody post their cat fight video here rather than Reddit or
YouTube? You need to add a couple features to distinguish it from these sites.
 How can you make this site popular within the cat-lovers community? Cat
lovers do not enjoy violence, but they do enjoy cat humor.
 Should this site duplicate the dynamics of Hot or Not? How can you create a
unique viewing experience for the viewer that goes beyond YouTube? Perhaps a
play-by-play of the fight that gets recorded as users post?
What You Will Learn: Storing videos in a database is a good skill to learn.
Also, replicating the dynamics of YouTube will be good practice that others
will clearly understand. Getting the tone of humor right on the site would
also be a good challenge.
 6. CouponBank
The Idea: There are plenty of sites out there that allow people to exchange
coupons on a one-for-one basis. But what about the “long tail” of coupons?
In other words, rare or obscure coupons that might not be popular on a
more mainstream coupon site. And what if the other person does not have
a coupon you desire? Coupons are basically money, anyway.
You need a bank to handle this mismatch in the marketplace. This bank
would ask for an initial deposit of $20, let’s say. Then, every coupon that
you ask for will get debited from your account. Any coupon that you are
able to successfully give away will be credited.

Type of Site: Peer to Peer Lending

Key Functions:
 Users must be able to create an account, and then deposit $20 in escrow
which can be taken out any time. This is collateral. You can use Stripe to process
this transaction.
 Users can upload a photo of a coupon. The site must then automatically
determine the product, and the amount of the coupon. It must prompt the user if it
cannot figure it out. Google’s Cloud Vision API should help with this.
 When a user requests a coupon, the original poster must mail it to them. The
amount of the coupon is credited to the original poster’s account, and debited
from the requester’s account.
 Once somebody’s account hits $0, they cannot request any more coupons
until they trade some themselves, or add more money.
 The site generates revenue by taking a small percentage of every transaction.
Key Feature Decisions:
 How can you make this as easy as possible to upload a massive number of
coupons? The Cloud Vision API would be a big deal for this.
 How can you make this as easy as possible for people to send the coupons?
The user would be exhausted if he/she needs to send many coupons via mail.
 How can you make the search process as easy as possible? What if
somebody could upload a receipt, and you can check if there are any coupons
available for the items on the list?
What You Will Learn: This one encompasses a few key concepts of peer
to peer lending, albeit with a much lower risk profile. This is a great test of
your attention to user experience. There are millions of people across the
US that have time to spare, and are looking for an easy way to make a few
extra bucks. How can you make your site an excellent option for this?
Get creative
Don’t feel obligated to build the same projects as everybody else. It’s
extremely hard to gain a competitive edge on the rest of the market when
you are imitating.

Even if one of these suggestions does not help you, you should consider
building projects that can create a little personality and distinguish yourself
from all the others.

As Seth Godin says, “In a crowded marketplace, fitting in is a failure. In a

busy marketplace, not standing out is the same as being invisible.”

Did you enjoy this? Give it a like and let me know in the comments!
Also, if you are looking for visualized coding tutorials that make HTML,
CSS and JavaScript simple, sign up for my newsletter here:

20+ PROJECTS YOU CAN DO WITH JAVASCRIPT

JavaScript Projects for Beginners
These JavaScript project ideas for beginners are samples of things you can code with basic
JavaScript skills (along with some HTML and CSS). By looking at the source code for each of
these simple JavaScript projects you’ll start to understand how you can build a new version
of the same idea, or build on the original open source code to add your own twists and
tweaks.
1. BUILD A JAVASCRIPT CLOCK
If you’re on a website or using web applications with a self-updating time feature (you
know, a clock), there’s a very good chance it’s powered by JavaScript code. This means
JavaScript clocks don’t just make for good JavaScript projects, a JavaScript clock lets you
get hands-on with the kind of actual work you’ll be doing as a JavaScript developer.
To give you an idea of where to start with this JavaScript project idea, look no further
than the Lolcats Clock—a project that’s a staple of the Skillcrush JavaScript course.

JavaScript code makes it possible to coordinate the lolcat images with set times picked by
the user or by pushing the “Party Time!” button. I can haz time? Yes you can.
>>Link to the JavaScript project source code here
2. BUILD A JAVASCRIPT TIP CALCULATOR
Whenever I go out to eat and I’m having a hard time calculating the right tip, I’ll fumble
with my phone and search for a “tip calculator” on Google. I couldn’t tell you the name or
the url of the one I usually end up using, but it’s a simple JavaScript app. So go ahead and
take a swing at making your own tip calculator. This calculator on CodePen by Carolyn
Hemmings is a perfect JavaScript sample project that shows the kind of fun JavaScript
projects you can build with JavaScript and a little bit of HTML and CSS.
>>Link to the JavaScript project source code here
3. BUILD A JAVASCRIPT ANIMATED NAVIGATION TOGGLE
When you build website menus using only HTML and CSS, you’re limited to creating links
that move the user from one static page to another—it’s JavaScript that allows for drop
down, collapsible, and otherwise animated navigation features when you’re doing web
development. Animated navigation toggles are another ubiquitous part of the internet
landscape that you’ll be able to crank out for clients and potential employers once you get
the hang of the JavaScript programming language. This JavaScript project sample by A.
James Liptak shows the kind of dynamic navigation features you’ll have access to once
you’ve added JavaScript to your toolkit.
>>Link to the JavasScript project source code here
4. BUILD A JAVASCRIPT MAP
If you’ve ever used Google Maps to zoom in on a location and change your view mode, you
were using features that were built with JavaScript. JavaScript’s ability to create dynamic
objects makes it a natural fit for creative interactive maps on websites or in a web app.
While you don’t need to aim for recreating Google Maps on your first time out,
experimenting with simple JavaScript projects like Sara B’s interactive Codepen map (built
using the JavaScript framework jQuery—a collection of JavaScript libraries with pre-written,
reusable code) is a solid way to familiarize yourself with JavaScript’s map-making
capabilities.
>>Link to the JavaScript project source code
5. BUILD A JAVASCRIPT GAME
HTML and CSS are important building blocks in web development,  but JavaScript is the
programming language that moves websites from function to fun. So it’s no surprise that
games are on the list of fun JavaScript projects that let you practice your skills without
falling asleep at the keyboard. Martin’s Codepen maze is a perfect example of games as
simple JavaScript projects.
>>Link to the JavaScript project source code here
6. BUILD A JAVASCRIPT MOUSEOVER ELEMENT
Another bit of JavaScript goodness you’ve come to rely on online is the mouseover effect—
instances where hovering a mouse over a certain icon or area on a screen produces an
action or result from the spot where you’re hovering. Mouseovers are a routine part of
JavaScript development, so spending your time on a quick mouseover JavaScript project is
a worthwhile way to spend the afternoon. Roger Van Hout’s Happy Bouncing Balls
mouseover on CodePen displays a field of balls resembling the kind you’d get from gum
machines as a kid. Hover your mouse over any single sphere and watch it expand.
>>Link to the JavaScript project source code here
7. BUILD A JAVASCRIPT LOGIN AUTHENTICATION
Something as simple as a website’s login authentication bar (the area where you enter your
email and password to log in to the site) is another part of JavaScript’s domain. This
JavaScript project for beginners is a good idea to master, since just about every website has
a login authentication feature. Mike Tran’s Codepen authentication bar built
using AngularJS (another JavaScript framework) is a clean, to the point JavaScript sample
project.

>>Link to the JavaScript project source code here

8. BUILD A JAVASCRIPT DRAWING
JavaScript can be used as a drawing tool, bringing HTML and CSS elements to life on a web
browser screen. Being able to make static pages look more appealing with graphical
elements is a key part of web development, so learning how to make the most out of
JavaScript’s drawing capabilities is critical. Consider trying a drawing JavaScript project
like Narayana’s Infinite Rainbow on CodePen.
>>Link to the JavaScript project source code here
9. BUILD A JAVASCRIPT TO-DO LIST
JavaScript is particularly handy for coding interactive lists that let users add, remove, and
group items—something you can’t do with HTML and CSS alone. If you’re like me and have
great intentions of setting up a to-do list (but never do), now’s your chance. Use your
JavaScript chops to whip up a to-do list like this JavaScript project sample built by John
Fichera on Codepen.

>>Link to the JavaScript project source code here

10. BUILD A JAVASCRIPT QUIZ
Who doesn’t love a quiz? Whether they’re telling you which career path you’re best suited
for, where your political beliefs line up, or testing your knowledge on 1980’s WWF wrestlers,
quizzes can be both fun and useful—we even use a quiz here at Skillcrush to help users
determine which coding path is a good fit for them. If you’ve taken a quiz online, there’s a
good chance some JavaScript source code was involved, and now’s your chance to put
together quiz of your own. Follow in the footsteps of jksdk4 on CodePen’s JavaScript
project sample, and see what you can do.

>>Link to the JavaScript project source code here

11. CREATE SOME SLIDING JAVASCRIPT DRAWERS
This JavaScript github project (Pushbar.js) is a JavaScript plugin that allows developers to
add “sliding drawer” menus (menus that can be pulled onscreen from the top, bottom,
and/or left and right of an app) to their website or app. Take a look at the code and see if
you can come up with something similar!
>>Link to the JavaScript project source code here

Get Our Free Ultimate Guide to Coding for Beginners

Make a plan for learning the tech skills you need to land a new job with this 60+ page FREE
ebook!

SEND IT!
Skillcrush needs the contact information you provide to us to contact you about our products and services. You may unsubscribe from
these communications at anytime. For information on how to unsubscribe, as well as our privacy practices and commitment to protecting
your privacy, check out our Privacy Policy.

Advanced JavaScript Projects

Once you get familiar with the simple JavaScript projects listed above, you might be curious
what more advanced JavaScript projects look like. Here are some intermediate JavaScript
projects that go above and beyond the basics, but that are still open source—meaning you
can study the code to see how it all works and eventually take a stab at something similar
yourself.
12. PRETTIER
Prettier is an “opinionated JavaScript formatter,” meaning it’s JavaScript program used to
remove all original styling in your JavaScript code and format it into a single, prettier (get
it?) standard style.
>>Link to the JavaScript project source code here
13. TERMINALIZER
Terminalizer is a snappy, open source JavaScript project used to record your terminal
screen and then turn that recording into an animated gif—perfect for terminal demos and
tutorials.
>>Link to the JavaScript project source code here
14. NANO ID
Need to generate a random ID number for something important like your online banking
account (or just REALLY don’t want your roommate using your Netflix)? Nano ID is an open
source JavaScript program whose randomly generated IDs would take 149 billion years to
have a 1% probability of at least one collision. In other word’s that’s going to take your
roommate a LONG time to guess.
>>Link to the JavaScript project source code here
15. REACTION
Reaction is a great example of just how far you can go with JavaScript. Remember the
humble but proud JavaScript tip calculator in the Beginner’s section? Well, Reaction raises
the stakes from a JavaScript project that helps with one specific kind of transaction, to a
JavaScript project that allows users to run an entire business. Reaction is a commerce
platform used for managing business in real time and delivering shopping experiences
directly to customers. And it’s open source, meaning you can study how it all works!
>>Link to the JavaScript project source code here
16. WEBPACK MONITOR
Webpack Monitor is an advanced, open source JavaScript project used to improve
applications’ overall user experience. This JavaScript program keeps track of an
application’s “bundle” size and performance to make sure everything runs smoothly.
>>Link to the JavaScript project source code here
17. MAPTALKS
Building on the simple JavaScript map project from earlier, Maptalks is a more advanced
JavaScript project sample. Maptalks integrates 2d and 3d maps to create shifting, animated
landscapes where buildings and terrain and can extruded and flattened at will.
>>Link to the JavaScript project source code here
18. AR.JS
AR.js is an advanced JavaScript project attempting to bring the experience of augmented
reality to mobile devices using JavaScript. We’ve come a long way from animated
navigation toggles, right?
>>Link to the JavaScript project source code here
19. PARCEL
Parcel is a JavaScript web application bundler that can bundle together all an application’s
files and assets together in record time. How is this possible? Study the source code for
yourself, and find out!
>>Link to the JavaScript project source code here
20. WORKBOX
Workbox is a set of JavaScript libraries designed to add offline functionality to web apps. If
an app uses Workbox, the next time your WiFi goes out, you won’t be (quite) as bummed.
>>Link to the JavaScript project source code here
21. TONE.JS
Tone.js is a JavaScript framework for creating interactive web browser music. This includes
advanced scheduling capabilities, synths and effects, and intuitive musical abstractions built
on top of the Web Audio API.
>>Link to the JavaScript project source code here
Your JavaScript Future
While the above are all examples of basic and intermediate JavaScript projects you can do
or study to get your JavaScript fluency up to speed, here’s a sneak peek at what will be
possible down the road.
JavaScript can be used to create captivating visual storytelling like Bullying Free NZ’s anti-
bullying children’s book, Oat the Goat.
For hypnotic generative art visuals like Matt DesLaurier’s display on GitHub.

And Shirley Wu’s interactive data visualization of every line from the musical Hamilton.
As your experience with JavaScript code grows, your imagination will soon be the only
thing holding you back, so it’s time to get to work!