CF

MERN eCommerce From Scratch

14h 49m 45s
English
Paid

Unlock the full potential of eCommerce development with our comprehensive MERN stack course. Stand out from the crowd by building a completely customized shopping cart application from scratch, without relying on prebuilt plugins or platforms. This course will guide you through creating a feature-rich eCommerce application, ensuring you gain practical experience along the way.

Course Features

By enrolling in this course, you will learn how to implement the following functionalities:

  • Full-featured shopping cart: Build a dynamic and interactive shopping cart that enhances the user shopping experience.

  • Product reviews and ratings: Enable users to review products and provide ratings, helping potential buyers make informed decisions.

  • Top products carousel: Showcase best-selling or featured products in an attractive carousel format.

  • Product pagination: Efficiently manage product listings by implementing pagination.

  • Product search feature: Allow users to search for products using keywords, improving navigation and accessibility.

  • User profile with orders: Provide users with personalized profiles where they can view their order history.

  • Admin product management: Equip administrators with tools to manage product listings efficiently.

  • Admin user management: Allow administrators to oversee and manage user accounts.

  • Admin Order details page: Enable administrators to view and manage order details seamlessly.

  • Mark orders as delivered option: Integrate functionality for marking orders as delivered, enhancing customer service.

  • Checkout process: Implement a comprehensive checkout process, including shipping, payment method, and more.

  • PayPal/credit card integration: Facilitate secure payment processing through integration with PayPal and credit card systems.

  • Custom database seeder script: Use scripts for efficient database seeding.

What You Will Learn

This is a hands-on course designed to provide you with real-world experience. Here’s what you'll master:

  • React with Functional Components & Hooks: Develop robust UIs using modern React features.

  • React Router: Implement client-side routing to enhance user experience.

  • React-Bootstrap UI library: Use React-Bootstrap to create responsive and visually appealing UI components.

  • Component Structure: Learn to effectively structure and organize React components.

  • Component Level State & Props: Manage state and props at the component level to create interactive applications.

  • Managing Global State with Redux: Use Redux for powerful state management, including Actions and Reducers.

  • Using Redux state in components: Leverage useDispatch and useSelector to interact with Redux state.

  • Backend Development with Express: Build an extensive backend infrastructure using Express.js.

  • MongoDB Database Management: Work with MongoDB utilizing the Mongoose ODM for data management.

  • JWT Authentication: Implement secure authentication using JSON web tokens.

  • Custom Authentication Middleware: Create middleware to handle authentication processes seamlessly.

  • Custom Error Handler: Develop robust error handling mechanisms for enhancing application reliability.

  • PayPal API Integration: Integrate PayPal API to handle payment transactions effectively.

  • Environment Variables: Use environment variables to manage configurations across different environments.

  • Project Deployment: Deploy your completed project to showcase your skills to potential employers or clients.

  • ... And Much More!

Join this course today to transform your eCommerce development skills and build a portfolio-worthy project from scratch.

About the Authors

Brad Traversy

Brad Traversy thumbnail

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 88 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 88 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome To The Course
All Course Lessons (88)
#Lesson TitleDurationAccess
1
Welcome To The Course Demo
01:33
2
ProShop Project Demo
07:17
3
Resources & Environment
07:44
4
React Setup & Git Initialize
12:13
5
React-Bootstrap Setup, Header & Footer Components
14:40
6
HomeScreen Product Listing
10:32
7
Rating Component
13:46
8
Implementing React Router
07:35
9
Product Details Screen
11:23
10
Front End / Back End Workflow & Explanation
04:06
11
Serving Products - Back End Routes
07:19
12
Fetching Products From React (useEffect)
11:17
13
Nodemon & Concurrently Setup
05:31
14
Environment Variables
04:21
15
ES Modules In Node.js
04:26
16
MongoDB Atlas & Compass Setup
07:31
17
Connecting To The Database
05:16
18
Adding Colors To The Console (Optional)
03:11
19
Modeling Our Data
14:55
20
Preparing Sample Data
04:40
21
Data Seeder Script
10:31
22
Fetching Products From The Database
09:18
23
Getting Started With Postman
05:26
24
Custom Error Handling
10:37
25
An Overview Of Redux
05:21
26
Create a Redux Store
08:55
27
Product List Reducer & Action
13:54
28
Bringing Redux State Into HomeScreen - useDispatch & useSelector
08:51
29
Message & Loader Components
04:57
30
Product Details Reducer & Action
11:08
31
Qty Select & Add To Cart Button
10:09
32
Cart Reducer & Add To Cart Action
11:45
33
Add To Cart Functionality
09:47
34
Cart Screen
17:13
35
Remove Items From Cart
04:37
36
Clean Up By Using Controllers
05:30
37
User Authentication Endpoint
13:27
38
Brief Explanation of JWT (JSON Web Tokens)
03:57
39
Generate a JSON Web Token
04:58
40
Custom Authentication Middleware
16:21
41
Saving The Token In Postman
02:28
42
User Registration & Password Encryption
09:51
43
User Login Reducer & Action
10:36
44
User Login Screen & Functionality
16:56
45
Show User In Navbar & Logout
07:46
46
User Register Reducer, Action & Screen
11:39
47
Update Profile Endpoint
07:19
48
Profile Screen & Get User Details
16:51
49
Update User Profile
09:20
50
Shipping Screen & Save Address
14:49
51
Checkout Steps Component
05:21
52
Payment Screen & Save Payment Method
10:47
53
Place Order Screen
21:24
54
Order Controller & Route
06:02
55
Create Order
15:26
56
Get Order by ID Endpoint
05:25
57
Order Details Reducer & Action
04:21
58
Order Screen
12:15
59
Update To Paid Endpoint
04:41
60
Order Pay Reducer & Action
06:15
61
Adding PayPal Payments
19:48
62
Show Orders On Profile
18:04
63
User Details & Orders Reset
04:53
64
Admin Middleware & Get Users Endpoint
05:13
65
Admin User List
16:54
66
Admin Screen Access Security
05:30
67
Admin User Delete
11:44
68
Get User By ID & Update User Endpoints
08:07
69
User Edit Screen & Get User Details
10:12
70
Update User Functionality
10:09
71
Admin Product List
08:07
72
Admin Delete Products
13:42
73
Create & Update Product Endpoints
12:33
74
Admin Create Product
09:49
75
Edit Product Screen
11:26
76
Admin Update Product
09:09
77
Image Upload Config & Endpoint
13:11
78
Front End Image Upload
06:59
79
Admin Order List
13:38
80
Mark Order As Delivered
14:50
81
Morgan & Create Review Endpoint
12:01
82
Front End Product Reviews
22:48
83
Product Search
11:06
84
Product Pagination
24:48
85
Top Products Carousel
15:55
86
Custom Page Titles & Meta
10:05
87
Prepare For Deployment
06:24
88
Deploy To Heroku
17:10
Unlock unlimited learning

Get instant access to all 87 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

88 lessons · 14h 49m 45s
Show all 88 lessons
  1. 1 Welcome To The Course 01:33
  2. 2 ProShop Project Demo 07:17
  3. 3 Resources & Environment 07:44
  4. 4 React Setup & Git Initialize 12:13
  5. 5 React-Bootstrap Setup, Header & Footer Components 14:40
  6. 6 HomeScreen Product Listing 10:32
  7. 7 Rating Component 13:46
  8. 8 Implementing React Router 07:35
  9. 9 Product Details Screen 11:23
  10. 10 Front End / Back End Workflow & Explanation 04:06
  11. 11 Serving Products - Back End Routes 07:19
  12. 12 Fetching Products From React (useEffect) 11:17
  13. 13 Nodemon & Concurrently Setup 05:31
  14. 14 Environment Variables 04:21
  15. 15 ES Modules In Node.js 04:26
  16. 16 MongoDB Atlas & Compass Setup 07:31
  17. 17 Connecting To The Database 05:16
  18. 18 Adding Colors To The Console (Optional) 03:11
  19. 19 Modeling Our Data 14:55
  20. 20 Preparing Sample Data 04:40
  21. 21 Data Seeder Script 10:31
  22. 22 Fetching Products From The Database 09:18
  23. 23 Getting Started With Postman 05:26
  24. 24 Custom Error Handling 10:37
  25. 25 An Overview Of Redux 05:21
  26. 26 Create a Redux Store 08:55
  27. 27 Product List Reducer & Action 13:54
  28. 28 Bringing Redux State Into HomeScreen - useDispatch & useSelector 08:51
  29. 29 Message & Loader Components 04:57
  30. 30 Product Details Reducer & Action 11:08
  31. 31 Qty Select & Add To Cart Button 10:09
  32. 32 Cart Reducer & Add To Cart Action 11:45
  33. 33 Add To Cart Functionality 09:47
  34. 34 Cart Screen 17:13
  35. 35 Remove Items From Cart 04:37
  36. 36 Clean Up By Using Controllers 05:30
  37. 37 User Authentication Endpoint 13:27
  38. 38 Brief Explanation of JWT (JSON Web Tokens) 03:57
  39. 39 Generate a JSON Web Token 04:58
  40. 40 Custom Authentication Middleware 16:21
  41. 41 Saving The Token In Postman 02:28
  42. 42 User Registration & Password Encryption 09:51
  43. 43 User Login Reducer & Action 10:36
  44. 44 User Login Screen & Functionality 16:56
  45. 45 Show User In Navbar & Logout 07:46
  46. 46 User Register Reducer, Action & Screen 11:39
  47. 47 Update Profile Endpoint 07:19
  48. 48 Profile Screen & Get User Details 16:51
  49. 49 Update User Profile 09:20
  50. 50 Shipping Screen & Save Address 14:49
  51. 51 Checkout Steps Component 05:21
  52. 52 Payment Screen & Save Payment Method 10:47
  53. 53 Place Order Screen 21:24
  54. 54 Order Controller & Route 06:02
  55. 55 Create Order 15:26
  56. 56 Get Order by ID Endpoint 05:25
  57. 57 Order Details Reducer & Action 04:21
  58. 58 Order Screen 12:15
  59. 59 Update To Paid Endpoint 04:41
  60. 60 Order Pay Reducer & Action 06:15
  61. 61 Adding PayPal Payments 19:48
  62. 62 Show Orders On Profile 18:04
  63. 63 User Details & Orders Reset 04:53
  64. 64 Admin Middleware & Get Users Endpoint 05:13
  65. 65 Admin User List 16:54
  66. 66 Admin Screen Access Security 05:30
  67. 67 Admin User Delete 11:44
  68. 68 Get User By ID & Update User Endpoints 08:07
  69. 69 User Edit Screen & Get User Details 10:12
  70. 70 Update User Functionality 10:09
  71. 71 Admin Product List 08:07
  72. 72 Admin Delete Products 13:42
  73. 73 Create & Update Product Endpoints 12:33
  74. 74 Admin Create Product 09:49
  75. 75 Edit Product Screen 11:26
  76. 76 Admin Update Product 09:09
  77. 77 Image Upload Config & Endpoint 13:11
  78. 78 Front End Image Upload 06:59
  79. 79 Admin Order List 13:38
  80. 80 Mark Order As Delivered 14:50
  81. 81 Morgan & Create Review Endpoint 12:01
  82. 82 Front End Product Reviews 22:48
  83. 83 Product Search 11:06
  84. 84 Product Pagination 24:48
  85. 85 Top Products Carousel 15:55
  86. 86 Custom Page Titles & Meta 10:05
  87. 87 Prepare For Deployment 06:24
  88. 88 Deploy To Heroku 17:10

Related courses

Frequently asked questions

What is MERN eCommerce From Scratch about?
Unlock the full potential of eCommerce development with our comprehensive MERN stack course. Stand out from the crowd by building a completely customized shopping cart application from scratch, without relying on prebuilt plugins or…
Who teaches MERN eCommerce From Scratch?
MERN eCommerce From Scratch is taught by Brad Traversy, Udemy. You can find more courses by these instructors on the corresponding source pages.
How long is MERN eCommerce From Scratch?
MERN eCommerce From Scratch contains 88 lessons with a total runtime of 14 hours 49 minutes. All lessons are available to watch online at your own pace.
Is MERN eCommerce From Scratch free to watch?
MERN eCommerce From Scratch is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch MERN eCommerce From Scratch online?
MERN eCommerce From Scratch is available to watch online on CourseFlix at https://courseflix.net/course/mern-ecommerce-from-scratch. The page hosts every lesson with the integrated video player; no download is required.