About 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.
Requirements
- ✓Basic understanding of JavaScript and web development.
- ✓A computer with internet access.
- ✓Willingness to learn backend and frontend development.
Course Curriculum
Section 1: Project Overview and Development Environment
1. ShopIT Ecommerce App – Feature Walkthrough
2. Installing Required Development Tools
3. Accessing the Project Source Code
Assessment Exercise-01
Section 2: Kickstarting the Backend API
4. Initial Project Configuration
5. Setting Up Nodemon for Auto Reload
6. Building Your First API Route
7. Using Postman for API Testing
8. Connecting the App to MongoDB
Assessment Exercise-02
Section 3: Product Management API
9. Add Product as Admin
10. Creating the Product Schema
11. Displaying Product List
12. Implementing a Data Seeder Script
13. Get Product Details by ID
14. Edit Product as Admin
15. Remove Product from Database
Assessment Exercise-03
Section 4: Advanced Error Management
16. Custom Error Handling Utility
17. Centralized Error Middleware
18. Handling Errors for Different Environments
19. Catching Promise Rejections Gracefully
20. Handling Unexpected Exceptions
21. Catching Asynchronous Errors
22. Handling Validation and Mongo Errors
Assessment Exercise-04
Section 5: Product Search, Filters & Pagination
23. Adding Search by Keyword
24. Building Product Filters
25. Implementing Server-side Pagination
Assessment Exercise-05
Section 6: User Authentication and Role-Based Access
26. Setup for Paginated Product Results
27. Defining the User Model
28. Password Hashing on Registration
29. JWT Token Generation
30. Logging in and Token Assignment
31. Sending Tokens via HTTP Cookies
32. Route Protection for Logged-in Users
33. User Logout Process
34. Role Authorization Middleware
35. Associate Product with User
36. Forgot Password Token Logic
37. Email Reset Password using Nodemailer
38. Send Reset Email
39. Implement Reset Password Functionality
40. Handling JWT & Duplicate Key Errors
Assessment Exercise-06
Section 7: Managing User Accounts
41. Fetch Logged-in User Details
42. Password Change Functionality
43. Update User Profile
44. Admin: View All Users and Specific User
45. Admin: Update or Delete User
Assessment Exercise-07
Section 8: Order Handling System
46. Order Model Design
47. Create and Save Customer Order
48. Fetch Orders by ID or User
49. Admin: View and Update Order Status
50. Admin: Delete Any Order
Assessment Exercise-08
Section 9: Product Ratings and Reviews
51. Submit and Update Reviews
52. Display All Reviews for a Product
53. Delete Specific Product Review
Assessment Exercise-09
Section 10: Building the Frontend UI
54. ShopIT UI and Styling Overview
55. Installing React and Project Cleanup
56. Creating Header and Footer Components
57. Designing the Homepage Layout
58. Setting Up React Router
59. Using Helmet for Dynamic Titles
Assessment Exercise-10
Section 11: Integrating Redux Toolkit
60. Intro to Redux Toolkit and RTK Query
61. Setting Up Redux Store
62. Fetch All Products via RTK Query
63. Display Products from Redux State
64. Creating a Global Loader
65. Adding Toast Notifications
66. Product Details Page with RTK
Assessment Exercise-11
Section 12: Advanced UI Features – Filters & Search
67. Frontend Pagination Controls
68. Building Search Functionality
69. Filter by Price Range
70. Filter by Product Categories
71. Filter by Customer Ratings
Assessment Exercise-12
Section 13: Frontend Authentication Flow
72. Implement Login UI
73. User Registration Page
74. Load User Info in Global State
75. Show User Details in Navbar
76. Logout Functionality
Assessment Exercise-13
Section 14: Securing User Pages & Password Recovery
77. User Dashboard Layout
78. Edit User Profile Page
79. Protected Route Component
80. Integrating Cloudinary for Images
81. Upload User Avatar Image
82. Fixing Image Scaling Issues
83. Update Password from Profile
84. Forgot Password Request
85. Reset Password Page
Assessment Exercise-14
Section 15: Shopping Cart System
86. Quantity Selector for Products
87. Add to Cart Feature
88. Cart Component Implementation
89. Update Quantity from Cart Page
90. Remove Items from Cart
91. Show Cart Summary & Totals
Assessment Exercise-15
Section 16: Checkout Process and Cash-on-Delivery Orders
92. Shipping Information Form
93. Confirm Order Review Page
94. Checkout Steps Progress Component
95. Place Order with COD Option
Assessment Exercise-16
Section 17: Stripe Payment Integration
96. Overview of Stripe Payments
97. Setting Up Stripe Checkout, Taxes, and Shipping
98. Understanding Webhooks in Stripe
99. Handling Post-Payment Success
Assessment Exercise-17
Section 18: Order History and Reviews Management
100. View Past Orders for User
101. Show Order Details Page
102. Clear Cart after Successful Order
103. Generate Downloadable Invoice
104. Write Product Reviews
105. Display All Reviews on UI
106. Check Review Eligibility
Assessment Exercise-18
Section 19: Admin Panel – Sales & Products
107. Admin Layout & Role Check
108. Admin Dashboard and Sales Charts
109. Create API Endpoint for Sales Data
110. Display Sales in Chart Format
111. Fix Server Timezone Bug
112. Show All Products in Admin Panel
113. Create New Product Form
114. Update Product Details
115. Upload Multiple Product Images
116. Delete Individual Product Images
117. Remove a Product from Store
Assessment Exercise-19
Section 20: Admin Panel – Orders, Users, and Reviews
118. View All Orders
119. Update Order Processing Status
120. Delete Order Records
121. View All Registered Users
122. Edit User Role and Info
123. Delete Users with Images
124. View Product Reviews
125. Delete Inappropriate Reviews
Assessment Exercise-20
Section 21: App Deployment and Legacy Content
126. Create NotFound Component & Prep for Deployment
127. Deploying on Cyclic.sh
128. Legacy ShopIT App Demo
Assessment Exercise-21
Section 40: Final Exam
Final Exam
What You Will Learn
- ✓Set up a complete development environment using the MERN stack for an ecommerce project.
- ✓Use MongoDB to handle data for products, users, and orders effectively.
- ✓Develop secure backend APIs for authentication, product listings, and order workflows.
- ✓Design a responsive and interactive frontend using React for the online store.
- ✓Add advanced functionality like search filters, product pagination, and sorting.
- ✓Integrate Stripe for payment processing and deploy the final app to platforms like Heroku.