MERN Ecommerce Course (+ Fintech Digital Wallet)
Categories: MERN Stack
About Course
Build an advanced fullstack eCommerce app with the MERN stack. Integrate Stripe, PayPal, flutterwave and build a Fintech Digital Wallet. This is the best eCommerce course on the internet.
NOTE: If you only know Frontend Development, I have added a FREE introduction to MERN Stack to this course to bring you up to speed.
– Project Demo – Admin Dashboard
Build an eCommerce app with MERN stack.
Project Features
– Intuitive & responsive UI
– Cart functionality
– Multiple file upload
– State Management with Redux Toolkit
– Admin dashboard
– Order history
– Product Rating and Reviews
– Product filter
– Download pdf invoice
– Send Transactional emails
– Wishlist products
– Create discount coupons
– Manage product categories and brands
– Build a Fintech like Digital Wallet
– Receive and send money to other users
– Deposit funds in the wallet
– Payment with Stripe, Flutterwave, PayPal and Digital wallet
– Lots more…
What Will You Learn?
- Build an eCommerce app with MERN stack
- Integrate Stripe, PayPal, Flutterwave.
- Build a Fintech type Digital Wallet and integrate into the app.
- Lots more...
Course Content
1. Introduction
-
1. Shopito Demo – Part 1
23:50 -
2. Shopito Demo – Part 2 – Admin Demo
11:12 -
3. Introduction and Course Requirements
03:17 -
— RESOURCES —
00:00 -
FREE Introduction To MERN Stack
00:00
2. Project Setup
-
4. Project Workflow
04:09 -
5. Project Setup
05:26 -
5b. Manual Project Setup
10:33
3. Building the Home Page (Frontend)
-
6. Router Setup
04:49 -
7. Header Component – Logo
06:49 -
8. Header Component – Nav Menu
09:00 -
9. Header Component – Cart
04:14 -
10. Header Component – Responsive Menu
11:26 -
11. Footer Component
03:49 -
12. Slider Component JSX
17:07 -
13. Slider Component Logic
12:59 -
14. Home InfoBox Component
08:46 -
15. Page Heading Component
05:17 -
16. Corousel Component
07:42 -
17. Corousel Item Component
09:34 -
18. Display Corousel on Home Page
06:26 -
19. Categories Component
09:44 -
20. Mobile Phones Carousel
01:40 -
21. Footer Links Component
12:17 -
21. B – Make the Header Sticky
05:04
4. Authentication (Backend)
-
22. Switching To Backend Authentication
01:51 -
23. Create Server and Connect MongoDB
13:50 -
24. Testing with Insomnia
02:50 -
25. Setup Middlewares
03:38 -
26. Create User Model
08:41 -
27. Create User Route and Controller
08:34 -
28. Create Error Middleware
07:51 -
29. Register user controller
17:22 -
30. Register user and Hash Password
12:54 -
31. Login User – Route and Controller
13:47 -
32. Logout User – Route and Controller
03:40 -
33. Create Protect Middleware and Get User
16:03 -
34. Get Login Status Route and Controller
04:45 -
35. Update User Route and Controller
08:02 -
36. Update Photo – Route and Controller
06:02
5. Authentication (Frontend)
-
37. Switching to the frontend – Auth
01:03 -
38. Loader Component
12:07 -
39. Card Component
03:16 -
40. Login Component – JSX
11:40 -
41. Register Component – JSX
07:52 -
42. Setup Redux Toolkit
06:53 -
43. Register User – Redux Logic
25:10 -
44. Register User – Component Logic – Part 1
18:24 -
45. Register User – Component Logic – Part 2
06:34 -
46. Login User – Redux Logic
06:04 -
47. Login User – Component Logic
08:24 -
48. Logout User – Redux Logic
05:37 -
49. Logout User – Component Logic
05:54 -
50. Selectively Display Nav Links
08:18 -
51. Get Login Status – Redux Logic
07:30 -
52. Get Login Status – Component Logic
02:35 -
53. Get User, Update User – Redux Logic
13:23 -
54. Create Profile Component and Route
02:32 -
55. Create Page Menu Component
05:45 -
56. Profile Page – JSX
16:34 -
57. Profile Page – Get User
07:32 -
58. Profile Page – Update User
08:50 -
59. Profile Page – Display Profile Image
10:49 -
60. Profile Page Error – Changing Uncontrolled input to controlled Input
04:52 -
61. Profile Page – Upload Image to Cloudinary
21:20 -
62. Profile Page – Display Username
10:08
6. Product CRUD Functions – (Backend)
-
63. Switching to the Backend – Product Section
00:46 -
64. Create Product Model
09:42 -
65. Create Product Route
11:12 -
66. Create Product Controller
12:56 -
67. Get Products – Route and Controller
03:18 -
68. Get Single Product – Route and Controller
03:36 -
69. Delete Product – Route and Controller
05:05 -
70. Update Product – Route and Controller
08:11 -
71. Review Product – Route and Controller
10:47 -
72. Delete Review – Route and Controller
08:40 -
73. Update Review – Route and Controller
15:59
7. Category and Brand CRUD Functions – (Backend)
-
74. Create Category Model
05:24 -
75. Create Category Route
04:01 -
76. Create Category Controller
07:02 -
77. Get Categories – Route and Controller
03:55 -
78. Delete Category – Route and Controller
05:16 -
79. Create Brand Model
03:01 -
80. Create Brand Route
04:19 -
81. Create Brand Controller
05:20 -
82. Get Brands – Controller
01:31 -
83. Delete Brand – Controller
02:53
8. Coupon CRUD Functions – (Backend)
-
83. Create Coupon Model
05:12 -
84. Create Coupon Route
03:04 -
85. Create Coupon Controller
04:53 -
86. get Coupons – Route and Controller
02:07 -
87. get Single Coupon – Route and Controller
09:48 -
88. Delete Coupon – Route and Controller
03:34
9. Orders CRUD Functions – (Backend)
-
89. Order – Model
08:04 -
90. Order – Route
03:41 -
91. Create Order – Controller
12:51 -
92. Get Orders – Controller
09:51 -
93. Get Single Order – Controller
07:42 -
93.b – Get Single Order – Bug Fix
00:44 -
94. Update Order Status – Controller
09:47
10. Setup Admin Dashboard – (Frontend)
-
95. Switching to the Frontend – Admin
01:28 -
96. Create Admin Link in Header
04:35 -
97. Create Admin Route
03:11 -
98. Create Admin Component Layout
04:32 -
99. Build the Admin Navbar
11:25
11. Create Category and Brand – Admin (Frontend)
-
100. Create Category – Redux Logic
18:36 -
101. Create Category – Route
09:09 -
102. Create Category – JSX
05:57 -
103. Create Category – Component Logic
07:45 -
104. Get Categories – Redux Logic.
05:22 -
105. Get Categories – Component Logic 1
08:57 -
106. Get Categories – Compnent Logic 2
04:17 -
107. Delete Categories – Redux Logic.
04:26 -
108. Delete Categories – Component Logic
08:14 -
109. Create Brand – Redux Logic
06:04 -
110. Create Brand – Route
05:04 -
111. Create Brand – JSX
12:00 -
112. Create Brand – Component Logic
05:29 -
113. Get Brands – Redux Logic
03:32 -
114. Get Brands – Component Logic
11:03 -
115. Delete Brand – Redux Logic
03:00 -
116. Delete Brand – Component Logic
04:12 -
117. Refactor Category and Brands
03:48
12. Create Product – Admin (Frontend)
-
118. Create Product – Redux Logic
15:42 -
119. Create Product – Route
08:22 -
120. Create Product – JSX – Part 1
15:07 -
121. Create Product – JSX – Part 2 – Categories input
15:43 -
122. Create Product – JSX – Part 3 – Brands input
01:58 -
123. Create Product – JSX – Part 4 – Other input
14:47 -
124. Create Product – Save Product
12:34 -
125. Image Upload Widget – Part 1 – Build the widget
10:43 -
126. Image Upload Widget – Part 2 – Add and Display images
19:08 -
127. Image Upload Widget – Part 3 – Remove image
06:51 -
128. Image Upload Widget – Part 4 – Limit Uploads
06:35 -
129. Image Upload Widget – Part 5 – Upload Images
25:57 -
130. Image Upload Widget – Part 6 – Show Upload Progress
05:42 -
131. Image Upload Widget – Part 7 – Display Uploaded Images
07:18 -
132. Image Upload Widget – Part 8 – Remove Uploaded Image
07:02 -
133. Get Products – Redux Logic
04:16 -
134. Get Products – Component Logic
05:20 -
135. Get Products – Search Component
08:05 -
136. Get Products – Display Products
14:56 -
137. Get Products – Pagination
07:33 -
138. Delete Product – Redux Logic
03:29 -
139. Delete Product – Component Logic
04:50 -
140. Handle Error from Product Model
12:58 -
141. Get Single Product – Redux Logic
06:11 -
142. Get Single Product – Component Logic
05:49 -
143. Update Product – Redux Logic
04:51 -
144. Update Product – Component Logic – Part 1
16:39 -
145. Update Product – Component Logic – Part 2
10:49 -
146. Update Product – Refactor our Code
12:40 -
147. Upload Some Products
02:31
13. Create Coupon – Admin (Frontend)
-
148. Create Coupon – Route
06:46 -
149. Create Coupon – Redux Logic
11:46 -
150. Create Coupon – JSX
09:24 -
151. Create Coupon – Component Logic + Debugging
18:20 -
152. Get Coupons – Redux Logic
04:30 -
153. Get Coupons – JSX and Component Logic
10:50 -
154. Get Single Coupon – Redux Logic
07:00 -
155. Delete Coupon – Redux Logic
03:23 -
156. Delete Coupon – Component Logic
06:18 -
157. Protect Admin Routes
09:49 -
158. Protect Admin Link
05:32
14. Shop Page – Frontend
-
159. Switching to the Shop Page
00:47 -
160. Not Found Page
03:29 -
161. Create Shop Component and Route
03:49 -
162. Shop Page Layout- Part 1
11:27 -
163. Shop Page Layout- Part 2
08:45 -
164. ProductList Component – Part 1
08:58 -
165. ProductList Component – Part 2
11:43 -
166. Product Item Component
20:59 -
167. Product Rating Component
15:12 -
168. Filter Products By Search
17:28 -
169. Sort Products
11:07 -
170. Filter Product By Category – Part 1
12:36 -
171. Filter Product By Category – Part 2
08:44 -
172. Filter Product By Brand
08:00 -
173. Filter Product By Price – Part 1
05:55 -
174. Filter Product By Price – Part 2
09:16 -
175. Filter Product By Price – Part 3
07:48 -
176. Clear Filter
03:25 -
177. Shop Pagination
04:48 -
178. Product Details – Component and Route
03:38 -
179. Product Details – Image Slider Part 1
14:12 -
180. Product Details – Image Slider Part 2
10:45 -
181. Product Details – Display Product Properties
17:53 -
182. Product Review Placeholder
01:45 -
182. Product Review Placeholder
01:45 -
182. Product Review Placeholder
01:45
15. Cart Page/Functions – Frontend
-
183. Create Cart Component and Route
02:43 -
184. Add Product to Cart – Part 1
19:08 -
185. Add Product to Cart – Part 2
10:02 -
186. Add Product to Cart – Part 3
03:07 -
187. Add Product to Cart – Part 4
09:19 -
188. Add Product to Cart – Conditionally display buttonS
14:12 -
189. Remove Product From Cart
11:26 -
190. Cart Page JSX
17:56 -
191. Cart Page Functions
03:07 -
192. Remove product from cart
04:01 -
193. Clear cart
05:08 -
194. Calculate Total Cart Quantity – Redux Logic
06:06 -
195. Calculate Total Cart Quantity – Component Logic
06:11 -
196. Calculate Total Amount – Redux Logic
04:56 -
197. Calculate Total Amount – Component Logic
04:13 -
198. Save Cart to DataBase
07:26 -
199. Get Cart from DataBase
02:25 -
200. Save Cart to DataBase – Redux Logic
08:52 -
201. Save Cart to DataBase – Component Logic
06:17 -
202. Get Cart From DataBase – Redux Logic
09:26 -
203. Get Cart From DataBase – Component Logic
05:08 -
204. Update Product Item – Add To Cart
03:34 -
205. Refactor the Carousel Item – Part 1
09:46 -
206. Refactor the Carousel Item – Part 2
14:01
16. Apply Coupon – Frontend
-
207. Verify Coupon Component – JSX
17:04 -
208. Cart Discount Component – JSX
09:39 -
209. Apply Coupon – Redux Logic
09:47 -
210. Apply Coupon – Component Logic
05:58 -
211. Remove Coupon – Component Logic
03:06
17. Stripe Payment Integration
-
212. Payment Options Component – JSX
14:18 -
213. Save Payment Method – Redux Logic
11:08 -
214. Save Payment Method – Component Logic
12:19 -
215. Selective Redirect User on Checkout
07:09 -
216. Checkout Details Component – JSX
16:45 -
217. Checkout Details Component – Update Form From Redux
09:10 -
218. Checkout Details Component – Handle Submit
09:43 -
219. Checkout Summary Component – Part 1
15:23 -
220. Checkout Summary Component – Part 2
01:48 -
221. Create a Free Stripe Test Account
03:41 -
222. Stripe Payment – Backend
25:20 -
223. Set up Checkout and CheckoutForm Component
06:49 -
224. Modify the Checkout Component
19:26 -
225. Modify the CheckoutForm Component
24:00 -
226. Test Stripe Payment and Debug
10:21 -
227. Switching to the Order Section
02:03
18. Create Customer Order
-
228. Create Order Component and Route
06:06 -
229. Create Order – Redux Logic
11:08 -
230. Create Order – Component Logic
17:27 -
231. Checkout Success Component
04:55 -
232. Get Orders – Redux Logic
03:10 -
233. Get Orders – Component Logic
15:15 -
234. Get an Order – Redux Logic
02:57 -
235. Display Order Details – Component Logic- Part 1
16:51 -
236. Display Order Details – Component Logic – Part 2
07:29 -
237. Download Order Details as PDF
07:46
19. Update Order Status – Admin
-
238. Create Orders Component and Route – Admin
07:50 -
239. Refactor and Display Orders – Admin
10:48 -
240. Refactor and Display Order Details – Admin
11:20 -
241. Update Order Status – Redux Logic
05:39 -
242. Update Order Status – Component Logic
13:55
20. Send Transactional Email
-
243. Switching to transactional Email Section
00:41 -
244. Create Gmail App for sending email
02:31 -
245. Create Send Email Function
15:33 -
246. Send Email after order is created
04:59 -
247. Create mail Template and Send Email
17:17
21. Product Stock Management
-
248. Product Stock Management
13:51
22. Flutterwave Payment Integration
-
249. Set up Flutterwave Account
09:00 -
250. Checkout Flutterwave – Route
06:09 -
251. Checkout Flutterwave – Frontend Function
13:13 -
252. Checkout Flutterwave – Backend Verify Payment
23:35 -
253. Checkout Flutterwave – Save Order
12:50
23. Paypal Payment Integration
-
253. Setup Paypal Developer Account
05:29 -
254. Create Paypal Route
02:24 -
255. Paypal Integration
20:45 -
256. Testing Paypal
05:53
24. Create Digital Wallet – Backend
-
257. Wallet Section Intro
01:47 -
258. Create Transaction Route and Controller
08:32 -
259. Add Account Balance To User Model
05:07 -
260. Create Transaction Model
03:39 -
261. Transer Fund Controller
16:56 -
262. Verify Account – Route and Controller
05:37 -
263. Get User Transaction – Route and Controller
11:36 -
264. Deposit Fund With Stripe – Part 1
12:59 -
265. Deposit Fund With Stripe – Part 2
14:19 -
266. Setup Stripe Webhook – Part 1
09:39 -
267. Setup Stripe Webhook – Part 2
13:12 -
269. Setup Stripe Webhook – Part 3
10:21 -
270. Deposit To Wallet with Flutterwave
10:28
25. Create Digital Wallet – Frontend
-
271. Create Wallet Component and Route
06:11 -
272. Create Wallet Info – JSX
14:34 -
273. Create Wallet Promo – JSX
05:15 -
274. Create Wallet Transactions List – JSX
22:26 -
275. Get Wallet Transactions – Redux Logic
16:36 -
276. Get Wallet Transactions – Component Logic
03:37 -
277. Verify Account – Redux Logic
09:01 -
278. Transfer Fund – Redux Logic
02:40 -
279. Transfer Fund – Create states
11:25 -
280. Transfer Fund – define props
08:14 -
281. Transfer Modal – JSX
24:43 -
282. Transfer Modal – Close Modal Function
05:52 -
283. Transfer Modal – Handle Input Change
05:42 -
284. Transfer Modal – Verify Receivers Account
12:05 -
285. Transfer Modal – Show Name of Receiver
14:51 -
286. Transfer Modal – Send money
15:12 -
287. Deposit Modal – Create States and Props
08:53 -
288. Deposit Modal – JSX
09:07 -
289. Deposit Modal – Close Modal
02:33 -
290. Deposit Modal – Deposit With Flutterwave
20:16 -
291. Deposit Modal – Deposit With Stripe
11:11
26. Deployment
-
292. Push Code to GitHub
10:37 -
293. Deploy Frontend to Vercel
09:34 -
294. Deploy Backend to Render
08:14 -
295. Solving Authentication Issues
07:29 -
296. Testing the webhook
12:01 -
297. Debugging the webhook
13:17
27. Wallet Payment Integration
-
298. Wallet Integration – Intro
00:52 -
299. Backend Route – Wallet Integration
03:02 -
300. Controller – Wallet Integration
21:57 -
301. Checkout with wallet – component and rout
03:50 -
302. Checkout with wallet – JSX
15:11 -
303. Checkout With Wallet – Logic
18:44
28. Wishlist
-
304. Wishlist – Intro
01:13 -
305. setup wishlist routes and controller
10:13 -
306. Add wishlist controller
05:37 -
307. Get wishlist controller
04:43 -
308. Remove from wishlist controller
04:02 -
309. Frontend – Wishlist component and Route
02:07 -
310. Frontend – Create wishlist service
06:00 -
311. Frontend – Create wishlist slice
09:04 -
312. Frontend – wishlist component JSX
14:08 -
313. Frontend – getWishlist and remove from wishlist
03:40 -
314. Frontend – add to wishlist
03:50
29. Review Products
-
315. Review Products – Intro
02:38 -
316. Review Product Backend – Recap
04:00 -
317. Review Product – Component and Route
04:51 -
318. Review Product – product service for reviews
06:33 -
319. Review Product – product slice for reviews
06:14 -
320. Review Product – Component Logic – 1
09:22 -
321. Review Product – Component Logic – 2
19:35 -
322. Review Product – Component Logic – Submit Review
05:42 -
323. Review Product – Component Logic – Display Review
11:45 -
324. Review Product – Component Logic – Delete Review
02:33 -
325. Review Product – Component Logic – Update Review
06:09 -
326. Review Product – Display Review on Product Page
08:51
Earn a certificate
Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.
Student Ratings & Reviews
No Review Yet