MERN Stack Bootcamp 2025: Build 2 Real Projects-Clean Code

Demonstrates building a modern stock photo sharing app using the MERN stack, featuring responsive front-end image cards and modals, lazy loading, and swagger-documented APIs.

Initialize a node project in a server folder, configure module type and engines, install express, morgan, dotenv, cors, and nodemon, then run a dev server on port 4000.

Learn to create and test basic routes in a MERN app by building an image router, wiring up express routes, testing with Postman, and preparing for CRUD operations.

Log in to mongodb, create a free m0 cluster, and copy the connection URI, then install mongoose, set database url in .env, and connect with mongoose.connect(process.env.DATABASE_URL).

Create a mongoose image model with a title, image URL, and public_id for Cloudinary uploads. Prepare for Cloudinary integration and CRUD operations in Node.js.

Create an image upload route that sends base64 images to Cloudinary, stores the resulting URL, public ID, and title in MongoDB, and handles parsing with body-parser.

Implement a get all images endpoint that retrieves all images with images.find, returns 200 with results or a no image found message, and handles errors with 500.

Create a put route to update an image title by id, using the request body’s new title and find by id and update to return updated image or not found.

Create a delete route for images using an id parameter, removing the image from the database and Cloudinary with the public ID, and respond image deleted successfully.

Document api endpoints with swagger by installing swagger js docs and swagger ui express, configuring open api 3.0, and serving docs at /api/docs for local and deployed apps.

Document swagger endpoints by annotating routes to list all images and upload images, detailing get and post requests, request bodies, and 200, 400, and 500 responses.

Document the delete image route in Swagger, specify id path parameter, define 200, 400, and 500 responses, and confirm image removal from Cloudinary and database for deployment.

Deploy a Node.js app with Vercel by creating vercel.json, configuring version and builds, and using Vercel CLI to deploy, verify email, manage environment variables, and test routes with Swagger docs.

Initialize the frontend by creating a client folder, installing React with the wheat bundler, using TypeScript + SWC, naming the project Image Manager, installing dependencies, and running the dev server.

Install and configure tailwind in a react application, initialize the config, apply tailwind classes in app.tsx and index.css, install react icons, and test styles with npm run dev.

Install and configure react router dom to create routes for all images and upload pages, wrap the app in a router, and define base and upload paths with simple components.

Design a reusable application layout with a navbar and outlet-driven routing using React Router, including active route highlighting and setup for image upload and back-end integration.

Improve React context type safety in a TypeScript setup by defining interfaces for app context props and value, using ReactNode, dispatch, and strict typing to remove warnings and enable autocomplete.

Create an image card component in tsx, map a ten-item array to render images, and apply responsive styling with hover effects, rounded corners, and a 16:9 aspect ratio.

Optimize image cards in a React MERN app with a lazy load image component for incremental loading, add a title and action menu, and implement image uploads to the backend.

Create an image uploader component in a React TypeScript project that lets users select an image, converts it to a base64 string, adds a title, and uploads via an API.

Implement discard buttons to clear the title and image, refresh components with a key, and post a title plus image to /upload using axios.

create a css-only loader in react by adding loader.tsx, manage loading state with useState, and conditionally render the pulsing purple loader inside the image uploader during form submission.

Fetch and render images from the backend in an image card, using axios to get data (id, title, image URL, public ID) and refresh on uploads via a trigger.

Create a reusable modal component in a React app to edit image titles and delete images, featuring an overlay, fixed positioning, and a conditional input with update and delete actions.

Open a single image modal from the image card by updating a context-stored selected image ID; close it by clearing the ID, and display the current selected ID.

Implement image title update: click to reveal a pre-populated input, update the title via put /image/:id, refresh images, and manage update and loading states with the app context.

Implement image delete by sending the selected image id to /api/image with axios, manage loading, and filter the client-side images array to remove the deleted id.

Create an image gallery modal that opens images in full screen with next and previous navigation, using an image model component and context-provided images with lazy loading.

Implement image gallery modal by managing a current index state, opening on click, and navigating next and previous with modulo bounds, styling tweaks like 90 vw width and box shadows.

Design a skeleton loader component with css animate-pulse to display placeholders while images load, using conditional rendering and type-safe context management for reliable updates.

deploy your MERN stack projects with Vercel, link the front-end and back-end to GitHub, and verify a production deployment with image upload, updates, and responsive checks.

Connect both frontend and backend apps to GitHub and link them to Vercel by creating repositories, initializing git, pushing code, and enabling automatic deployments.

Create a project folder and set up a React app with TypeScript and SWC. Install dependencies and run the dev server to launch the app on localhost 5173.

Design a component-based React application using TypeScript TSX components, including login, sign up, forget password, and home, with module CSS, lint warnings, and navigation.

Set up navigation in a react app with react-router-dom by configuring browser router and routes, rendering login, signup, forget password, and a protected home route.

Guard the home route with an auth middleware that redirects unauthenticated users. Leverage a protected route, outlet rendering, and a wild route for not found pages.

Design and style a signup component using module CSS in the sign up route, building a responsive form container with username, email, and password fields, and a sign up button.

Learn to build a signup form by binding inputs to a useState object, adding an onChange handler, and immutably updating username, email, and password fields.

Learn to secure a signup form with client-side validation using regex, including email and password rules, and integrate toast notifications for user feedback.

Learn to implement toaster-based validations using React Hot Toast; validate email, username, and password with regex, show error toasts for invalid fields and a success toast on submit.

Add a show/hide password button by wrapping the password input in a div, styling with relative/absolute positioning, and toggling visibility with a useState hook in the signup form.

Design and implement the login form by adapting the signup tsx, removing the username input, adding login handling, forget password, validations, and styling enhancements, with social login placeholders.

Set up the backend by creating a server folder, initializing npm, and installing express, cors, Morgan, and dotenv, then start an express app on port 5000.

Create a test route in a Node.js app that returns JSON, test it with postman on port 6000, and enable nodemon for automatic restarts during development.

Connect your Node.js app to MongoDB with mongoose, deploy a MongoDB deployment, and load the connection URL from an environment variable, ensuring the database connects before the server starts.

Define a mongoose user model in a Node.js app to store username, unique email, password, and isVerified, plus otp verification tokens with expiry, and export the model for routes.

Develop and wire up user routes and controller in a MERN stack app to accept signup or login data, validate and save to the back end, and test via Postman.

Design user routes for signup and login forms, implement asynchronous controllers for database calls, enable express.json to parse request bodies, and test with postman.

Design a signup flow that posts user data to a backend on port 3000 via axios, hashes passwords with bcrypt, and saves verified users with a token in MongoDB.

Learn to send a verification email on user signup with node mailer, configure a Gmail transport, and verify the token to set the user's verification status to true.

Verify users by handling verification tokens via a dedicated route, check token validity and that the token has not expired, and update the is verified flag in the database.

Implement a token-based account verification flow in a MERN app: regenerate expired tokens, send html emails with a resend button, and issue new verification links.

the lecture builds a login route, wires the front end to post credentials, validates the user with bcrypt, generates a jwt token, and shows toast messages for success or errors.

Generate and sign a json web token on login, using the user id as payload, then send the token to front end to authorize updates to username, password, or email.

Learn to handle JWT in a React frontend by obtaining and storing the token in localStorage, decoding expiry with jwt-decode, and guarding routes with a login check.

Create a JWT authentication middleware in Node.js to verify tokens sent from the front end, extract decoded data, and protect the update user route with bearer token verification.

Integrate Google login by adding a Google login button and wrapping the app with GoogleAuthProvider, using a client ID to fetch user data via token for login or account creation.

Implement Google login flow by constructing a user payload from Google data, calling the login API, auto-generating and hashing a password for new users, and issuing a login token.

Configure Facebook login with the React.js social login library, using your app ID from the developer console, update the environment with the Facebook client ID, handle on resolve or reject.

Design a three-step forget password flow with email input, OTP entry, and new password components, using useState for step-based rendering and modular CSS for styling.

Build a forgot password flow with email verification and OTP, wiring backend routes to generate and verify OTPs and reset passwords, plus front-end steps for email and OTP entry.

Shows how to implement forgot password OTP verify in a MERN app by adding a verify password OTP route, validating OTP from the request body, and handling expiry.

Implement a forgot password flow with otp verification and reset password route, validate and hash the new password with bcrypt, and email the user on success.

Learn to handle expired otp tokens in a forget password flow by resending a new otp, retrying verification, and restoring user to login with route and ui tweaks.

Design a dashboard on the home page with a logout button that clears local storage, navigates to login, and greets the user, alongside a two-card user details and update section.

This lecture guides building and styling the home component UI with an edit container, two cards, inputs with placeholders, shadows, borders, a password visibility toggle, and backend data retrieval.

Fetches the authenticated user's details (username and email) via a get user API guarded by JWT auth, and displays the data on the home page using React and axios.

Enable editing of user details on the home component by adding an edit button, wrapping inputs, and managing state to toggle edit mode with save and cancel options.

Create an edit workflow in the home component with per-field edit states, toggle inputs, and show save and cancel, binding fields to a new user data state for API calls.

Validate username, email, and password, then call a protected update user API via axios put, sending the token from local storage, and reflect changes on the frontend and backend.

Decode the data sent from the front end to extract the user id from the token, locate the user, and update username, email, or password with bcrypt hashing.

Learn to implement loaders in a MERN app by building a reusable loader component and wiring an isLoading state to API calls across login, signup, and password flows.

Improve the login and signup UI with spaced flex layouts and borders, and implement subtle animations using framer motion, including motion divs and initial, hover, and exit transitions.

Push your MERN app to GitHub and deploy it, updating environment variables and server URLs, adjusting routes like /user/register, and pushing to master with git commands.

Deploy a MERN app using render.com by connecting a GitHub repo, configuring a node server, setting env vars, and publishing both backend and frontend with redirects and route testing.

Enable Facebook and Google login by configuring the meta app and credentials for the deployed URL, then deploy and test. Build a complete React and Node.js JWT-based authentication system.

Wrap up the project and reinforce what you learned. Encourage students to apply technologies to their own projects, build from scratch, and add new features for a bigger project.