The learning journey
Eleven topics, one path, start to finish
The journey starts at writing your first HTML and ends with a working AI-powered e-commerce application. As you scroll, the line fills and each topic lights up in turn.
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 they connect.
MongoDBExpressReactNode.js
After this topicA student 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. Students build a Student Registration Form structure in HTML, then progressively style it across three CSS tasks.
HTML5CSS3FlexboxBox Model
After this topicA student can build a structured HTML form and style it with colors, fonts, and flexbox layout.
3
3JavaScript Fundamentals & Async ProgrammingWeek 1
Core JavaScript (callbacks, higher-order functions, event handling) and async programming (Fetch API, Promises, async/await). Five tasks build from DOM manipulation to live weather data.
JavaScriptFetch APIAsync/AwaitDOM Events
After this topicA student can handle DOM events, manipulate the page dynamically, and fetch data from an external API.
4
4React & Material UIWeek 1
React components, props, state, and component-driven architecture. Material UI for rapid, professional layouts. Students rebuild the Counter and the Student Registration Form in React.
ReactMaterial UIComponents
After this topicA student can build a React application with reusable components and a Material UI interface.
5
5MongoDBWeek 2
Document databases, collections, CRUD queries, and how to model student data. MongoDB is installed and queried against the Student Registration data from Week 1.
MongoDBCRUDCollections
After this topicA student can install MongoDB, write queries, and store and retrieve structured data from a database.
6
6Express JSWeek 2
Setting up a Node server, defining routes, middleware, controllers, and connecting Express to MongoDB. Two tasks build the full backend for the Student Registration form.
ExpressNode.jsREST APIsControllers
After this topicA student can build a REST API with Express, connect it to MongoDB, and test endpoints.
7
7Full-Stack IntegrationWeek 2
Wiring the React frontend to the Express backend: API calls from React, CORS, environment variables, and end-to-end data flow. The Student Registration flow is completed as a working full-stack application.
ReactExpressMongoDBCORS
After this topicA student can connect a React frontend to an Express backend and complete a working full-stack data flow.
8
8Core AI & Prompt EngineeringWeek 3
How LLMs work. Prompt engineering techniques: few-shot prompting, chain-of-thought, meta-prompting, and system vs. user prompts. Students build a conversational Pizza Order Bot and vibe-code an e-commerce site with Lovable.
LLMsPrompt EngineeringGeminiLovable
After this topicA student can write effective prompts using few-shot and chain-of-thought techniques and build a conversational bot.
9
9ShopMATE: Build AI FeaturesWeek 3
Students receive the ShopMATE MERN e-commerce codebase and set up Google AI Studio and MongoDB Atlas. Two tasks add AI features: automated product descriptions from text, and multimodal descriptions from uploaded product images.
ShopMATEGemini 2.5 FlashMultimodalMongoDB Atlas
After this topicA student can integrate Gemini into a MERN app to generate text and image-based product content automatically.
10
10Advanced GenAI: RAGWeek 4
AI hallucinations, RAG architecture, vector embeddings, and retrieval pipelines. Pinecone is configured and two tasks add semantic search (Vibe Search) and an AI chatbot that answers refund queries using the product catalogue as its knowledge base.
RAGPineconeVector EmbeddingsSemantic Search
After this topicA student can build a RAG pipeline with vector embeddings, implement semantic search, and create a grounded AI chatbot.
11
11Final Capstone SprintWeek 4 · Last 3 Days
A collaborative team hackathon. Teams design, build, and present a project centred entirely around GenAI features and architecture. All previous skills come together in one final deliverable.
Team ProjectHackathonPresentation
After this topicA student can collaborate in a team to design and present a working GenAI-powered application.
One project, built in two phases
From a registration form to an AI-powered store
Phase 1 builds the full MERN stack foundation. Phase 2 adds GenAI features on top. Both phases connect through the same project thread, so students always know why each new skill matters.
Students do not start from a blank screen for Phase 2. After building the MERN foundation themselves, they receive the ShopMATE codebase at the start of Week 3 and add GenAI features on top of it.
HTML + CSS
Week 1 · Structure and style
JavaScript + React
Week 1 · Interactivity
Express + MongoDB
Week 2 · Backend
GenAI + RAG
Weeks 3–4 · AI features
Program at a Glance
Week
Phase
Topics
What Students Build
Assessment
WeekWeek 1
PhasePhase 1 · MERN Foundations
TopicsIntro to MERN, HTML & CSS, JavaScript & Async, React & Material UI
What Students BuildStudent Registration Form: HTML structure and CSS styling, JavaScript events, React rebuild with Material UI
AssessmentTopic quizzes on PurpleLane LMS · 9 tasks
WeekWeek 2
PhasePhase 1 · MERN Foundations
TopicsMongoDB, Express JS, Full-Stack Integration
What Students BuildBackend API for the registration form, connected to MongoDB, integrated with the React frontend
AssessmentTopic quizzes on PurpleLane LMS · 3 tasks
WeekWeek 3
PhasePhase 2 · GenAI Integrations
TopicsCore AI & Prompt Engineering, ShopMATE AI Features
What Students BuildPizza Order Bot, Lovable vibe-coded site, automated product description (text and image) on ShopMATE
AssessmentTopic quizzes on PurpleLane LMS · 4 tasks
WeekWeek 4
PhasePhase 2 · GenAI Integrations
TopicsRAG, Semantic Search, Grounded Chatbot · Final Capstone Sprint (last 3 days)
What Students BuildVibe Search (semantic product search), refund policy chatbot, and a team hackathon project presented on the final day
AssessmentTopic quiz on PurpleLane LMS · 2 tasks · hackathon team presentation
Week 1MERN Foundations: The Frontend Phase 1 · 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 students will build across all four weeks.
Topics 2 & 3HTML & CSS BasicsConcepts + 3 Tasks
HTML5CSS3FlexboxVS Code
HTML: Structure of a web page
Elements, attributes, semantic tags, and forms. Students build the complete structure of a Student Registration Form.
CSS: Selectors, box model, layout
Colors, fonts, flexbox. Two tasks progressively style the registration form built in the HTML topic.
Task 1 · Colors and buttons
Apply background colors and style the submit button on the registration form.
Task 2 · Layout and fonts
Align form elements with flexbox and apply font style changes across the page.
Topic 4JavaScript Fundamentals & Async ProgrammingConcepts + 5 Tasks
JavaScriptFetch APIPromisesAsync/Await
Core: callbacks and event handling
How JavaScript handles user actions. Higher-order functions, addEventListener, and removeEventListener.
Task 1 · Random color button
Change the page background to a random color when a button is clicked using addEventListener.
Task 2 · Stop color button
Add a second button that removes the color-change behaviour using removeEventListener.
Task 3 · Registration form list
On form submission, render the student data into a live list on the page without a reload.
Task 4 · Counter web app
A counter with Add, Subtract, and Reset buttons, each wired with event listeners.
Task 5 · Weather via Fetch API
Fetch live weather data from an external API and display it on the page using Promises and async/await.
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.
Material UI component library
Ready-made, accessible React components. How to pick and combine them to build professional layouts quickly.
Task 1 · Counter App in React
Rebuild the counter web app as a proper React component with state management.
Task 2 · Registration form in React + MUI
Redesign the Student Registration frontend using React components and Material UI form elements.
Topic quizzes on PurpleLane LMS for all Topics 1–5
Week 2MERN Foundations: The Backend Phase 1 · Topics 6–8
Topic 6MongoDBConcepts + Setup
MongoDBMongoDB ShellCRUD
Document databases and collections
How MongoDB stores data as documents (JSON-like objects) rather than rows and tables. Installing MongoDB and writing queries to manage student details.
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.
Task 1 · Backend integration
Connect the Express server to MongoDB and test data retrieval with Postman.
Task 2 · API construction
Build the controllers and endpoints for the Student Registration form: create, read, update, delete.
Topic 8Full-Stack IntegrationTask
ReactExpressMongoDBCORS
Task 3 · Full-stack Student Registration
Connect 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.
Topic quizzes on PurpleLane LMS for Topics 6–8
Three tasks · working full-stack application
Week 3GenAI Integrations: Core AI & ShopMATE Phase 2 · Topics 9–10
Topic 9Core AI & Prompt EngineeringConcepts + 2 Tasks
GeminiPrompt EngineeringLovable
How LLMs work
Tokens, training, and why the model completes text the way it does. What GenAI can and cannot do reliably.
Prompt engineering techniques
Few-shot prompting, chain-of-thought, meta-prompting, system prompts vs. user prompts, and when to use each.
Task 1 · Pizza Order Bot
Build a conversational bot that takes a pizza order step by step using a well-engineered system prompt.
Task 2 · Vibe-code with Lovable
Use Lovable to generate a working e-commerce website from a natural-language description.
Topic 10Get ShopMATE Codebase · Build AI FeaturesSetup + 2 Tasks
ShopMATEGemini 2.5 FlashGoogle AI StudioMongoDB Atlas
Environment setup
Create Google AI Studio and MongoDB Atlas accounts. Obtain a Gemini API key and wire it into the ShopMATE backend via environment variables.
Task 3 · Text-based product descriptions
Given a product name and category, call Gemini to generate a polished marketing description and save it to the database.
Task 4 · Multimodal vision descriptions
Accept an uploaded product image, send it to Gemini, and generate a description from what the model sees in the photo.
Topic quizzes on PurpleLane LMS for Topics 9–10
Four tasks on ShopMATE
Week 4RAG, Semantic Search & Capstone Phase 2 · Topics 11–12
Topic 11Advanced GenAI: Retrieval-Augmented Generation (RAG)Concepts + 2 Tasks
PineconeRAGVector EmbeddingsGemini 2.5 Flash
AI hallucinations and why RAG solves them
What hallucination is, why LLMs confabulate, and how grounding a model in retrieved facts produces reliable answers.
Vector embeddings and retrieval pipelines
How text becomes a point in embedding space, why similar meanings cluster together, and how a retrieval pipeline finds the right context before calling the model.
Task 5 · Vibe Search (semantic product search)
Configure Pinecone, embed the product catalogue, and implement a semantic search that finds products by meaning, not just keywords.
Task 6 · Grounded refund policy chatbot
Build a chatbot that answers refund policy questions by retrieving the relevant policy section first, then generating an answer grounded in that context.
Topic 12Final Capstone Sprint · Collaborative HackathonLast 3 Days
Team ProjectGenAI FeaturesPresentation
Team design and build
Teams select a GenAI feature or architecture and spend two days designing and implementing it, using any combination of the tools and patterns learned across the four weeks.
Presentation day
Each team presents their working project on the final day: a live demo, an explanation of the architecture, and a reflection on what they built and learned.
Topic quizzes on PurpleLane LMS for Topics 11–12
Two tasks
Team hackathon presentation
Technologies You Will Work With
Language
JavaScript
Frontend
React
Runtime
Node.js
EX
Backend
Express JS
Database
MongoDB
Version Control
Git
Check-ins
GitHub
LLM
Gemini 2.5 Flash
PC
Vector DB
Pinecone
MUI
UI Library
Material UI
LV
AI Builder
Lovable
PM
API Testing
Postman
All tools are free for students.