Full Stack Developer (MERN)

Build interactive pages with HTML, CSS and plain JavaScript, and track every change in Git.

• How the Web Works

  Core

  Every MERN app is a browser talking to a server over HTTP, so this model explains most bugs you will meet later.

  • Clients, servers and URLs
  • HTTP requests and responses
  • Methods, status codes, headers
  • DNS and domains, briefly
  • Browser DevTools Network tab
  • MDN: Overview of HTTP

• HTML and CSS Essentials

  Core

  React renders HTML and styles it with CSS, so solid basics here make every component easier to build and fix.

  • Semantic elements and forms
  • The box model and cascade
  • Flexbox and grid layouts
  • Responsive design with media queries
  • Accessible labels and alt text
  • MDN: Structuring content with HTML
  • MDN: CSS layout

• Modern JavaScript

  Core

  JavaScript runs every layer of MERN, from React components to Express routes, so depth here pays off four times.

  • let, const and scope
  • Functions, closures and this
  • Arrays and objects in depth
  • Destructuring, spread and rest
  • Classes and prototypes, briefly
  • Errors with try and catch
  • MDN: JavaScript Guide

• Async JavaScript and Fetch

  Core

  Database calls, API requests and file reads are all asynchronous, so promises and async/await are daily tools.

  • Callbacks and the event loop
  • Promises and chaining
  • async and await
  • fetch with JSON bodies
  • Handling loading and errors
  • MDN: Using promises
  • MDN: Using the Fetch API

• The DOM and Events

  Core

  Changing the page by hand once shows you exactly what React automates for you later.

  • Selecting and updating elements
  • Event listeners and delegation
  • Form submit and input events
  • localStorage for simple saving
  • MDN: Document Object Model

• Modules and npm

  Core

  Both the React app and the Node server are built from modules and npm packages.

  • import and export syntax
  • package.json and scripts
  • Dependencies vs devDependencies
  • Lockfiles and semantic versioning
  • MDN: JavaScript modules
  • npm docs: About npm

• Git and GitHub

  Core

  Version control is how every team ships code, and your GitHub history is part of your portfolio.

  • Commits, branches and merges
  • Remotes, push and pull
  • Pull requests and reviews
  • Resolving merge conflicts
  • Useful .gitignore files
  • Pro Git book
  • GitHub docs: Hello World

Build a multi-page React 19 app with routing, forms and server data, styled with Tailwind CSS.

• Vite and Project Setup

  Core

  Vite gives the MERN client a fast dev server and build, and it is the usual starting point for a React SPA.

  • Create a React app with Vite
  • Project structure and entry point
  • Dev server and hot reload
  • Environment variables in Vite
  • ESLint and Prettier setup
  • Vite guide
  • React docs: Build a React app from scratch

• Components, JSX and Props

  Core

  Components are the unit of every React screen, so thinking in small, reusable pieces comes first.

  • JSX rules and expressions
  • Passing and reading props
  • Rendering lists with keys
  • Conditional rendering
  • Composition with children
  • React docs: Describing the UI

• State and Hooks

  Core

  State is what makes a React app interactive, and hooks are how components hold and share it.

  • useState and updater functions
  • Lifting state up
  • useReducer for complex state
  • useContext for shared values
  • useRef for DOM and values
  • Custom hooks for reuse
  • React docs: Managing state
  • React docs: Built-in hooks

• Effects and Data Loading

  Core

  Effects connect components to the outside world, and knowing when not to use one avoids most React bugs.

  • useEffect and cleanup
  • Dependency arrays explained
  • Fetching data safely
  • Avoiding race conditions
  • Knowing when to skip effects
  • React docs: Synchronizing with effects
  • React docs: You might not need an effect

• Routing with React Router

  Core

  A MERN client is usually a single-page app, and React Router gives it real URLs, layouts and navigation.

  • Routes and nested layouts
  • Links and programmatic navigation
  • URL params and search params
  • Not found and error routes
  • Protected route wrappers
  • React Router docs

• Forms and Validation

  Core

  Sign-up, login and create forms are where users meet your API, so they need clear validation and errors.

  • Controlled and uncontrolled inputs
  • Form Actions in React 19
  • Client-side validation with Zod
  • Showing field-level errors
  • Disabling while submitting
  • React docs: form
  • Zod docs

• Styling with Tailwind CSS

  Recommended

  Tailwind CSS v4 is the common way to style React apps quickly while keeping a consistent design.

  • Utility classes and variants
  • Responsive and dark mode styles
  • Theme tokens with @theme
  • Extracting reusable components
  • Tailwind CSS: Install with Vite

• Server State with TanStack Query

  Recommended

  Data from your Express API needs caching, refetching and loading states, which TanStack Query handles for you.

  • Queries and query keys
  • Mutations and invalidation
  • Loading and error states
  • Optimistic updates
  • Pagination and infinite lists
  • TanStack Query docs

Build a REST API with Node.js 24 LTS and Express 5 that validates input, handles errors and returns consistent JSON.

• The Node.js Runtime

  Core

  Node runs your MERN backend, so knowing how it schedules work explains slow endpoints and stuck servers.

  • What Node is and is not
  • The event loop in practice
  • Blocking vs non-blocking code
  • Running files and the REPL
  • Watch mode for development
  • Node.js: Introduction
  • Node.js: The event loop

• Core Modules and Config

  Core

  Reading files, paths and environment variables is part of almost every server you will write.

  • fs and path modules
  • Environment variables and .env
  • process.argv and exit codes
  • Streams for large files
  • Node.js: File system API
  • Node.js: Environment variables

• Express Routing and Middleware

  Core

  Express is the E in MERN: routes map URLs to handlers and middleware runs shared logic around them.

  • Routes, params and query strings
  • Routers for feature modules
  • Built-in JSON body parsing
  • Writing custom middleware
  • Middleware order matters
  • Express guide: Routing
  • Express guide: Using middleware

• REST API Design

  Core

  A predictable API makes the React side simple, so design resources and responses before writing handlers.

  • Resource-based URLs
  • Correct methods and status codes
  • Consistent JSON error shape
  • Pagination, sorting and filters
  • Versioning basics
  • MDN: HTTP request methods
  • MDN: HTTP status codes

• Error Handling

  Core

  One central error handler keeps crashes out of production and gives the client useful messages.

  • Error-handling middleware
  • Async errors in Express 5
  • Custom error classes
  • Never leak stack traces
  • Express guide: Error handling

• Validating Input with Zod

  Core

  Never trust the client: validating every body, param and query stops bad data before it reaches MongoDB.

  • Schemas for bodies and params
  • A reusable validate middleware
  • Readable validation errors
  • Inferring types from schemas
  • Zod docs

• API Docs and Tooling

  Recommended

  Documented, testable endpoints make it easier for you and any teammate to build the frontend against them.

  • Testing with an HTTP client
  • OpenAPI spec basics
  • Generated interactive docs
  • Request logging in development
  • OpenAPI Specification

Model real data in MongoDB, query it efficiently with Mongoose and keep it consistent as the app grows.

• Documents and CRUD

  Core

  MongoDB stores JSON-like documents, which map naturally to the objects your Express API already sends.

  • Databases, collections, documents
  • BSON types and ObjectId
  • Insert, find, update, delete
  • Query and update operators
  • Using mongosh and Compass
  • MongoDB docs: CRUD operations

• MongoDB Atlas and Local Setup

  Core

  Atlas is the managed cloud database most MERN apps use in production, with a free tier for learning.

  • Create a free Atlas cluster
  • Database users and network access
  • Connection strings and secrets
  • Local MongoDB for development
  • MongoDB Atlas docs

• Schema Design: Embed or Reference

  Core

  Good MongoDB design follows how the app reads data, and this choice shapes performance more than anything else.

  • Embedding related data
  • Referencing with ObjectIds
  • One-to-many and many-to-many
  • Avoiding unbounded arrays
  • Designing for your queries
  • MongoDB docs: Data modeling

• Mongoose Schemas and Models

  Core

  Mongoose adds schemas, validation and helpers on top of MongoDB, and it is the standard ODM in MERN apps.

  • Connecting with Mongoose
  • Schemas, types and defaults
  • Built-in and custom validators
  • Timestamps and virtuals
  • Middleware hooks like pre save
  • lean() for read-heavy queries
  • Mongoose docs: Schemas
  • Mongoose docs: Validation

• Relationships and Populate

  Core

  Most apps link users, posts and comments, and populate is how Mongoose joins referenced documents.

  • ref and populate
  • Selecting only needed fields
  • Nested populate, sparingly
  • When to denormalize instead
  • Mongoose docs: Populate

• Indexes and Query Performance

  Core

  Without the right indexes every query scans the whole collection, which gets slow long before you have many users.

  • Single field and compound indexes
  • Unique indexes for emails
  • Reading explain() output
  • Index order and sort
  • Text indexes for simple search
  • MongoDB docs: Indexes
  • MongoDB docs: Explain results

• Aggregation Pipeline

  Core

  Dashboards and reports need grouping and totals, which the aggregation pipeline computes inside the database.

  • $match, $group and $sort
  • $project and computed fields
  • $lookup for joins
  • Pagination with $skip and $limit
  • MongoDB docs: Aggregation

• Transactions and Consistency

  Recommended

  When one action must update several documents together, such as an order and its stock, you need a transaction.

  • Single-document atomicity
  • Multi-document transactions
  • Sessions in Mongoose
  • Keeping transactions short
  • MongoDB docs: Transactions

Add secure sign-up, login and role-based access that work end to end from React to Express to MongoDB.

• Passwords and Hashing

  Core

  Storing passwords safely is the first rule of auth, and a leak without hashing is a disaster.

  • Why never store plain passwords
  • Hashing with bcrypt or argon2
  • Salts and work factors
  • Password reset flows
  • OWASP: Password storage

• JWT Access and Refresh Tokens

  Core

  Short-lived access tokens with rotating refresh tokens are the common MERN pattern for staying logged in safely.

  • What a JWT contains
  • Signing and verifying tokens
  • Short access token lifetimes
  • Refresh token rotation
  • Detecting refresh token reuse
  • Logout and token revocation
  • JWT introduction
  • OWASP: Session management

• Cookies, CORS and CSRF

  Core

  A React app on one origin calling an API on another needs correct cookie and CORS settings to work at all.

  • httpOnly, Secure, SameSite cookies
  • CORS with credentials
  • Why tokens stay out of localStorage
  • CSRF risks and defenses
  • MDN: HTTP cookies
  • MDN: CORS

• Roles and Permissions

  Core

  Authentication says who someone is; authorization decides what they may do, and it must be checked on the server.

  • Auth middleware for Express
  • Role-based access control
  • Ownership checks per record
  • Hiding UI the user cannot use
  • OWASP: Authorization

• Auth on the React Side

  Core

  The client needs to know who is logged in, refresh quietly and redirect cleanly without ever holding secrets.

  • An auth context or store
  • Silent refresh on 401 responses
  • Protected and public routes
  • Handling expired sessions

• Hardening the API

  Core

  A few standard defenses close the holes attackers try first on any Express app.

  • Security headers with helmet
  • Rate limiting login routes
  • Blocking NoSQL injection
  • Limiting request body size
  • Keeping dependencies patched
  • Express: Security best practices
  • OWASP Top 10

• Social Login with OAuth

  Recommended

  Sign in with Google or GitHub is expected in many products and uses the OAuth 2.0 authorization code flow.

  • Authorization code flow with PKCE
  • Linking OAuth to local accounts
  • Storing provider ids safely
  • OAuth 2.0

• File Uploads

  Recommended

  Avatars and attachments are common features, and files belong in object storage, not in MongoDB.

  • multipart/form-data with Multer
  • Validating type and size
  • Uploading to S3 or Cloudinary
  • Presigned URLs for direct uploads
  • Multer on GitHub
  • AWS docs: Presigned URLs

Share types between client and server and prove the important paths work with automated tests.

• TypeScript Fundamentals

  Core

  Most MERN job posts now expect TypeScript, and types catch the mismatches between client and server early.

  • Types, interfaces and unions
  • Narrowing and type guards
  • Generics in practice
  • Strict mode settings
  • TypeScript handbook

• TypeScript with React

  Core

  Typed props, state and events make React components safer to change and easier to reuse.

  • Typing props and children
  • Typing state and reducers
  • Event and ref types
  • Typing API responses
  • React docs: Using TypeScript

• TypeScript on the Server

  Core

  A typed Express API with typed Mongoose models removes a whole class of runtime bugs.

  • Running TypeScript in Node
  • Typing requests and responses
  • Typed Mongoose models
  • tsc --noEmit in CI
  • Node.js: Running TypeScript natively

• Shared Types and a Monorepo

  Recommended

  Keeping client, server and shared code in one repo lets both sides use the same Zod schemas and types.

  • npm workspaces layout
  • A shared package for schemas
  • z.infer for request types
  • One lint and format setup
  • npm docs: Workspaces

• API Tests with Vitest and Supertest

  Core

  Integration tests against a real test database prove your routes, auth and validation work together.

  • Test runner basics with Vitest
  • HTTP tests with Supertest
  • In-memory MongoDB for tests
  • Testing auth and permissions
  • Resetting data between tests
  • Vitest guide
  • Supertest on GitHub

• Component Tests

  Recommended

  Testing components the way a user sees them catches broken forms and flows without brittle details.

  • React Testing Library queries
  • Simulating user events
  • Mocking API calls
  • Testing loading and errors
  • React Testing Library

• End-to-End Tests with Playwright

  Recommended

  A few browser tests of the critical journeys, such as sign-up and checkout, guard the whole stack at once.

  • Writing a first Playwright test
  • Locators and assertions
  • Logging in once per suite
  • Running tests in CI
  • Playwright docs

Add the features real products need: live updates, caching, background jobs, email and payments.

• Real-Time with Socket.IO

  Core

  Chat, notifications and live boards push updates from the server, and Socket.IO is the usual MERN choice.

  • WebSockets vs polling vs SSE
  • Socket.IO server and client
  • Rooms for teams or chats
  • Authenticating socket connections
  • Scaling with a Redis adapter
  • MDN: WebSockets API
  • MDN: Server-sent events

• Caching with Redis

  Recommended

  Caching expensive reads in Redis takes load off MongoDB and makes busy pages feel instant.

  • Keys, TTLs and data types
  • Cache-aside pattern
  • Invalidating on writes
  • Rate limit counters in Redis
  • Redis docs: Develop with Redis

• Background Jobs with BullMQ

  Recommended

  Emails, image processing and bulk sends should not block a request, so they run as queued jobs.

  • Queues, workers and jobs
  • Retries with backoff
  • Scheduled and repeatable jobs
  • Idempotent job handlers
  • BullMQ docs

• Transactional Email

  Recommended

  Verification, password reset and invite emails are part of nearly every product.

  • Nodemailer or an email API
  • Email verification links
  • Templates for common emails
  • Sending through a queue
  • Nodemailer docs

• Payments with Stripe

  Optional

  Taking payments safely means letting Stripe hold card data and trusting only verified webhooks.

  • Checkout sessions
  • Verifying webhook signatures
  • Recording orders in MongoDB
  • Test mode and test cards
  • Stripe docs: Checkout
  • Stripe docs: Webhooks

• Search, Filters and Pagination

  Core

  Lists grow fast, so users need fast search and paging that stays quick on large collections.

  • Offset vs cursor pagination
  • Filter and sort query params
  • Atlas Search for full text
  • Debounced search inputs in React
  • MongoDB docs: Atlas Search

• Frontend Performance

  Recommended

  A fast first load and smooth interactions matter as much as the API, and they are measured by Core Web Vitals.

  • Code splitting with lazy
  • Optimizing images
  • Avoiding needless re-renders
  • Measuring Core Web Vitals
  • React docs: lazy
  • web.dev: Web Vitals

Ship the MERN app to production with Docker, HTTPS and automated deploys, and keep it healthy.

• Environments and Secrets

  Core

  Development, staging and production need different settings, and secrets must never land in Git.

  • Config through environment variables
  • Separate dev and prod databases
  • Secrets in your host or CI
  • Validating config at startup
  • The Twelve-Factor App: Config

• Production Builds

  Core

  Production builds of the client and server behave differently from dev, so you need to know what changes.

  • vite build and previews
  • NODE_ENV and production mode
  • Compression and caching headers
  • Serving the client from a CDN
  • Vite: Building for production
  • Express: Performance best practices

• Docker for MERN

  Core

  Containers make the API run the same on your laptop and the server, and Compose runs the whole stack locally.

  • Writing a Dockerfile for Node
  • Multi-stage builds
  • Compose for API, Mongo, Redis
  • Volumes and networks
  • Docker: Get started
  • Docker Compose docs

• Nginx, Domains and HTTPS

  Recommended

  A reverse proxy with free TLS certificates is how a self-hosted API is served safely on a real domain.

  • Nginx as a reverse proxy
  • Pointing a domain with DNS
  • Free certificates with Let's Encrypt
  • Proxying WebSocket connections
  • nginx: Beginner's guide
  • Let's Encrypt: Getting started

• Choosing Where to Host

  Core

  Knowing the trade-offs between a VPS and managed platforms lets you pick the right home for each part.

  • Static hosts for the React build
  • Managed platforms for the API
  • A VPS or EC2 for control
  • Atlas for the database
  • AWS docs: What is Amazon EC2

• CI/CD with GitHub Actions

  Core

  Automated checks and deploys on every merge stop broken code from reaching users.

  • Workflow files and triggers
  • Lint, type-check and test jobs
  • Building and pushing images
  • Deploying on merge to main
  • GitHub Actions quickstart

• Logs, Health Checks and Monitoring

  Core

  Once real users arrive you need to see errors and slowdowns before they report them.

  • Structured logs with pino
  • Health check endpoints
  • Error tracking for client and server
  • Uptime alerts
  • Database backups and restores
  • Pino docs