One of the best ways to learn is by doing. But often developers struggle with the big question "what should I build?"
Here are 8 project ideas, complete with project briefs and layout ideas, to get you started learning by doing.
- Business & Real-World: Map Statistics Dashboard
- Fun & Interesting: Musical Instrument
- Personal & Portfolio: Blog
- Productivity: Notebook
- Puzzles & Games: Space Invaders
- Tools & Libraries: Framework Theme
- Project Add-Ons: Webmentions
- Clones: Product Hunt
This is a preview of the free ebook 50 Projects for React & the Static Web. You can find the full 50 project ideas including these 8 at 50reactprojects.com.
Map Statistics Dashboard
Category: Business & Real-World
Create a map dashboard that shows statistics and geographic information about COVID-19.
Dealing with a global pandemic means that viruses like the Coronavirus impact the world differently based on geographic location.
Having a map with a breakdown of each country’s statistics is a useful way of being able to determine things like which countries have been impacted the most.
The easiest way to see statistics country to country is to have a map that you can browse with each country’s statistics available next to that country.
Create a mapping app that uses the disease.sh Coronavirus API to add markers to the map for each country along with the number of COVID-19 cases.
While having the statistics for each country is helpful, it might be useful to be able to compare those statistics to the number of cases in the entire world.
Add a statistics dashboard that shows the number of COVID-19 cases around the world as well as any other useful statistics from the API.
Getting current statistics is a good way to understand the current state of the world, but how does that compare historically?
Use the historical data API to show graphs on the dashboard that provide context to the growth and spread of the virus.
- Create a new map app
- Fetch API countries data
- Add markers to map
- Add statistics to markers
- Fetch API global data
- Create a stats dashboard
- Add global stats
- Fetch API historical data
- Add graphs to map
- Open Disease Data API (disease.sh)
- React Leaflet (react-leaflet.js.org)
- Gatsby Leaflet Starter (github.com)
- How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (freecodecamp.org)
- How to add Coronavirus (COVID-19) case statistics to your React map dashboard with Gatsby (freecodecamp.org)
- Mapping with React Leaflet (egghead.io)
- COVID-19 Dashboard by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU) (coronavirus.jhu.ed)
- Coronavirus (COVID-19) Dashboard Demo (coronavirus-map-dashboard.netlify.app)
Category: Fun & Interesting
Create an interactive piano that you can use to play music with your keyboard.
Not everyone has the luxury of owning a musical instrument, but maybe those people have a laptop, phone, or tablet. Having a piano is a powerful way to let people play music even if they didn’t have the opportunity before.
Using the browser and web audio APIs, we can create sounds that, when put together, can actually sound like music.
Create a set of buttons that play notes of a scale when clicked.
While not everyone’s played an instrument before, the concept and interface of an instrument like a piano is generally more intuitive than a bunch of buttons.
Create a piano layout using buttons that work by either clicking the button or using the physical keyboard.
We might have limited space in the browser, but there’s a wide range of notes, scales, and sounds an electric keyboard might be able to make with some added effects.
Create effect toggles that change the sound of the notes when toggled on.
- Create buttons
- Play sound when clicked
- Arrange notes in a scale
- Create piano layout
- Set keyboard events
- Create effects layout
- Toggle audio effects
- React HotKeys (github.com)
- Building a Piano with React Hooks (dev.to)
- Building a piano with tone.js! (dev.to)
- React Guitar (react-guitar.com)
Category: Personal & Portfolio
Create a blog that you can use to share your career experiences and projects.
With any career, having a blog to share your experiences is a good way let people know what you’re working on and help others learn from your experiences.
It’s also a way to reinforce what you’ve learned so you can reference it in the future.
To be able to share your experiences, you need a website structure that will allow you to create new content and manage existing content.
One way to do this is by creating markdown files that your website sources to create new pages and display the posts.
Create a blog using markdown files as the content source.
Having your content in markdown files is a good way to manage static content, but you might not want to have to edit code every time you write or edit a post.
Integrate a content management system that allows you to add new content or edit existing with a nice user interface.
If you’re sharing code on your blog, HTML natively supports the code and pre tags that help you format code in a readable way. But that doesn’t include syntax highlighting that helps improve readability.
Integrate a syntax highlighter that makes code blocks more readable.
- Create a blog
- Add first static content
- Source static content
- Integrate CMS
- Add code to content
- Add syntax highlighting
- Netlify CMS (netlifycms.org)
- Prism.js (prismjs.com)
- Making a Gatsby Blog with Netlify CMS (gatsbyjs.org)
- How to Build Your Coding Blog From Scratch Using Gatsby and MDX (freecodecamp.org)
- Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)
Create a notebook app to add, manage, and organize a group of notes.
Taking notes is a great way to make sure we keep track of our thoughts or remember the important takeaways from a meeting. Being able to easily manage them and organize them is important for finding them later!
The first requirement of a notebook is being able to take notes. This can be pretty simple to start, where really you need some sort of input that collects what you write and stores it somewhere for later.
Create a form to add new notes and view them in a list.
In order to find your notes later, you want some way of organizing those notes and a way to look them up. That includes adding categories or a tagging system as well as a UI to make searches from.
Add the ability to tag or categorize notes and an input to search through them.
Whether we realize it or not, we can find connections between our thoughts and more importantly our notes, where we can take advantage of that network of thoughts for our notebook.
Add Roam Research-inpsired linking of notes to create a network of thoughts.
- Create a form
- Store new notes
- List notes
- Add tags or categories
- Add note search
- Add note network
- Gatsby Brain Theme (github.com)
- Fuse.js (fusejs.io)
- How to Add Search to a React App with Fuse.js (freecodecamp.org)
- Foam (foambubble.github.io)
- Roam Research (roamresearch.com)
- Gatsby Garden Theme (github.com)
Category: Puzzles & Games
Create a space invaders spacecraft shooter game to shoot multiple waves of enemy ships.
Space Invaders is an arcade classic that puts you in a spacecraft up against an alien invasion. As you try to shoot them down, they’re firing back, and you only have a limited amount of protection before you’re open to being hit.
The core part of the game is that you’re moving around a spacecraft trying to hit a bunch of aliens with your weapons. While there’s one of you, there’s many of them.
Create a spacecraft that can move around and shoot aliens that are not moving.
What makes the game tricky, is that the aliens are constantly moving. Every time they hit the edge of the play area, they drop down and speed up, getting closer to your ship.
Add movement to the aliens going side to side on the play area. Every time the aliens reach one side they should drop down a level. They should also speed up at certain intervals.
You’re on your own, but luckily you can get some protection. You have shields that you can hide behind that help protect you while they last.
Create several shields in front of the player spacecraft that can take a limited amount of damage.
- Create a new game
- Create static aliens
- Create a player spacecraft
- Add spacecraft controls
- Add spacecraft weapon
- Configure alien damage
- Make aliens shoot back
- Make aliens move
- Add alien intervals
- Add shields
- Space Invaders (codepen.io)
Category: Tools & Libraries
Create a Gatsby theme that sets up a project with the Tailwind CSS framework.
As developers, we commonly have to do a bunch of similar steps any time we create a new project. But tools like themes let us abstract those steps and package them in an easy to use way that can work for any new project.
Gatsby themes are a plugin-like system where we can take advantage of the Gatsby pipeline to share functionality as a package on npm.
This opens the door to really doing anything we would do in a Gatsby site, but making it reusable to any Gatsby site.
Create a new Gatsby theme that, when used, creates a new a style guide page on any project it’s added to.
The goal of themes isn’t just to create pages, but to add functionality that makes us productive. This includes things like frameworks and project configurations.
Add a CSS framework to the Gatsby theme that lets the project it’s added to use that framework.
Sometimes themes are better only as tools, sometimes it’s helpful to be opinionated. One way to add useful functionality to a CSS framework is to create stock components.
Create reusable React components using the CSS framework that can be used in the project the theme’s added to.
- Create a new theme
- Add to example project
- Create new style page
- Add CSS framework
- Use CSS in example
- Create components
- Use components
- Gatsby Themes (gatsbyjs.org)
- Tailwind (tailwindcss.com)
- Building a Theme (gatsbyjs.org)
- What is Tailwind CSS and How Can I Add it to my Website or React App? (freecodecamp.org)
- Gatsby Tailwind Theme (github.com)
Category: Project Add-Ons
Add webmentions integration to a website that shows Twitter interactions with the website.
Social interaction is an impactful way to bring more of an audience and conversation to topics we write about.
Having something on a website shows that interaction can be helpful to both inspire people to want to get involved or let people feel like they can be part of it.
In order to make use of Webmentions, a website needs to be configured with meta tags to provide information.
Add the proper meta tags to a website and validate its use with webmention.io.
The Webmentions API is a way to programmatically see connections in social interactions from a URL of your website. It lets you get the type of interaction and even the person’s profile avatar.
Connect a website to Webmentions and add a list of social interactions to blog post pages.
Now that the website is showing all of the interactions, there should be an easy way to join the conversation.
Add a social link that, when clicked, creates a tweet with a link to the page.
- Add meta tags to website
- Validate meta tags
- Connect to Webmention
- Connect social to Bridgy
- List interactions
- Add tweet button
- Webmention.io (webmention.io)
- Bridgy (brid.gy)
- Gatsby Plugin Webmention (github.com)
- Indieweb pt2: Using Webmentions in Eleventy (mxb.dev)
- Clientside Webmentions (swyx.io)
- Getting started with Webmentions in Gatsby (knutmelvaer.no)
- Building Gatsby Plugin Webmentions (christopherbiscardi.com)
- Knut Melvær (knutmelvaer.no)
- Swyx (swyx.io)
Create a Product Hunt clone that lets people post a new product with ratings.
We all live for products, whether it’s our mobile phones or the apps we use on our laptops.
While there are tons of products in the world, it can be hard to navigate through the good and the bad. Tools like Product Hunt provide a platform to learn about new tools and get reactions and reviews from others.
The most important part about learning about new products is the product itself. We want to know what the product is, what it looks like, and how it works.
Create a page that lets you add a new product to a website with a title, picture, and description.
When learning about products, reviews are a way we can trust a product before we purchase it. It helps us gain confidence in what we’re about to spend our money or time on.
Add the ability for people to add reviews about each product.
People love products, so there are tons of them in the world. There are way too many to try to sort through manually, so we need a mechanism to search and browse with.
Add the ability to search products and browse by category.
- Create product website
- Create database
- Add product form
- Add product to database
- Request product for page
- Add review form
- Add reviews to database
- Add reviews to product
- Add product search
- Add product categories
- Hasura (hasura.io)
- Building a Product Hunt clone app using Hasura and Next.js (logrocket.com)
- How to build a basic version of Product Hunt using React (freecodecamp.org)
If you want more project ideas, check out 50 Projects for React & the Static web!