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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.