When you get right down to it, learning React (or any new thing) is all about practice. Sure, you need to read some tutorials and docs first. Maybe watch a few videos.
But then? Once you get stuck in the rut of googling for the answer every time, it can be a very tough habit to break. You find yourself googling for every little thing, and then – the next time you have the exact same problem – you have to google it again. I still do this every time I have to quit vim. Please send help.
The truth is, when you don’t understand the underlying concepts – how state works, how to pass props, how to think in components – it’s pretty damn hard to build an app from scratch.
Even though you know you can probably struggle through and figure it out, it’s way faster to just google it.
You can find lists of React project ideas, but even those might not be exactly what you want. Maybe they don’t cover the skills you want to learn, or they just don’t seem fun to you, despite how hard I worked on making that list.
So how can you come up with your own project ideas?
Invent Your Own Project Ideas
Where do good project ideas come from?
Personally, I tend to reach for things that are modeled after existing apps or real-world objects. I try to avoid anything too original. That might seem weird, but originality adds complexity.
If this project is for practice, then your goal is to practice React (or Redux, or GraphQL, or whatever) – not to also simultaneously practice design, and user experience, and product development (unless, of course, it is).
Focus is key here. Scope the problem down to the bare minimum. The Minimum Viable Practice Project. A tiny atom. A mere slice of the full functionality of an entire production application.
What Do You Want To Learn?
Before you can focus, you’ll need to figure out what you want to focus on. Pick one thing, even if you have a whole laundry list of tech to learn.
Want to learn React? Then just focus on React, all by itself. Don’t add Redux yet. Don’t add other tech that you don’t yet understand (whether that’s GraphQL, AWS Lambdas, server-side rendering, or whatever).
Want to learn Redux? Hopefully you already understand the basics of React – great! Now create a tiny React app and add Redux to it, so you can focus on the new things that Redux brings to the table: a store, actions, reducers, thunks, etc.
Want to learn GraphQL? Awesome. Make sure you understand React. Then create a small app that includes React + GraphQL. Now you have to find or create a GraphQL server for the backend, too.
You could find a public one – like GitHub’s GraphQL API, and just focus on learning the client side… or you could stand up your own little GraphQL server to play with.
Minimize and Simplify
The point is this: More moving parts means more things that can break, and a much bigger headache to debug. Anyone who’s ever googled “react CORS error” knows the pain of thinking that the problem lies in one piece of tech they’re focused on, while the root cause is something else entirely.
So: Choose your own difficulty setting. You don’t have to learn it all at once, in parallel. You can learn it all in time. Piece-by-piece, like building a brick wall.
Whenever you can, cut down on the number of moving pieces that are not the one thing you are trying to learn.
Brainstorm Project Ideas
Look around at the apps you use – mobile and desktop. Look at the sites you visit. Look around your house for physical objects that you could represent digitally.
Pick something that interests you, or relates to one of your hobbies in some way.
Into woodworking? Make a “cut list” app.
Into aviation? Maybe a “log book” would be a fun project.
Playing music? How about building a Circle of Fifths calculator.
Saving for early retirement a la Mr. Money Mustache? Maybe a gas mileage calculator would help. (or bike mileage, for that matter).
Here are a bunch of ideas I came up with while brainstorming examples for a new course. Hopefully it’ll get your creative ideas flowing.
- Thermostat. It’s a physical object with controls and state; basically a “Counter” plus a timer)
- Toaster. A few pieces of state – on/off, light/dark. A timer.
- Traffic light. Red/Yellow/Green lights and a timer.
- Activity tracker. At its most basic, it’s just a list of things you did. You could also design it like a chain-based habit tracker.
- Podcast player. Model it after iTunes, or Overcast, or whatever you like.
- Weather app. This could be extremely simple, with just a few days… or it could be hugely complex, like a whole weather site.
- Notes recorder. Learn the Web Audio API, make short recordings, and then store them in a list. Add/Rename/Delete recordings.
- Shopping site w/ cart. It’s a list of products, and a list of items in the cart. Add/Remove/Update. You could make it client-side only (static data) or integrate it with a server.
- Customizable dashboard w/ graphs. Everyone loves a good dashboard. Here’s a chance to learn D3.js and integrate it with React.
- Website Analytics. Mostly, it’s a list of page names and view counts. But if you fancied it up with graphs, you could work in some D3. And to do it for real, you’ll need a whole back end, and some minimal plain JS code to track page views.
- Blog + editor. It’s basically Wordpress. Clone their UI design.
- Some kind of quiz/survey builder like Typeform (their forms look great and would be great practice for getting the little UX details right)
- Trip packer. It’s pretty much a Todo List, but reframed. You could save multiple lists, like “Going on Vacation” vs. “Work Trip”.
- Email client. Model an app after Gmail or Fastmail. Great practice for using static data.
- Slack clone. Model an app after Slack or IRC. Channels & messages. Good Redux practice.
- Course platform. Model it after Teachable or Podia or egghead, with a list of lessons on the side and content in the middle. Good CRUD practice.
Go Forth And Build Things
Now that you can invent endless project ideas on your own, all that’s left to do is… go build them :)