7 Exciting React Projects to Build in 2021
React has quickly become one of the most popular and powerful tools for building modern web applications. Its component-based architecture and rich ecosystem make it an ideal choice for creating interactive user interfaces and complex, data-driven apps.
If you‘re looking to sharpen your React skills and add some impressive projects to your portfolio, here are seven excellent apps to build in 2021. Each of these ideas will challenge you to learn and apply essential React concepts while creating something practical and valuable.
1. Realtime Chat Application
Realtime chat apps have become ubiquitous in both our work and personal lives. Tools like Slack, Microsoft Teams, Discord, and Facebook Messenger allow us to communicate instantly with colleagues, friends and family no matter where we are.
At their core, chat apps let users send and receive messages in realtime. When a user types out a message, it should appear immediately for the recipient without needing to refresh the page. The app should also show when users are online or offline, and allow them to set a status message.
To add some visual flair, let users react to messages with emoji or animated GIFs. You can easily add emoji with the emoji-mart NPM package.
For the frontend, create your chat app with Create React App or a framework like Next.js that includes React. You‘ll need realtime functionality to send and receive messages without page reloads. Two good options are Google‘s Firebase Realtime Database or implementing GraphQL subscriptions.
When you‘re ready to release your chat app to the world, you can quickly deploy a React app with Firebase Hosting or a platform like Vercel or Netlify.
2. Social Media Application
Social networking apps like Facebook, Instagram and Twitter are some of the most-used applications today. Building a social media app is a great way to understand one of the core uses of web development while learning to work with a backend API, databases, and cloud storage.
A basic social media app should allow users to register for an account and then post text, images, and videos. Users can follow each other to see a personalized feed of content from the accounts they‘re following.
Most social apps have common features like:
- Liking, commenting on, and sharing posts
- Replying to comments to create threaded conversations
- Tagging other users with @ mentions
- Hashtags for categorizing and discovering relevant content
For the frontend, create your React app from scratch with Create React App. You‘ll need a backend API to handle user authentication, storing and retrieving posts from a database, and serving media files.
Node.js with Express is a popular and powerful choice for building web APIs. For the database, you can stick with traditional relational databases like PostgreSQL or explore NoSQL options like MongoDB. An Object-Relational Mapping (ORM) tool like Prisma or Mongoose will make it easier to interact with your database from Node.
User authentication is essential for any app with user accounts. While you can implement your own login system, you‘ll likely want to add social "OAuth" logins with Google, Facebook, Twitter or GitHub. Passport.js is an excellent Node library for handling OAuth. For a simpler but less flexible approach, consider a service like Auth0.
Finally, you‘ll need a place to store and serve the images, videos and other media files uploaded by your users. A cloud storage service like Amazon S3, Google Cloud Storage or Cloudinary is perfect for the job.
3. E-Commerce Store
With online shopping more popular than ever, knowing how to build an e-commerce storefront is a valuable skill for any web developer. While you can create a store with WordPress and WooCommerce without writing much code, building an e-commerce app from scratch with React is a great learning experience.
Your app should display products with images, descriptions and prices. Users can add one or more products to their cart, then check out and pay to complete their order. You may also want to add user accounts for saving their purchase history and shipping info.
E-commerce may sound intimidating, but the React ecosystem includes some great tools for accepting payments. The excellent use-shopping-cart library makes it easy to add a cart and integrate Stripe for secure checkout. You‘ll also need a backend API built with Node/Express or similar to process the payments with Stripe.
Frameworks like Next.js and Gatsby are perfect for building e-commerce apps, since they‘re optimized for performance and have plugins for pulling in product data. You can host your store on Netlify which works well with Next and Gatsby.
4. Video Sharing Platform
Video has taken over the internet, led by massively popular platforms like YouTube, Netflix, and TikTok. Many social apps like Instagram, Twitter and even LinkedIn now have native video players. Video streaming and sharing is a key feature of modern web apps.
The core functionality of a video sharing app is uploading and watching videos. Videos are usually displayed in a grid or list, with the ability to click on a thumbnail to watch the full video. You‘ll need a backend API and database to store data about the uploaded videos.
For handling video uploads, a service like Cloudinary or Amazon S3 is crucial. Accepting video file uploads directly to your backend server can quickly exceed your bandwidth and storage limits. A cloud service will give you generous limits and handle serving the video files efficiently.
You may also want to add user accounts so creators can manage the videos they‘ve uploaded. For viewers, you can include liking or favoriting videos, creating playlists, and commenting.
To build your frontend, Create React App is a good place to start. Combine it with a UI component library like Material UI, Chakra UI or Ant Design to speed up development.
For the backend, Node with Express and a database like PostgreSQL or MongoDB will work well. You can deploy the API and database to a hosting provider like Heroku or back to Netlify if you‘re using Netlify Functions.
5. Blogging/Portfolio Website
Every developer should have their own portfolio site to showcase their projects and writing samples. My own site [https://reedbarger.com] is built with React and Next.js, while using markdown for authoring blog posts.
Static site generators like Gatsby and Next.js that use React are perfect for building fast, visually appealing blogs and portfolios. Their excellent documentation and plugins for working with markdown make it simple to get a site up and running quickly.
For writing blog posts, you‘ll want to use a format like markdown so you‘re not writing your content directly in HTML. Markdown allows you to format your text with a simple, readable syntax that gets converted to semantic HTML.
With Gatsby and Next.js, you write your content in markdown files, then use their GraphQL data layer or file-based routing to generate pages automatically. This approach keeps your content separate from your code for a clean, maintainable project structure.
Since these sites are static, they can be deployed instantly to hosting providers like Netlify or Vercel. These platforms have generous free tiers and automatically optimize your assets like images to ensure fast page loads.
6. Forum/Community Application
Many of us turn to community-driven websites like Stack Overflow or Reddit to find answers to coding questions, get feedback on our projects, or discuss the latest web development trends. Why not build your own forum app to learn React while creating a place for discussion on a topic you‘re passionate about?
Forums and online communities tend to have a question-and-answer format. A user creates a new post with a title and description, and other users can comment on the post with answers or to ask for clarification. Many forums also allow upvoting and downvoting questions and answers so the most useful responses rise to the top.
Compared to a social media app where users have individual profiles and followers, a forum is more community-focused with threads of discussion grouped by topic.
To build a forum, create your frontend with Create React App or Next.js. For the backend API, Node with Express and a SQL database like PostgreSQL will work well for storing questions, answers, comments and votes in a relational structure.
User authentication is key to prevent spam and encourage quality discussions, so you‘ll likely want to integrate social logins with Google, Facebook, Twitter or GitHub using a library like Passport.js or NextAuth.js.
You can deploy the backend to a Node hosting provider like Heroku or DigitalOcean and use Netlify to host the frontend.
7. Music Streaming Service
Music streaming apps like Spotify, Apple Music and Pandora have changed the way we listen to our favorite songs and discover new artists.
For a fun and challenging React project, you can build your own music streaming service. You‘ll learn to work with multimedia files, create an interactive player UI, and use data persistence to store playlists and favorites.
The key features of a music app include the ability to search for and play songs, create playlists, and "like" songs to add them to a favorites list.
For playing audio files in the browser, the HTML5 <audio> element has you covered. And when it comes time to deploy your app, a cloud hosting service like Cloudinary or S3 is essential for reliably serving the audio files.
On the backend, you‘ll need a database like PostgreSQL or MongoDB to store metadata about artists, albums, and playlists. A Node API with Express is a good choice for the server.
To handle searching for songs, you can use a service like Algolia which is basically a search engine in the cloud. Their generous free tier and powerful features are a great fit for a music app.
You may also want to find public APIs for music metadata to seed your database. The LastFM and MusicBrainz APIs are two good options. The Spotify API is another excellent choice if you want to recreate their interface and add features like artist radio.
With all these technologies in your toolkit, you can build an impressive music player that rivals the big streaming services. And by creating an app you‘d love to use yourself, you‘re sure to have fun while learning a ton about full-stack React development.
Those are just a few of the exciting possibilities for React projects to build in 2021 and beyond. Whatever you decide to create, the key is to challenge yourself, have fun, and show off your amazing work!