Instagram Mern

screenshot of Instagram Mern
express
react
tailwind
material-ui

Full-Stack Instgram Clone using MERN Stack and Socket.io

Overview

The Instagram MERN Full-Stack Instgram Clone is a web application created using the MERN (MongoDB, Express, React, Node.js) stack along with Socket.io. It serves as a replica of the popular social media platform Instagram and offers similar features including user account management, posting, liking, commenting, following, and direct messaging. The application also includes additional features such as infinite scroll, suggested users, search functionality, and support for cloud storage services like AWS S3 or Cloudinary.

Features

  • Login/Signup User Account: Users can create a new account or login using their existing credentials.
  • Update Profile/Password User Account: Users have the ability to update their profile information and change their account password.
  • Reset Password Mail using Sendgrid: Users can request a password reset email through the Sendgrid mail service.
  • Infinite Scroll Posts: The application implements infinite scrolling to load more posts as the user scrolls down.
  • Suggested Users: Users are provided with suggestions for other user accounts they may be interested in following.
  • Search User Accounts by Name/Username: Users can search for other user accounts based on their name or username.
  • Follow/Unfollow Users: Users can choose to follow or unfollow other user accounts to see their posts on their feed.
  • Like/Unlike Posts (Double Tap Like): Users can like or unlike posts, with the ability to quickly like by double-tapping on a post.
  • Comment on Post: Users can leave comments on posts made by other users.
  • Save/Unsave Post: Users can save or unsave posts to easily access them later.
  • Visit User Profiles: Users can visit the profiles of other users to view their posts and information.
  • Share New Post: Users can share new posts by uploading images or videos.
  • Skeleton Loaders: The application includes skeleton loaders to show placeholders for loading content.
  • Delete Own Posts: Users can delete posts that they have created.
  • Search Users to Chat: Users can search for other users to start a chat conversation with.
  • Add New Chat: Users can initiate new chat conversations with other users.
  • Message Users: Users can send/receive messages to/from other users in real-time using Socket.io.
  • Typing | Online User Status: The application shows the typing and online status of other users.
  • See Followers/Following of Users: Users can view the list of followers and following of other users.
  • Post Liked by Users: Users can see the list of users who have liked a particular post.
  • Emoji Enabled (Emoji Mart): Users can use emoji characters in their comments or messages using the Emoji Mart library.
  • Cloud Storage: The application supports multiple cloud storage services including AWS S3 and Cloudinary for storing images.
  • Deployed On: The application is deployed on the Heroku platform.

Summary

The Instagram MERN Full-Stack Instgram Clone is a comprehensive web application that closely resembles the Instagram platform. It is built using the MERN stack and Socket.io for real-time communication. With a wide range of features including user account management, posting, liking, commenting, following, and direct messaging, the clone offers a complete social media experience. The implementation of additional features like infinite scroll, suggested users, search functionality, and support for cloud storage services further enhances the user experience. The application is well-documented and can be easily installed and deployed.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.