Web Development MERN Stack + Redux Project, Ecommerce SaaS

Focused View

Djumali Osmani

31:02:46

18 View

1. Introduction

1. Introduction - What you will Learn and Master.mp4

09:34

2. Project Overview and Technologies.mp4

13:40

3.1 Finished website.html

3.2 Github Backend code - Finished.html

3.3 Github Frontend Code - Finished.html

3. Finished Website.mp4

00:33

2. Development Enviroment Setup

1. Seting Up the web development enviroment.mp4

12:40

3. Backend Development

1. Seting up the project dependencies.mp4

17:31

2. What is a API.mp4

10:50

3. Connecting to MongoDB, our database.mp4

14:47

4. Create user model and the first user, part 1.mp4

30:50

5. Create user model and first user, part 2.mp4

17:42

6. Finishing the user model.mp4

08:12

7. Creating the products model.mp4

15:55

8. Creating Stripe account, finishing up register logic.mp4

09:59

9. Creating the login logic.mp4

16:34

10. Auth Middleware and fetching user details.mp4

19:40

11. Fetch all users logic.mp4

05:47

12. Stripe - Get all subscriptions.mp4

06:55

13. Update users password logic.mp4

09:09

14. Reset users password logic part 1.mp4

22:56

15. Reset users password logic part 2.mp4

14:42

16. Verify users account part 1.mp4

11:32

17. Verify users account part 2.mp4

17:04

18. Update user details logic.mp4

10:59

19. Save a product logic.mp4

15:48

20. Unsave a product logic.mp4

09:27

21. Create Stripe checkout window.mp4

18:09

22. Stripe subscription update and user role update.mp4

22:24

23. Stripe subscription update after cancel plan.mp4

40:09

24. Stripe subscription update after renew.mp4

17:55

25. How everything is connected.mp4

07:07

26. Creating products controller and first product.mp4

24:23

27. Configure multer and create cloudinary account.mp4

10:50

28. Upload images to cloudinary.mp4

32:24

29. Update, save and unsave products controllers.mp4

14:46

30. Fetch free products controller.mp4

05:49

31. Fetch paid products controller.mp4

04:53

32. Fetch tiktok, facebook and google products.mp4

13:02

33. Fetch single product controller.mp4

10:55

34. Update a product controller.mp4

11:55

35. Delete a product, Delete all and finishing up the backend.mp4

20:03

4. Redux and Redux-Toolkit In-depth

1.1 Understanding Redux and Redux Toolkit.pdf

1. What is Redux and Redux Toolkit.mp4

31:28

2. Creating our Redux Toolkit project.mp4

26:53

3. Creating redux store and counter slice.mp4

31:20

4. CreateAsyncThunk and fetching data from API.mp4

33:04

5. Frontend Web Development

1. Creating the react app.mp4

09:20

2. Installing TailwindCSS and importing Google fonts.mp4

10:43

3. Installing the dependencies.mp4

10:04

4. Excplaining the dependencies wee installed.mp4

22:48

5. Creating the Redux store.mp4

20:23

6. Register user and Utilities folder.mp4

14:54

7.1 Register.zip

7. Register Component part 1.mp4

24:25

8. Register component part 2.mp4

34:59

9. Login a user.mp4

13:00

10.1 Login.zip

10. Login Component part 1.mp4

16:44

11. Login component part 2.mp4

09:45

12. Logout a user.mp4

19:05

13. Fetch user Details.mp4

15:01

14. Save a product like.mp4

10:26

15. Unsave a product dislike.mp4

09:17

16. Get subscription prices from stripe.mp4

12:10

17. Send email Action and Controller.mp4

44:05

18. Stripe checkout sessionwindow creation.mp4

13:32

19. Update stripe subscription after successfull payment.mp4

26:03

20. Customer portal window access.mp4

08:35

21. Fetch all users.mp4

08:35

22. Update user password.mp4

09:51

23. Send password reset url to email.mp4

09:42

24. Reset password after clikcing Reset Link.mp4

09:23

25. Send verification url link.mp4

08:27

26. Verify account after clikcing verification link.mp4

10:20

27. Update user field.mp4

10:32

28. Subscription update after cancel.mp4

12:30

29. Subscription update after renewal.mp4

21:02

30. Create products slice and Create product action.mp4

29:55

31. Fetch all products.mp4

06:05

32. Fetch free and paid products.mp4

08:21

33. Fetch tiktok, facebook and google ads products.mp4

09:39

34. Fetch single product and free products.mp4

10:04

35. Update product fields.mp4

20:51

36. Delete single and all products.mp4

15:14

37.1 Navbar.zip

37. Navbar part 1.mp4

31:17

38.1 Ternary operator documentation.html

38. Navbar part 2.mp4

33:56

39.1 Homepage.zip

39. Homepage component.mp4

17:09

40.1 WhatWeeOffer.zip

40. What wee offer component and navbar fix.mp4

06:51

41.1 Stats.zip

41. Stats component.mp4

04:42

42. Pricing component part 1.mp4

19:24

43. Pricing component part 2.mp4

17:15

44.1 faq, guarantee, reviews components.zip

44. FAQ, Guarantee, Reviews components.mp4

08:00

45.1 Footer.zip

45. Footer component.mp4

10:06

46.1 about and calltoaction components.zip

46. About page.mp4

11:45

47.1 Pricing.zip

47. Pricing Page and Navbar fix.mp4

14:46

48.1 Features.zip

48. Features page.mp4

09:51

49.1 Contact.zip

49. Contact page.mp4

19:08

50.1 ProductsFree.zip

50. Free products page.mp4

28:08

51.1 productDetailsComponents.zip

51.2 ProductDetailsFree.zip

51. Free product details page.mp4

57:51

52.1 CreateProduct.zip

52. Create product page.mp4

51:30

53.1 PaidProducts.zip

53. Premium product page.mp4

40:52

54.1 ProdDetails.zip

54. Premium product details page.mp4

37:30

55.1 Profile.zip

55. Profile page.mp4

42:14

56.1 SavedProducts.zip

56. Save product page.mp4

25:29

57.1 ChnagePassword.zip

57. Change password.mp4

17:46

58.1 ResetPasswordNew.zip

58.2 ResetPasswordSend.zip

58. Reset Password.mp4

44:22

59.1 VerifyEmail.zip

59. Verify account.mp4

14:40

60.1 legalpages.zip

60. Legal Pages.mp4

04:43

61.1 stripepages.zip

61. Stripe success and cancel pages.mp4

19:12

6. Website Fixes

1. Cookie fix and auto logout.mp4

02:07

7. Deployment

1.1 vercel.zip

1. Deploy the backend on Vercel.mp4

08:24

2.1 redirects.zip

2. Deploy the frontend on Netlify.mp4

17:43

Description

Learn the MERN stack in-depth and complete, nothing is left out! Build a production ready Ecommerce SaaS Website!

What You'll Learn?

Create a backend that is connected to MongoDB Database and start a backend server
Create user authentication with password hashing and a detailed user model with the ability to store cookies
Upload images and video to the cloud and integrate them into our database for later access
Be able to verify emails and send reset emails with hashed tokens just like the big real world websites
Integrate Stripe payments, create checkout window hosted by stripe, manage user subscriptions and update user roles to the database
Get the big picture overview on how a big website backend works and how its all connected
Make requests to our database and update or delete user or product details in real time
Know how to structure and code a solid fullstack website backend
Master Redux toolkit and all of its functionality in a real world excample website
Use your won API that you created and access it from the cloud after deployment

Who is this for?

Beginer Web Developers

Intermediate Web Developers

What You Need to Know?

Simple knowledge of React and basics of javascript, can be a beginer also, no problem at all, every line of code is excplained

More details

Description
In this course you will not only learn but Master the MERNÂ Stack and all the technologies that go along with it in a fun way that is focused on doing and learning, meaning you will code up with me a production-ready software as a service website and deploy it on the web in the end. This way you will learn how it is done from the beginning to the end not leaving anything out, and I will also explain every single line of code and not leave anything unexplained so that you can build anything you want after finishing this course! So this course is aimed at beginners and also for advanced developers because firstly everything is explained. A total beginner can jump right in and not feel overwhelmed and also an advanced developer can harden his skills with this course because it features a lot of advanced topics, technologies, and blocks of logic that you will not find anywhere else on Udemy or on any other course because this goes in-depth and not just surface level! So with that said I'm excited to see you inside and learn together while building an awesome Fullstasck Website that will impress any employer or developer alike.
Who this course is for:
Beginer Web Developers
Intermediate Web Developers

User Reviews

Rating

average 0

Total votes0

Focused display

Hello, my name is Djumali, and I'm a MERN Stack Web Development Instructor. I'm a self-taught programer and my goal is to teach the best and most reliable way to learn coding and how to remember the technologies that are present. Im from Switzerland and I love to code and the outdoors.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.