MERN Stack Project Course - Build a Real Time Messaging App

Develop a user schema with email, username, password, and a default profile picture using Mongoose, enforcing required fields, unique email, minimum password length, and timestamps for created and updated records.

Explore auth controllers in a MERN app by organizing sign up, login, and logout functions, exporting and importing them, and wiring root get requests toward MongoDB connectivity.

Set up a MongoDB cluster and user, configure IP access, and obtain the connection string. Then connect your Node.js app with mongoose using dotenv and an environment port.

Implement a token generator in the auth controller to create and save new users from the request body, then test the sign‑up post route with postman using json data.

Handle the update profile API by validating and uploading the profile picture to Cloudinary, then updating the user record and returning 400 when missing and 200 with the updated user.

Build a Mongoose message model for user-to-user chats with sender and receiver references, supporting text or image content, exporting the model and exposing routes via api/message.

Configure the messages controller to fetch sidebar contacts (excluding the logged-in user) and retrieve messages between two users via a get messages route, with proper middleware in the MERN setup.

Explore how json web tokens authenticate users by signing payloads, issuing tokens on login, enforcing expiry, and securing cookies with httpOnly and sameSite.

Implements an async send messages controller that handles text or image payloads, uploads images to Cloudinary, saves new messages, and returns a 201 response with auth-checked routing.

Install react router dom, set up a browser router, and create routes for home, sign up, login, and profile pages with a navbar.

Set up Zustand auth store. Configure an axios instance with a localhost base URL and credentials, linking frontend and backend via a course middleware for the MERN app.

Set up react-hot-toast in the app to display login and signup messages, using toast error and toast success for authentication feedback.

builds a signup page with React useState managing username, email, and password as controlled inputs, handles onChange updates, and uses preventDefault on submit with error.message.

Implement client-side credential validation with React Hot Toast errors for missing username, email, and password, enforce email format and six-character minimum, then call the auth store signup when valid.

Implement login functionality with an axios post to /auth/login, manage email and password with useState, handle submit, and show toast notifications on success or failure.

Implement logout functionality in a MERN stack messaging app by routing to home, login, and signup pages with react router dom and updating the auth store with toast feedback.

Reorganize the logged user data from the author store, pass user data in the auth controller, display profile information, and outline updating the profile picture with a Postman upload workaround.

Update the profile picture by wiring the user's data to the profile form, handling image uploads, and posting updates to the auth/update-profile endpoint with a success toast.

Learn to test profile image uploads in a MERN stack app, switch route handling from post to put, implement the course policy, and debug update profile in front-end and back-end.

Build the chat store.js to fetch users via the axios instance and show success or error toasts. Prepare the sidebar component on the home page for future integration.

Build and connect a real-time chat interface by creating chat container, header, messages, and input components, fetch users with useEffect, and display profile pictures and usernames from the chat store.

Implement the messages container and no chat selected UI for the MERN stack messaging app, add style files, import icons, and set up conditional rendering via the chat store.