Build a web-shop in React MERN Full Stack [2024 Update]
- Description
- Curriculum
- FAQ
- Reviews
Major upgrade including now Google Auth, password reset, pagination, email verification, credit card checkout using Stripe and many more.
Hello and welcome to my course. This is a beginner’s course for building modern web applications. This is the right course for you if you are:
– Interested in web development
– Studying IT
– Interested in programming in general
– Upskilling your existing knowledge of React
– Interested how full-stack applications are build
– Solid understanding of programming and want to start with React/JavaScript
– Interested in Chakra UI.
– You are new to the world of IT and you want to start somewhere
What will you learn?
– React and React hooks
– Functional components
– State management with ReduxJs Toolkit
– Using a component library such as Chakra UI
– Styling and designing webpages
– Responsive design
– User registration and authentication (login)
– Writing an API and storing data to a database.
– Using MongoDB
– Using NodeJS
– Using Express
– Version control using Git with Github
– And many more…
This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project. If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.
On this course we will build an example e-commerce shop called Techlines, completely from scratch using the most popular JavaScript library called React in combination with Redux, Chakra UI, NodeJs, Express, MongoDB and many more. All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application.
-
17Chapter One - Intro
-
18Cleaning Up Client Directory
-
19Getting Started With Chakra UI
-
20First Chakra UI Box
-
21Product Cart Part 1
-
22Product Card Part 2
-
23Product Card Part 3
-
24Product Card Part 4
-
25Product Card Part 5
-
26Concurrently
-
27Bable Plugin Warning Fix
-
28Redux Intro
-
29Redux Store
-
30Products Slice
-
31Product Actions
-
32Redux Devtools
-
33Dispatchers & Selectors
-
34Handling Images & Loading
-
35Pushing Our Code To Github
-
36Checkout My Branch
-
37Intro
-
38Get Products Refinement To Allow Pagination
-
39Redux Slices For Favorites
-
40Products Actions For Pagination
-
41Product Actions Continued
-
42Header Initialization
-
43React Router Initialization
-
44Product Card Add & Remove Favorite
-
45Fixing Icon Heart In Header
-
46Pagination & Favorites On ProductsScreen
-
47Pushing Our Code To Github
-
48Checkout My Code
-
49Intro
-
50Get Product By Id Route
-
51Set Product Actions
-
52Get Product Actions
-
53Product Screen & Landing Screen Route
-
54Landing Screen
-
55ProductsScreen refinement
-
56Toggle Color Mode Component
-
57NavLink Component
-
58Header Part 1
-
59Header Part 2
-
60Header Part 3
-
61Header Part 4
-
62Product Card Route
-
63StarIcon
-
64Product Screen Part 1
-
65Product Screen Part 2
-
66Product Screen Part 3
-
67Product Screen Part 4
-
68Reviews Schema
-
69Pushing Our Code To Github
-
70Checkout My Branch If You Are Stuck
-
71Intro
-
72Initialize CartScreen & Footer
-
73Cart Slice Part 1
-
74Cart Slice Part 2
-
75Cart Actions
-
76Cart Icon In Header
-
77Product Card Add Cart Functionality
-
78Cart Screen Structure
-
79Cart Screen Structure Continued
-
80Order Summary Component
-
81CartItem Component
-
82Footer Part 1
-
83Footer Part 2
-
84Pushing Our Work To Github