React is a JavaScript library that can be used for numerous types of projects. You can create interactive UIs and design simple views for every state in your application.
These types of projects selected on the list here all require essential concepts such as using a React router to add pages, working with a database and API, playing media, and authentication.
Building any of these projects will provide all the required skills and knowledge you need to work with React.
Realtime chat apps
Chat apps allow users to send each other messages in real-time, see when the other users are online, and react to messages. Some of the real-world examples include Messenger, Slack, and Discord. It can also be a part of a chat widget placed on a website so that the users can talk directly to customer support or site owners.
To develop a real-time chat app, you can use Next.js or create-react-app to build your project. Use GraphQL or Firebase for real-time messages and provide reactions for the messages with the npm package emoji-mart. You can deploy the project using Firebase Tools.
Social media apps
Social media apps are in a way similar to chat apps, but with more functionalities and a larger community of users. Some of the real-world examples include Facebook, Instagram, and Twitter. Users can interact with each other, add media, engage with content, and share posts, and media.
To build a social media app, use create-react-app for the frontend and Node API for the backend. Use databases such as MongoDB and Postgres, together with an ORM such as Mongoose or Prisma. Add social authentication using Auth0 or Passport, and deploy your project to Heroku (backend) and Netlify (frontend).
E-commerce apps
E-commerce apps allow users to add and remove products from their shopping carts, and checkout using different payment methods such as credit cards, Apple Pay, or Google Pay. Some of the most famous real-world examples include Shopify and Etsy.
To build an e-commerce app, use create-react-app or Next.js and build a Node API to handle payments with Stripe. Deploy both backend and frontend to Heroku.
Video sharing apps
This is a broad category since you can use video in different ways on many apps. Some of the real-world examples include YouTube and TikTok, and the most popular features include searching for videos, sharing, and interacting with other users’ content.
To build a video sharing app, create the app with create-react-app and use Node/Express for the backend. Provide media uploads with Cloudinary and use a database such as MongoDB or Postgres, together with an ORM such as Mongoose or Prisma. Deploy the backend of your project to Heroku and the frontend to Netlify.
Blogging and portfolio apps
Building a blogging or portfolio app will allow you to showcase your skills as a developer and include posts and content that reflect your knowledge. Real-world examples are Medium, HashNode, and Dev.to.
You can easily build this type of app using Gatsby or Next.js, and a special markdown transformer plugin like remark. Deploy your project to Vercel or Netlify.
Forum apps
Forum apps are used as a place where you can get answers to your questions or help, and they combine several elements of social media and chat apps. Essentially, this is a more organized version of a social media application – such real-world examples include Stack Overflow and Reddit.
To build a forum app use create-react-app and Node API for the frontend. For the database, choose MongoDB or Postgres, together with an ORM like Mongoose or Prisma. Provide social authentication with Facebook, Twitter, or Google with a tool such as Auth0 or Passport. Finally, deploy the project – backend to Heroku and frontend to Netlify.
Music streaming apps
Similar to video-sharing apps, React is great for music streaming applications as well. Some of the real-world examples include Soundcloud, Spotify, and Pandora. Users can listen to music, interact with content, maybe even upload their own music or purchase songs.
To build a music streaming app, use create-react-app and Node/Express for the backend. Use a database like MongoDB or Postgres, together with an ORM like Mongoose or Prisma. For the upload, use Cloudinary. Finally, deploy the project to Heroku, or deploy frontend to Heroku, and frontend to Netlify.