


Storefronts where we can buy digital or physical products online are everywhere. Real-world examples: Shopify, Etsy, Dev.to Storefront Deploy the backend to Heroku, frontend to Netlify.Use social authentication with Google, Facebook or Twitter, using Passport or a simpler service like Auth0.Use a database like Postgres or MongoDB, along with an ORM like Prisma (Postgres) or Mongoose (MongoDB).Build your frontend with create-react-app, and backend using a Node API.These users can interact with each other in different ways: they can follow one another to receive their posts, add media like images and video to share with others, and enable users to interact with posts such as liking or commenting on them. In many ways it's similar to a chat app, but expanded to a larger community of users. The app you're likely most familiar with is a social media application. Real-world examples: Facebook, Twitter, Instagram Add reactions to message with emoji using the npm package emoji-mart.Use a service like Firebase or GraphQL subscriptions to create and get messages in realtime to users.Build your project with create-react-app or Next.js.

It could also be part of a chat widget within a website where customers can directly talk with the site owners.Īll chat apps allow users to send messages to others in realtime, to react to messages, and they show when users are online or offline. Virtually all of use some kind of realtime chat app, whether it's a mobile application like WhatsApp or Viber or a productivity tool like Slack or Discord. Real-world examples: Slack, Messenger, Discord, Crisp Chat
MEDIUM CREATE REACT APPLICATION FROMSCRATCH HOW TO
If you want to see how to build each of these apps for yourself, check out my course series, where you'll learn how to create an impressive React project at the end of every month.
MEDIUM CREATE REACT APPLICATION FROMSCRATCH PLUS
In other words, building any of these projects will give you the skills and knowledge required to build the rest of the apps on the list, including your own personal projects.Īlong with each project, I have provided several real-world examples which you can use to find inspiration, plus some ideas about what tools I would possibly use to build each app. Social media apps can include chat apps, music or video apps can include e-commerce apps, and so on. Plus, many applications can be (and often are) integrated into one another. They require you to know similar, essential concepts like authentication, working with an API and database, using a React router for adding pages to your app, and playing media like audio or video. Why have I selected these seven projects in particular? I picked them because they build off of one another. There are countless projects that you can make with React, but here are seven that are on my list to build in 2021. React is a JavaScript library that is ideal for creating impressive apps.
