Course Brief
About this Course
Master full-stack web development by building a complete ecommerce application with the MERN stack (MongoDB, Express, React, Node.js). You'll learn to develop both the frontend and backend, implement user authentication, manage products and orders, and deploy a fully functional online store.
Create a fully functional ecommerce website using the MERN stack from start to finish.
Eligibility
Requirements
- Basic understanding of JavaScript and web development.
- A computer with internet access.
- Willingness to learn backend and frontend development.
Training Plan
Learning Roadmap
01
Foundation Studio: Project Overview and Development Environment
- ShopIT Ecommerce App – Feature Walkthrough
- Installing Required Development Tools
- Accessing the Project Source Code
- guided portfolio activity Exercise-01
02
Practical Lab: Kickstarting the Backend API
- Initial Project Configuration
- Setting Up Nodemon for Auto Reload
- Building Your First API Route
- Using Postman for API Testing
- Connecting the App to MongoDB
- guided portfolio activity Exercise-02
03
Applied Workflow: Product Management API
- Add Product as Admin
- Creating the Product Schema
- Displaying Product List
- Implementing a Data Seeder Script
- Get Product Details by ID
- Edit Product as Admin
- Remove Product from Database
- guided portfolio activity Exercise-03
04
Professional Practice: Advanced Error Management
- Custom Error Handling Utility
- Centralized Error Middleware
- Handling Errors for Different Environments
- Catching Promise Rejections Gracefully
- Handling Unexpected Exceptions
- Catching Asynchronous Errors
- Handling Validation and Mongo Errors
- guided portfolio activity Exercise-04
05
Portfolio Sprint: Product Search, Filters & Pagination
- Adding Search by Keyword
- Building Product Filters
- Implementing Server-side Pagination
- guided portfolio activity Exercise-05
06
Career Readiness: User Authentication and Role-Based Access
- Setup for Paginated Product Results
- Defining the User Model
- Password Hashing on Registration
- JWT Token Generation
- Logging in and Token Assignment
- Sending Tokens via HTTP Cookies
- Route Protection for Logged-in Users
- User Logout Process
- Role Authorization Middleware
- Associate Product with User
- Forgot Password Token Logic
- Email Reset Password using Nodemailer
- Practice send reset email through a guided development project lab activity.
- Implement Reset Password Functionality
- Handling JWT & Duplicate Key Errors
- guided portfolio activity Exercise-06
07
Foundation Studio: Managing User Accounts
- Fetch Logged-in User Details
- Password Change Functionality
- Update User Profile
- Admin: View All Users and Specific User
- Admin: Update or Delete User
- guided portfolio activity Exercise-07
08
Practical Lab: Order Handling System
- Practice order model design through a guided development project lab activity.
- Create and Save Customer Order
- Fetch Orders by ID or User
- Admin: View and Update Order Status
- Admin: Delete Any Order
- guided portfolio activity Exercise-08
09
Applied Workflow: Product Ratings and Reviews
- Submit and Update Reviews
- Display All Reviews for a Product
- Delete Specific Product Review
- guided portfolio activity Exercise-09
10
Professional Practice: Building the Frontend UI
- ShopIT UI and Styling Overview
- Installing React and Project Cleanup
- Creating Header and Footer Components
- Designing the Homepage Layout
- Setting Up React Router
- Using Helmet for Dynamic Titles
- guided portfolio activity Exercise-10
11
Portfolio Sprint: Integrating Redux Toolkit
- Intro to Redux Toolkit and RTK Query
- Setting Up Redux Store
- Fetch All Products via RTK Query
- Display Products from Redux State
- Creating a Global Loader
- Adding Toast Notifications
- Product Details Page with RTK
- guided portfolio activity Exercise-11
12
Career Readiness: Advanced UI Features – Filters & Search
- Frontend Pagination Controls
- Building Search Functionality
- Filter by Price Range
- Filter by Product Categories
- Filter by Customer Ratings
- guided portfolio activity Exercise-12
13
Foundation Studio: Frontend Authentication Flow
- Practice implement login ui through a guided development project lab activity.
- User Registration Page
- Load User Info in Global State
- Show User Details in Navbar
- Logout Functionality
- guided portfolio activity Exercise-13
14
Practical Lab: Securing User Pages & Password Recovery
- User Dashboard Layout
- Edit User Profile Page
- Protected Route Component
- Integrating Cloudinary for Images
- Upload User Avatar Image
- Fixing Image Scaling Issues
- Update Password from Profile
- Forgot Password Request
- Reset Password Page
- guided portfolio activity Exercise-14
15
Applied Workflow: Shopping Cart System
- Quantity Selector for Products
- Add to Cart Feature
- Cart Component Implementation
- Update Quantity from Cart Page
- Remove Items from Cart
- Show Cart Summary & Totals
- guided portfolio activity Exercise-15
16
Professional Practice: Checkout Process and Cash-on-Delivery Orders
- Shipping Information Form
- Confirm Order Review Page
- Checkout Steps Progress Component
- Place Order with COD Option
- guided portfolio activity Exercise-16
17
Portfolio Sprint: Stripe Payment Integration
- Overview of Stripe Payments
- Setting Up Stripe Checkout, Taxes, and Shipping
- Understanding Webhooks in Stripe
- Handling Post-Payment Success
- guided portfolio activity Exercise-17
18
Career Readiness: Order History and Reviews Management
- View Past Orders for User
- Show Order Details Page
- Clear Cart after Successful Order
- Generate Downloadable Invoice
- Write Product Reviews
- Display All Reviews on UI
- Check Review Eligibility
- guided portfolio activity Exercise-18
19
Foundation Studio: Admin Panel – Sales & Products
- Admin Layout & Role Check
- Admin Dashboard and Sales Charts
- Create API Endpoint for Sales Data
- Display Sales in Chart Format
- Fix Server Timezone Bug
- Show All Products in Admin Panel
- Create New Product Form
- Update Product Details
- Upload Multiple Product Images
- Delete Individual Product Images
- Remove a Product from Store
- guided portfolio activity Exercise-19
20
Practical Lab: Admin Panel – Orders, Users, and Reviews
- Practice view all orders through a guided development project lab activity.
- Update Order Processing Status
- Delete Order Records
- View All Registered Users
- Edit User Role and Info
- Delete Users with Images
- View Product Reviews
- Delete Inappropriate Reviews
- guided portfolio activity Exercise-20
21
Applied Workflow: App Deployment and Legacy Content
- Create NotFound Component & Prep for Deployment
- Deploying on Cyclic.sh
- Legacy ShopIT App Demo
- guided portfolio activity Exercise-21
22
Portfolio Sprint: Development Project Lab Review
- Review the major development project lab concepts through a guided recap.
- Organize class practice into a simple portfolio-ready workflow.
- Apply the learned process on a realistic task with instructor guidance.
- Prepare next-step notes for continued practice after course completion.