MERN Stack Full Course: MongoDB, Express, React and Node.js

Free MERN stack course from beginner to advanced: build a Job Tracker with React, Express, MongoDB and Node.js, with source code and animations.

All levels · 40 lessons

Foundations

  1. What Is the MERN Stack? How a Web Request Travels - What MongoDB, Express, React and Node.js each do, how they fit together, and a script that follows one request from browser to database and back.
  2. Set Up Your Tools: Node.js, npm, Git, VS Code and MongoDB - Install and check everything you need for the MERN course on Windows, macOS or Linux, with a script that tells you what is missing.
  3. Modern JavaScript You Need: let, const, Arrow Functions, Destructuring and Modules - The parts of modern JavaScript used in every MERN app, explained one by one, with a tour script you can run and change.
  4. Asynchronous JavaScript: Callbacks, Promises, async/await and fetch - Why JavaScript does not wait, how promises and async/await work, how errors are caught, and how to run requests in parallel, with a script you can run.
  5. HTTP, JSON and REST: Methods, Status Codes and Routes - How HTTP requests and responses are built, what the methods and status codes mean, how REST organises an API, and a REST server written with no libraries.
  6. Plan the Project: Features, API, Data Model and Folders - Plan a full stack app before coding: features, API routes, data model and folders. The Job Tracker plan you follow for the rest of the course.
  7. Node.js Basics: Modules, Files, Paths, Events and process - What Node.js adds to JavaScript: file access, paths, events and information about the running program, with an example you can run.

Node.js and Express

  1. npm, package.json, Scripts and Environment Variables (dotenv) - Learn package.json, npm scripts, semantic versions and dotenv environment variables, and why .env stays out of Git.
  2. Your First Express Server: Routes, Parameters and Query Strings - Install Express 5, start a server, write routes for different methods, and read route parameters and query strings.
  3. Express Middleware: express.json, CORS and a Request Logger - How middleware works as a pipeline, why express.json and cors are needed, and how to write your own logger.
  4. Routers and Controllers: A Clean Express Project Structure - Split an Express app into routers and controllers so that it stays readable as it grows, using an in-memory jobs API.
  5. Validation and Error Handling in Express: HttpError and an Error Middleware - Never trust the client: check input, return helpful 400 answers with field errors, and send every failure through one error handler.
  6. Test Your API: REST Client, Postman, curl and a Smoke Script - Ways to try an API without a front end, from one-off requests to a script that checks a whole flow and prints PASS or FAIL.

MongoDB and Mongoose

  1. What Is MongoDB? Documents, Collections, Atlas and mongosh - How MongoDB stores documents in collections, how it differs from SQL, how to get a free Atlas database, and the mongosh commands to try.
  2. Connect Express to MongoDB with Mongoose - Install Mongoose, connect with a connection string from .env, start the server only after the database is ready, and show the database state in a health.
  3. Mongoose Schemas and Models: Types, Validation, Defaults and Timestamps - Describe what a Job looks like, add validation rules and defaults, hide internal fields in JSON output, and test the model without a server.
  4. CRUD with Mongoose: Create, Read, Update and Delete in Express - Replace the in-memory array with MongoDB: create, find, update and delete with Mongoose, validate ids and return friendly errors.
  5. Search, Filter, Sort and Paginate with Mongoose, and Why Indexes Matter - Build a list endpoint with text search, status filter, sorting and pages, protect it from abuse, and add indexes so it stays fast.
  6. MongoDB Aggregation: Count Jobs per Status for a Statistics Endpoint - Use an aggregation pipeline to group and count inside the database, fill in missing statuses, compute an honest percentage and avoid the route-order bug.

Authentication and Security

  1. User Registration and Password Hashing with bcrypt - Create the User model, hash passwords so they are never stored as text, validate the email, and handle duplicate accounts with a 409 answer.
  2. Login with JWT: Sign In, Issue a Token and Avoid Timing Leaks - How JSON Web Tokens work, how to sign and verify them, and how to write a login that gives the same answer for a wrong email and a wrong password.
  3. Protect Routes and Keep Users Apart: Auth Middleware and Ownership Checks - Write auth middleware, link every job to its owner, and prove that one person cannot read or change another person's jobs.
  4. Express Security Basics: helmet, Rate Limiting, NoSQL Injection and Config Checks - Add safe HTTP headers, slow down password guessing, refuse MongoDB operator objects in input, and fail at start when configuration is missing.
  5. Automated API Tests with the Built-in Node.js Test Runner - Split app from server so tests can start the app, run against a throw-away database, and check authentication, ownership, validation and pagination.

React Fundamentals

  1. React and Vite Setup: Components and JSX - Create the React app with Vite, understand how main.jsx starts it, write your first components in JSX, and set up the dev proxy to the Express API.
  2. React Props, State and Events: useState and Updating Without Mutation - Pass data with props, keep changing data in state, handle events and update state without mutation, with a status picker you can use.
  3. React Lists and Forms: Controlled Inputs, Validation and Accessible Labels - Build the job form with controlled inputs, validate before sending, show errors next to fields, and make the form usable with a keyboard and a screen reader.
  4. useEffect and Fetching Data from Your API: Loading, Errors and Cleanup - Call the Express API from React, handle loading and error states, cancel requests that are no longer needed, and write a small api() helper.
  5. React Router: Pages, Links, URL Parameters and a Shared Layout - Turn one screen into several pages with React Router 7: routes, a layout with an Outlet, NavLink, useParams and a catch-all 404 page.
  6. React Context and Custom Hooks: Sharing Auth State and Reusing Data Logic - Share the signed-in user with every component through context, extract data loading into a custom hook, and keep pages short.
  7. CRUD in React: Create, Edit and Delete Jobs Through the API - Create, edit and delete jobs through the API, with delete confirmation and an optimistic status update that rolls back on failure.

Connecting Everything

  1. Sign In and Register Pages with Protected Routes in React - Build real sign-in and registration screens, restore a session from a saved token, protect private pages, handle expired tokens, and sign out.
  2. A React Dashboard: Statistics, Filters and Pagination Stored in the URL - Show the API statistics, add search, status filter and sorting, paginate, and keep all of it in the URL so a page can be shared, bookmarked and reloaded.
  3. Responsive Styling and Accessibility: Mobile First CSS, Focus, Contrast and Dark Mode - Style the app for phones first, make it keyboard friendly, respect reduced motion and dark mode, and move focus after page changes.

Advanced Topics

  1. React Performance: memo, Debounce and Code Splitting with lazy - Stop unnecessary redraws with memo, cut requests with a debounce hook, and shrink the first download by loading pages only when needed.
  2. File Upload with Multer and React: Attach a Resume to a Job Safely - Accept PDF and Word files with multer, check size, type and file signature, store a random name, and let the owner download it.
  3. Production-Ready Express: Structured Logs, Graceful Shutdown, Compression and Indexes - Prepare the server for the real world: JSON logs without secrets, clean shutdown, a real health check, gzip, and building indexes on purpose.

Deploy and Launch

  1. Build for Production and Serve the React App from Express - Create the optimised React build, let Express serve it with correct caching, send index.html for client-side routes, and keep unknown API paths as JSON 404.
  2. Deploy a MERN App to a VPS with pm2, nginx and HTTPS (Let's Encrypt) - Put the Job Tracker on a Linux server: environment file, pm2 process manager, nginx reverse proxy, free HTTPS certificate, and a repeatable deploy script.
  3. MERN Capstone: Production Checklist, Common Mistakes and What to Build Next - A final production checklist, the mistakes that catch most beginners, and eight ideas to extend the Job Tracker with what you learned.