Scribd
Upload
30 views22 pages

Mern Stack Syllyabus

The document outlines a six-week course on MERN stack web development, covering essential topics such as HTML, CSS, JavaScript, React, Node.js, and Express.js. Each week includes specific lessons and mini projects aimed at building an e-commerce application. The final week focuses on enhancing the project with features like a wishlist, checkout flow, error handling, and a review system.

Uploaded by

rutujapatil6007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views22 pages

Mern Stack Syllyabus

The document outlines a six-week course on MERN stack web development, covering essential topics such as HTML, CSS, JavaScript, React, Node.js, and Express.js. Each week includes specific lessons and mini projects aimed at building an e-commerce application. The final week focuses on enhancing the project with features like a wishlist, checkout flow, error handling, and a review system.

Uploaded by

rutujapatil6007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

MERN STACK

Week 1: Web Development Basics


(HTML, CSS)

1. Introduction to Web Development


& Project Overview – MERN stack
intro, e-commerce workflow, project
planning.
2. HTML 5 – basic of Html5 and
understanding its core tags.
3. CSS for Styling – basic css3
properties and selectors.
4. CSS Frameworks – Implementing
Bootstrap for better UI.
5. Mini Project – Static HTML/CSS E-
commerce Home Page.
Week 2: JavaScript & DOM
Manipulation

1. JavaScript Basics – Variables,


loops, functions, event listeners.
2. DOM Manipulation – Handling
dynamic UI updates.
3. ES6 Features – Arrow functions,
destructuring, template literals.
4. Local Storage & Session Storage –
Storing data locally.
5. Mini Project – Add-to-Cart
Functionality Using Local Storage.
Week 3: React Basics for E-
commerce

1. Introduction to React & Project


Setup – Create React App, folder
structure, component breakdown.
2. React Components & Props –
Product Card, Navbar, Cart, Footer
components.
3. State Management with Hooks – use
State for managing cart & product
state.
4. React Router for Navigation – Home,
Products, Cart pages.
5. Project Progress – Implementing
Dynamic Product Listings & Cart Page
Week 4: Backend with Node.js &
Express.js

1. Introduction to Node.js & Express.js


– Setting up backend, Express basics.
2. Creating REST APIs – Routes for
fetching products, categories, cart
data.
3. Connecting MongoDB with
Mongoose – Product schema,
category schema.
4. CRUD Operations for Products &
Categories – Add/update/delete
products.
5. Project Progress – Displaying
Products from MongoDB in React
Week 5: Connecting React with
Express & Additional Features

1. Connecting Frontend with Backend –


Axios, fetching products dynamically.
2. Managing State with Context API –
Global state for cart & products.
3. Displaying Product Details Page –
Show product images, descriptions, and
prices dynamically.
4. Sorting Products by Price & Category –
Simple sorting functionality in frontend.
5. Project Progress – Enhancing the E-
commerce Product Page.
Week 6: Finalizing & Deploying
the E-commerce Project

1. Building a Wishlist Feature – Allow


users to save products for later.
2. Basic Checkout Flow (Without
Payment) – Simple order placement
UI.
3. Error Handling in Express & React
– Displaying validation & API errors.
4. Adding a Simple Review System –
Users can leave ratings on products.
5. Final Project Wrap-up & Q&A –
Completing the E-commerce Store.

You might also like