MERN Stack Instagram Clone using mongo, express, react, node

Set up the MERN stack Instagram clone environment with Visual Studio Code, Node.js, and Postman, and install extensions like auto rename tag, es7 react redux, prettier, and tailwind css.

Initialize a MERN stack instagram clone by creating a project folder with frontend and backend, running npm init, and configuring package.json for type module.

Install the core packages for the project, including express, mongoose, JSON web token, bcrypt js, and nodemon for development. Explain dev dependencies versus production use.

Learn to run an Express server, set up middleware for json payloads, cookies, and url-encoded data, configure cross-origin options for the frontend, and create a simple hello world route.

Learn how to configure environment variables in a MERN stack project using the dot env package, define the port via process.env.port, and run the server with a fallback when needed.

Set up a MongoDB Atlas project and a free-tier cluster for the MERN Instagram clone, enable IP access, and generate a MongoDB URI for your env file.

Connect the app to a MongoDB database by creating a config/db.js with mongoose and env mongo uri, ensuring the instagram clone database connects before starting the server.

Create a mongoose post schema with caption, image requirements, author as user reference, and arrays of object IDs for likes and comments, then export the post model.

Create a mongoose comment schema with text, author, and post fields, each required. Reference user and post models and export a Comment model for the MERN instagram clone.

Build chat support in a MERN stack Instagram clone by creating message and conversation schemas with mongoose, referencing user IDs for sender, receiver, and participants, and structuring message arrays.

Define the registration controller in backend/controllers, extract username, email, and password from the request body, validate inputs, hash password with bcrypt, and return 201 on success.

Implement login for the MERN Instagram clone with email validation, bcrypt password check, and JWT token creation, then set httpOnly cookies and return the user data without the password.

Implement logout controller to clear the jwt token cookie by setting its max age to zero, then respond with a success message and logged out status.

Implement get profile controller to fetch a user by id from request.params.id, return 200 with the user and success true, or 404 if not found, and 500 on server error.

Edit the logged in user's profile by retrieving their id from an authentication middleware, updating bio, gender, and optional profile picture via cloudinary upload, and returning a success response.

The lecture explains building a follow/unfollow controller in a MERN stack Instagram clone, handling self-follow checks, user lookups, and updating follower/following arrays with push and pull logic.

Create the user api routes, including register, login, logout, and profile access with isAuthenticated. Add edit with multer for profile picture, plus suggested, follow, and unfollow routes, mounted at /api/v1/user.

Test all instagram clone APIs with postman, including user registration, login, and profile management—bio, gender, and profile picture updates—plus follow, unfollow, and suggested users.

Create a post controller function to add new image posts, validate image and caption, optimize with sharp, upload to cloudinary, update the user’s posts, and return the new post.

Fetch all posts sorted by newest, populate author username and profile image, and include nested comments with their authors for the MERN instagram clone.

Fetch a single user post by author id, sorting by newest, populating author details (username, profile picture) and comments, and return the post or an error message.

Fetches comments for a post by id, checks post existence, populates author with username and profile picture, and returns comments or an empty array with status codes.

Delete post logic handles removing a post by id, verifies the author, removes the post from the user's list, deletes associated comments, and handles errors.

Implement bookmark post logic in a MERN stack app by validating post and user, toggling bookmarks with add to set or pull, and returning success or error messages.

Create a get messages controller that fetches a conversation by sender id and receiver id and returns its messages; return an empty array if not found.

Create the message route for the mern stack instagram clone by defining post /send/:id and get /all/:id with isAuthenticated and exporting the router.

Set up the front end of an instagram clone using react 19, vite, and tailwind css 4, configuring tailwind via cdn and project files to verify styling works.

Create a signup page for the MERN stack instagram clone by adding signup.jsx, applying tailwind styling, and building a form with username, email, and password fields.

Create a signup page that manages username, email, and password state, submits with axios to a backend, and uses loading and toaster feedback with error handling.

Create a login page for the MERN Instagram clone by converting signup to login, using email and password, and adding a loading state with a spinner.

Master client-side routing for a mern stack instagram clone by implementing react-router-dom with a main layout, nested routes for home, profile, login, and signup, plus navigation, outlet, and redirects.

Create a fixed left sidebar for the instagram clone, with home, messages, explore, create, and profile icons and labels, and wire token-based login via cookies.

Implement logout functionality in the MERN stack Instagram clone by calling the logout API with Axios, then redirect to login and show a success or error toast.

Learn to build the posts page of a MERN instagram clone by creating feed and post components, with user details, actions, comments, and a right side bar.

Create a single post page for a MERN stack Instagram clone, including avatar, user header, post image, like and comment actions, and dialog menu with unfollow and add to favorites.

Create a comment dialogue page for a post in a mern stack instagram clone, implementing a responsive dialog with open state, viewing comments, avatars, and a three-dots action menu.

Refine the dialogue comment page in the MERN stack instagram clone by adjusting layout, avatars, and margins, and implement a send button with a disabled state and a send handler.

Install Redux Toolkit and React-Redux, configure the store, create an auth slice with a set auth user reducer, and wire it in main.js to manage authentication state.

Learn how to persist user data with redux persist in a MERN stack instagram clone, by wiring the store, selector, and auth reducer to keep the profile picture across refreshes.

Create post page for a MERN Instagram clone opens a dialog from the create button, showing avatar, user info, a caption area, and a button-triggered file input.

Create post page demonstrates an image upload flow with a file change handler, image preview, and caption state using React useState in a MERN app.

Integrate the post API using axios to send caption and optional image as multipart form data to the backend, with loading and toast feedback.

Create a post slice in redux toolkit for mern stack instagram clone, initialize an empty post array, define set post reducer, export actions, and integrate the slice into store.

Learn to get and show post data from the api using redux in a mern stack instagram clone, wiring post and author data, images, captions, and likes.

Learn to implement like and dislike for posts in a MERN stack Instagram clone, including frontend state toggling, axios requests, and updating Redux post data to reflect changes.

Develop the comment functionality in the MERN stack Instagram clone by posting comments with Axios, updating the post state and Redux store, and displaying a success toast.

Build a suggested users component for the MERN stack instagram clone, rendering a right sidebar with fetched suggested users, profile links, avatars, bios, and a follow button.