Ten apps you can build to learn React other than a to-do list.
So you?ve decided to learn React. At this point, you want to build a project to really solidify your skills.
Except this time, you don?t want to just code that same old to-do list. You want something more creative.
Now it can be tough coming up with an idea. Especially when you?re still learning. So for inspiration, here?s a list of ten starter project ideas for React.
Build a quiz-crafting tool. It?ll be the go to place to make viral quizzes like those from Buzzfeed or the infamous ?Harry Potter House Sorting Quiz.?
Use the Spotify api to create an application that lets you discover music. It will help you find top songs, trending artists, and explore new genres. If you want to get really advanced, how about a music suggestion feature?
Spotify Web API – Spotify Developer
Our Web API lets your applications fetch data from the Spotify music catalog and manage user’s playlists and saved?
Make an advanced interface for creating memes! Allow the user to upload an image, write a caption, and build a meme with the Imgflip api. To take it to the next level, allow the user to share their meme on Twitter, Facebook, and other social platforms.
Meme Generator API – Imgflip
RESTful JSON API for making memes with Imgflip’s meme generator
A lot of people keep track of their Instagram ratio: the difference between the number of people they follow, versus the number of people they?re following. So, use the Instagram api to compare a user?s followers, and the people they?re following. Then, reveal who?s not following them back!
Instagram Developer Documentation
Plenty of us have multiple twitter accounts. There?s one for your personal life, work, side startup, and more. Managing them all can be tricky. So build an interface that allows you to see the feeds from them all on one page. Better yet, add liking, tweeting, and retweeting capabilities.
REST APIs – Twitter Developers
All applications replicating the core Twitter experience, usually called “clients”, must adhere to certain restrictions?
Yelp already does a great job of recommending great restaurants. How about an app that does the opposite: horrible restaurants recommendations. It may be goofy, but at least you?ll know where not to eat!
API 2.0: Overview | Yelp For Developers | Yelp
Yelp’s API exposes search to 3rd party developers.
Create a dashboard where users can publish upcoming events. Also, enable an invitation feature through emails. To get a good list of upcoming events, use the Eventbrite api.
Eventbrite APIv3 Developer Documentation – Eventbrite Developer Center
Eventbrite brings people together through live experiences. Discover events that match your passions, or create your?
Build a forum application where users can submit topics and comment on them. To step it up a notch, add a liking feature. Mix in direct messaging if you?re extra ambitious.
Build your own version of medium from scratch. Users can create stories, ?heart? them, and follow other users.
Build your own version of YouTube using their api. Use it to only show videos from channels you specify. For extra utility, make a parental feature that allows you to block certain channels.
YouTube | Google Developers
Integrate YouTube videos and functionality into your website or application.
11. Bonus! RapidApi
Use any combination of apis from the awesome RapidApi marketplace. There are tons of options to choose from for building creative apps. There?s text-to-yoda-speak, computer vision, text sentiment analysis, and much more. There?s no limit to the apps you can build with stuff from this awesome site!
The largest api marketplace in the world.
There you have it! Ten (plus one) project ideas to get you coding in React. Hopefully, you won?t have to fall back on the tried and true to-do list app.
If you want a coding tutorial of a couple of the apps from this list and more, consider this course on ReactJS and Redux. It features a holiday-countdown utility, a reminder tool with local storage, a music-player with the Spotify api, and an app with full authentication. Check it out, and get coding!
And please feel free to connect with him by visiting his website: davidtkatz.com