MERN Stack Master Course - Building your own Instagram

Build a simple hello world server with node.js and express, define routes for / and /home, and run on port 5000 to respond with a message.

Learn how Node.js middleware intercepts and modifies incoming requests before reaching route handlers, using global and route-specific middleware and next to proceed.

Set up a MongoDB Atlas cluster, configure network access and a database user, then connect your app using Mongoose with unified topology to confirm the database connection.

Define a user schema as a blueprint for storing user data. Register the schema as a Mongoose model named User and export it for reuse across files.

Build a sign-up endpoint in Express, parse JSON request bodies to read name, email, and password, and validate inputs with Postman, and handle success or error responses.

Learn how to post user data to a database using mongoose and the user model, saving email, name, and password, and hashing passwords.

Hash passwords with bcrypt, set the salt rounds (default 10) for stronger security, and store the hashed password in the Mongo database during user creation.

Implement a signin route that validates email and password, checks the user by email, compares passwords, and issues a jwt token for accessing protected resources.

Implement jwt-based authentication in a MERN app by generating and sending a token on sign-in, then using and verifying it to access protected resources.

Build middleware to verify tokens and protect resources by enforcing a valid authorization header and JWT, returning 401 unauthorized when missing or invalid and exposing user data after validation.

Learn to build a post model with title, body, and photo using mongoose, and create a post route that links posts to the posting user.

Fetch all posts with a get request to the posts endpoint and display them. Populate poster details and select only id and name, omitting email and password.

Implement the posts created by me route in the MERN stack, fetching posts authored by the logged-in user with populated author details, using token-based authentication for creating and viewing posts.

Learn to scaffold a React app, set up routing with React Router, and create routes for home, log in, sign up, and profile using a navigation bar.

Create sign-in and sign-up UI for an instagram clone in the MERN stack course by importing fonts, styling inputs and buttons, applying color themes, and enabling smooth navigation between forms.

Develop a profile page UI inspired by Instagram, organizing the profile image, user details, a follow section, and a gallery grid of posts using divs and flex layouts.

Build the home page UI by styling a home card layout with image, title, body, and a heart icon; prepare for dynamic posts and future fetches.

Create post page UI by building a post component with title, body, and image inputs, including a file upload and a submit button, with focused styling and state management.

Learn to implement user signup by posting form data (name, password, email) to a server, handle requests via fetch, validate email, show toast feedback, and navigate to login using history.

implement user signin in a MERN app by wiring email and password inputs, handling token-based authentication, showing toasts, and updating user data via context API redux, then reaching the home screen.

Build a create post component with title, body, and image upload to Cloudinary, configure the cloud name, and post the data to the backend via fetch.

Save the JWT token in localStorage and guard post creation behind login; manage cloud uploads and follow-up data posting with useEffect and conditional API calls.

Create and integrate context in a MERN app using createContext and a provider, manage user state with useReducer and useContext, and persist across routes with local storage.

Learn token-based navigation control in a MERN app by conditionally rendering links after sign-in and sign-out. Use context to manage user state and protect access to profile and create post.

Fetch posts for the home page using useEffect with an empty dependency array, include JWT in headers, and render posts by mapping data to display user names and images.

Implement logout functionality by wiring a clear action to local storage, updating state, and redirecting to home, while refining sign-in, sign-up, and profile navigation.

Fetch the logged-in user's posts with a JWT and render them on a dynamic profile page. Use useEffect and useContext to access state and manage token-based redirects.

Develop a Node.js api for liking and unliking posts, updating the post's likes array by pushing the logged-in user's id when liking and removing it when unliking.

Implement client-side like and unlike functionality for posts, updating like counts in real time, using fetch requests with post id and jwt authorization, and preventing multiple likes per user.

Learn to build a Node.js API for post comments in a MERN stack app, with comment fields, user references, token authentication, and front-end integration.

Implement a client-side comment feature by posting JSON with post id and text to the backend, using a bearer authorization header, and updating the UI to display the new comment.

Learn how to implement delete post functionality in a MERN stack app, ensuring only the post creator can delete, with server checks, post lookups, authorization, and frontend integration.

Build a node api to fetch another user's profile and their posts, accessible via a get request. Exclude passwords and populate post authors for display.

Implement the client-side profile page for other users by building a dynamic user profile component that fetches data, displays name and posts, and enables navigation from the home screen.

Develop and test a Node API to follow and unfollow users in a MERN app, updating followers and following lists on both sides, with protected routes and front-end requests.

Implement a follow user feature in React by sending an authorized network request, then update local state and storage to reflect followers and following changes.

Solve follow and unfollow issues in a MERN Instagram clone by updating state, persisting changes in local storage, and refining the UI button behavior to reflect following status.

Learn to implement dynamic follow and unfollow for the logged-in user in a MERN stack Instagram clone, updating followers and following in the profile component.

Develop a node.js api to list posts from users you follow for an instagram-like home feed, including follow/unfollow flows and profile data.

Implement client-side logic to display posts from users you follow by integrating a user posts component into a protected home screen, enabling viewing, liking, commenting, and deleting posts.

Learn how to add an optional profile picture upload at signup, manage state for follow/unfollow, and apply a default profile image when none is uploaded.

Update the profile picture by adding image uploading, gallery access, and a dedicated button; wire the UI to local storage and state dispatch for a seamless profile refresh.

Update a user's profile picture in a MERN stack Instagram clone by sending a back-end update with $set, using the user id and authorization, and syncing changes to local storage.

Deploy to Heroku for a mern stack app, choose between deploying server code or the full React with back end, configure production assets and environment variables.

Learn to implement forgot password reset by sending emails with sendgrid and nodemailer, including api key setup, transporter configuration, and generating reset links in a mern stack app.

Generate a unique reset token using crypto and store it with a one-hour expiry in the user model. Send the reset link via email to the user.

Build a front-end flow to create a new password via a reset token, verify expiry, hash the password, and save the updated password in the database through a post request.