The learning journey
Eight topics, one path, front to back
The journey starts with writing your first HTML and ends with a working full-stack application where React talks to Express and Express talks to MongoDB. Every topic has interactive lessons on PurpleLane LMS, ends with a quiz.
1
1Introduction to MERNWeek 1
What the MERN stack is and why it is used for modern web applications. A map of MongoDB, Express, React, and Node.js and how the four layers connect into one system.
MongoDBExpressReactNode.js
After this topicParticipants can describe what the MERN stack is and explain what each layer does.
2
2HTML & CSS BasicsWeek 1
How browsers read and style a web page. Elements, attributes, the box model, colors, fonts, and flexbox layout. Participants build a Student Registration Form in HTML and progressively style it across two CSS tasks.
HTML5CSS3FlexboxBox Model
After this topicParticipants can build a structured HTML form and style it with colors, fonts, and flexbox layout.
3
3JavaScript Fundamentals & Async ProgrammingWeek 1
Core JavaScript (variables, functions, DOM events, callbacks, higher-order functions) and async programming (Promises, Fetch API, async/await). Five tasks build from DOM manipulation to live API data.
JavaScriptFetch APIPromisesAsync/AwaitDOM Events
After this topicParticipants can handle DOM events, manipulate the page dynamically, and fetch live data from an external API.
4
4React & Material UIWeek 1
React components, props, state, and the component-driven way of thinking about a UI. Material UI for rapid, professional layouts. Participants rebuild the Counter App and the Student Registration Form in React.
ReactMaterial UIComponentsState
After this topicParticipants can build a React application with reusable components and a Material UI interface.
5
5MongoDBWeek 2
Document databases, collections, and CRUD queries. How to model application data. MongoDB is installed and queried against the Student Registration data built in Week 1.
MongoDBCRUDCollectionsDocuments
After this topicParticipants can install MongoDB, write queries, and store and retrieve structured data.
6
6Express JSWeek 2
Setting up a Node server, defining routes, middleware, and controllers. Connecting Express to MongoDB. Two tasks build the full REST API backend for the Student Registration form.
ExpressNode.jsREST APIsPostman
After this topicParticipants can build REST API endpoints, connect them to MongoDB, and test them with Postman.
7
7Full-Stack IntegrationWeek 2
Connecting the React frontend to the Express backend: API calls from React, CORS configuration, environment variables, and end-to-end form submission. The Student Registration application is complete and fully working at the end of this task.
ReactExpressMongoDBCORSFetch API
After this topicParticipants have a working full-stack MERN application: React front end connected to an Express API backed by MongoDB.
8
8Group Project: End-to-End MERN ApplicationWeek 2
Teams of 3–4 build a complete MERN application from scratch. The project must include all four CRUD operations (Create, Read, Update, Delete) connected end-to-end: a React frontend, an Express REST API, and a MongoDB database. Teams choose their own domain -- student records, inventory, task tracker, or similar. The final day is a live demo.
ReactExpressMongoDBCRUDREST APITeam Project
After this topicEach team has a working full-stack MERN application with complete CRUD, presented live on the final day of the workshop.
+
Optional Module · Week 3: Authentication & Authorization
One additional week available for teams that want to add secure login, session management, and role-based access control to the application built in Weeks 1 and 2. This week is self-contained and can be added at any time after the core two weeks are complete.
+
+Authentication & AuthorizationOptional Week 3
How login, sessions, and access control work in a MERN application. JSON Web Tokens, password hashing with bcrypt, protected routes, and role-based permissions. Participants add a login system to their existing Student Registration application.
JWTbcryptProtected RoutesRolesGoogle OAuth
After this moduleParticipants can implement secure login with JWT, hash passwords, protect API routes, and restrict access by role.
Week-by-Week Plan
Week 1
MERN Foundations: The Frontend
Topics 1–4
Topic 1Introduction to MERNConcepts
MongoDBExpressReactNode.js
What is MERN and why use it?
The four layers of a modern web application and how they interact. An overview of the project participants will build across the two weeks.
Concept
Topics 2 & 3HTML & CSS BasicsConcepts + 2 Tasks
HTML5CSS3FlexboxVS Code
HTML: structure of a web page
Elements, attributes, semantic tags, and forms. Participants build the full structure of a Student Registration Form.
ConceptTask
CSS: selectors, box model, layout
Colors, fonts, and flexbox. Two tasks progressively style the registration form built in the HTML topic.
Concept
Task 1 · Colors and buttons
Apply background colors and style the submit button on the registration form.
Task
Task 2 · Layout and fonts
Align form elements with flexbox and apply consistent font styles across the page.
Task
Topic 4JavaScript Fundamentals & Async ProgrammingConcepts + 5 Tasks
JavaScriptFetch APIPromisesAsync/Await
Core: variables, functions, DOM events
How JavaScript handles user actions. Higher-order functions, addEventListener, and removeEventListener.
Concept
Async: Promises, Fetch, async/await
How JavaScript handles operations that take time. The two-await fetch pattern. Error handling with try/catch.
Concept
Task 1 & 2 · Random color + Stop button
Change the page background color on click. Add a stop button using setInterval and clearInterval.
Task
Task 3 · Live submission list
On form submit, render the data as a live list on the page without a page reload.
Task
Task 4 · Counter app
A counter with increment, decrement, and reset buttons. Introduces the event → state → DOM pattern.
Task
Task 5 · Live weather via Fetch API
Fetch live weather data from Open-Meteo (no API key required) using async/await and display it on the page.
TaskAPI
Topic 5React & Material UIConcepts + 2 Tasks
ReactMaterial UIComponentsState
React components and state
What a component is, how props and state work, and the component-driven way of thinking about a UI.
Concept
Material UI component library
Ready-made, accessible React components. How to pick and combine them to build professional layouts quickly.
Tool
Task 1 · Counter app in React
Rebuild the counter web app as a proper React component with useState hook.
Task
Task 2 · Registration form in React + MUI
Redesign the Student Registration frontend using React components and Material UI form elements.
Task
Topic quizzes on PurpleLane LMS for all Topics 1–5
Week 2
MERN Foundations: The Backend
Topics 6–8
Topic 6MongoDBConcepts + Setup
MongoDBMongoDB ShellCRUDMongoose
Document databases and collections
How MongoDB stores data as JSON-like documents rather than rows and tables. Installing MongoDB, writing queries, and modeling the student registration data from Week 1.
SetupQueries
Topic 7Express JSConcepts + 2 Tasks
ExpressNode.jsRESTPostman
Routes, middleware, and controllers
How Express receives HTTP requests, passes them through middleware, and routes them to handler functions.
Concept
Task 1 · Backend and database
Connect the Express server to MongoDB and verify data retrieval with Postman.
Task
Task 2 · REST API for student data
Build the controllers and endpoints to create, read, update, and delete student records.
Task
Topic 7Full-Stack IntegrationTask
ReactExpressMongoDBCORSFetch API
Task 3 · Full-stack Student Registration
Connect the React frontend to the Express API: fetch calls from React, CORS configuration, environment variables, and end-to-end form submission. The application is fully working by the end of this task.
TaskFull-Stack
CapstoneGroup Project: End-to-End MERN ApplicationLast 2 days
ReactExpressMongoDBCRUDREST APITeam Project
Teams of 3–4 participants. Each team chooses their own domain and builds a complete application from scratch.
Design and plan
Teams agree on a domain (student records, inventory, task tracker, or similar), draw the data model, and plan the four CRUD endpoints and the React screens needed.
Team
Build: backend API
Set up Express routes and controllers for Create, Read, Update, and Delete. Connect to MongoDB. Test each endpoint before moving to the frontend.
TaskAPI
Build: React frontend
Build the React screens that call each API endpoint. The UI must support creating a new record, listing all records, editing an existing record, and deleting a record.
TaskFull-Stack
Live demo
Each team presents their working application on the final day: a live walkthrough of all four CRUD operations and a brief explanation of the architecture chosen.
Demo
Topic quizzes on PurpleLane LMS for Topics 6–8
Task check-ins · working full-stack application
Group project live demo on final day
Optional Week 3
Authentication & Authorization
Add-on module
This week is a standalone add-on. It builds directly on the full-stack application from Weeks 1 and 2 and can be delivered immediately after or at a later date.
Auth 1–3How Authentication WorksConcepts
JWTbcryptSessionsTokens
Authentication vs Authorization
What authentication (proving who you are) and authorization (deciding what you can do) mean and where each check happens in a MERN application.
Concept
Sessions and tokens (JWT)
How a server remembers a logged-in user across requests. Stateful sessions vs stateless JWT. Signing, verifying, and expiring tokens.
Concept
Roles and permissions
How to restrict actions by role. Middleware that checks the token, extracts the role, and returns 403 if the user is not permitted.
Concept
Auth 4–6Building the Login System3 Tasks
bcryptJWTProtected RoutesGoogle OAuth
Task 1 · Register and login API
Add a User model, hash passwords with bcrypt, build register and login endpoints, and return a signed JWT on successful login.
Task
Task 2 · Protected routes + roles
Write an auth middleware that verifies the JWT on each request. Protect the student data endpoints. Restrict admin actions to the admin role.
Task
Task 3 · Google OAuth login
Add a Sign in with Google button to the React frontend using Passport.js or a Google OAuth library. Store the returned profile and issue a JWT.
TaskOAuth
Topic quizzes on PurpleLane LMS for Auth topics
Three task check-ins · working login system with protected routes
Technologies You Will Work With
Language
JavaScript
Frontend
React
Runtime
Node.js
EX
Backend
Express JS
Database
MongoDB
MUI
UI Library
Material UI
JWT
Auth (optional)
JSON Web Tokens
PM
API Testing
Postman