MERN Auth: Full-Stack MERN App Mastery

Learn to add routes and create pages in a react app using react-router-dom, including home, about, sign in, sign up, and a protected profile page.

Create a reusable header component in a MERN app by building a header.tsx, importing it into App.jsx, and sharing it across pages with responsive layout using flex and tailwind utilities.

Create and run the backend server for the MERN app using node and Express. Set up a root package.json and an API folder with index.js on port 3000.

Connect to the MongoDB database with mongoose, set up a free MongoDB uri, and hide credentials using dotenv and a .env file, validating the connection with console feedback.

Create a user model by defining a mongoose schema with username, email, and password, enforcing required and unique constraints and automatic timestamps, and export the default User model.

Create your first api route in index.js with app.get and a json response, test at localhost:3000, then move logic into routes and controllers for a clean, scalable backend.

Create a dedicated sign up API route for authentication, parsing request bodies, validating input, hashing passwords with bcryptjs, saving new users to MongoDB, and handling errors.

Learn to implement an error handling middleware and a custom error generator in a MERN app, using next, status codes, and a reusable error handler utility for robust API responses.

Create a complete sign up page UI for a MERN app using React and MongoDB, featuring a centered form with username, email, password, and sign in link.

Implement sign up page functionality by connecting form data to backend via fetch, managing state with formData, loading, and error indicators, and validating signup responses.

Create sign in api route with post request to verify email and password via the user model and bcrypt, then issue a jwt and store it in an httpOnly cookie.

Build the sign in page for a MERN auth app by connecting the front end to the back end, handling form submission, and using Redux Toolkit for global user state.

Configure redux toolkit in a MERN app by creating a store, a user slice, and a provider; manage sign-in with actions and dispatch, using useSelector for state.

Learn to integrate redux persist with redux toolkit to persist user data in local storage, wrap the app with PersistGate, configure a persisted root reducer, and test persistence across refreshes.

Add OAuth with Google authentication to sign in and sign up pages via a reusable OAuth component. Integrate Firebase authentication and Redux Toolkit to manage user data and avatars.

Update the header to show the current user's avatar and implement a private route for the profile page that redirects unauthenticated users to sign in.

Create a complete profile page UI for a MERN app, displaying the current user's profile picture, editable username and email, password field, and update, delete, or sign out actions.

Implement a click-to-upload profile image by triggering a hidden file input, restricting to images, uploading to Firebase storage, tracking progress, and updating the avatar with the download url.

Create a secure update user API route in a MERN app by verifying JWT from an access token cookie, authorizing the owner, hashing passwords if provided, and updating allowed fields.

Complete the client-side update user flow by connecting the profile form to the API and navigating home. Implement onChange, submit handlers, and redux actions for update start, success, and failure.

Demonstrates adding delete account functionality in a MERN app by creating a protected backend delete route and controller, updating redux state, and invoking a delete request to remove the user.

Add a backend sign out route that clears the access token cookie and update the frontend profile and redux toolkit slice to reset the current user on success.

Build the home and about pages for the MERN authentication app with Visual Studio Code live updates, apply responsive styling, and commit changes to GitHub.

deploy a full-stack mern app to render by building the client, serving the dist with express, and configuring environment variables for mongo, jwt, and firebase authentication.