01 logo

5 React Projects You Need In Your Portfolio

Make your portfolio more impressive

By Long Ng.Published 3 years ago 4 min read
Like

Besides having a deep understanding of your React Library, you need a reasonable apprehension of JavaScript. Then, ensure to it offers helpful features for your React code.

React refers to the JavaScript library necessary for creating excellent apps. It allows you to do countless projects. So, your job, for now, is to find the best five projects for your portfolio.

Once you build any of these React projects, you can gain valuable knowledge and skills required to build other apps like your personal projects. After deploying these building apps, you can link them to your portfolio to display your expertise. Most of these apps offer to React WYSIWYG editor mode with varying “realism” levels.

Building an app is considered a self-directed activity. If you are a first-timer, it is ideal for learning the basics of app building and determining the app source code. Beware that a simple code reading can improve your skills as a developer.

When building applications, you need to break them down into composable components. Ensure to build out a single feature at once. You can quickly figure out what tools are necessary for each feature and the common patterns in building the apps through practice.

Below are the five projects you should have in your portfolio:

1. Social Media App

One of the highly recommended apps to add to your portfolio is the social media app. Instagram, Twitter, and Facebook are real-world, sophisticated options. These apps offer ever-changing features that maintain user engagement.

With the larger community of users, they can interact with each other using different methods. These methods include sharing images and videos, following other users to receive their posts, or liking or commenting on other users’ posts.

How to Build:

  • Build a backend with a Node API and front-end using a create-react-app.
  • Use a database like MongoDB or Postgres with an OPM like Mongoose for MongoDB or Prisma for Postgres.
  • Use social authentication with Twitter, Facebook, or Google using Auth0 or Passport
  • Deploy the front-end to Netlify and backend to Heroku

2. E-commerce App

Instead of building a large-scale e-commerce platform, it is better to work on a more focused and smaller app. With e-commerce apps, users can view their cars, add and remove items from their shopping carts, and checkout using their credit cards and other payment methods like Apple Pay and Google Pay.

How to Build:

  • Create the app using Next.js or create-react-app.
  • Add a stripe NPM package and use-shopping-cart for a more manageable payment process directly with Stripe Checkout.
  • Build the Node API for sessions creation handling with Stripe
  • Deploy the front-end to Netlify, and backend to Heroku, or both on Heroku

3. Entertainment App

The entertainment app is the broadest among the building app categories. This app focuses on a specific media type like music, podcasts, movies, etc. Spotify, Soundcloud, Audible, or Netflix are great examples.

These apps border on various social media apps. For instance, TikTok featuring short and imaginative videos can be driven by higher user engagement. An app like YouTube focuses on user interactions through subscriptions, comments, likes, and views.

When deciding what type of entertainment app you should build, think about what most interests you. Then, add social elements that enable comments, content sharing, and like with other users.

How to Build:

  • Create the app using create-react-app
  • Create the backend using Express or Node
  • Use Cloudinary to upload images and video to the API
  • Use a database like MongoDB or Postgres with ORM like Mongoose for MongoDB or Prisma for Postgres
  • Deploy the front-end to Netlify, and backend to Heroku, or both on Heroku

4. Messaging App

With messaging apps, you can have free messaging services like Viber or WhatsApp on the phone. You can also have those build into social media platforms like Facebook Messenger. If you want instant messaging to ensure immediate customer support, you can opt for web apps like Intercom.

Messaging apps are consist of conversations with two or more users where messages are sent and received in real-time. It is recommended to use services like Hasura or Firebase to transport data for WebSockets. That way, messages are displayed in the conversation as quickly as possible.

How to Build:

  • Build the app with Next.js or create-react-app
  • Use services like GraphQL or Firebase subscriptions to make messages real-time to users
  • Add reactions to messages like emojis with NPM package emoji-mart
  • Deploy the project to the web with Firebase Tools

5. Forum App

Through the forum apps, you have a place to get help. For instance, programmers can visit forums like Stack Overflow and Reddit to answer their coding questions. These apps combine various chat and social media apps elements through reactions, comments, and posts. They are a more organized social media app version that allows the users to find answers more quickly.

How to Build:

  • Build the backend with Node API and front-end using create-react-app.
  • Use a database like MongoDB or Postgres with ORM like Mongoose for MongoDB or Prisma for Postgres.
  • Use social authentication with Twitter, Facebook, or Google using Auth0 or Passport.
  • Deploy the front-end to Netlify and backend to Heroku

We hope that this post will help you a lot. Happy app building!

apps
Like

About the Creator

Reader insights

Be the first to share your insights about this piece.

How does it work?

Add your insights

Comments

There are no comments for this story

Be the first to respond and start the conversation.

Sign in to comment

    Find us on social media

    Miscellaneous links

    • Explore
    • Contact
    • Privacy Policy
    • Terms of Use
    • Support

    © 2024 Creatd, Inc. All Rights Reserved.