React TypeScript - Build eCommerce Project (Redux, TanStack)

Focused View

22:58:59

0 View

1 - Introduction

1 -Introduction.mp4

04:50

2 -Whatll you learn in this course.mp4

02:41

3 -NOTE - Before you enroll this course.mp4

01:15

2 - TypeScript & React TypeScript

1 -Section Overview.mp4

02:14

2 -Primitive data types.mp4

04:23

3 -Any type.mp4

02:10

4 -Union type.mp4

02:14

5 -Array.mp4

03:54

6 -Array part 2.mp4

02:08

7 -Object.mp4

05:43

8 -Function.mp4

07:19

9 -Function with object parameters.mp4

04:55

10 -Custom type.mp4

02:31

11 -Custom type - part 2.mp4

04:33

12 -Interface.mp4

04:04

13 -Generic.mp4

07:41

3 - Big Project Time - Setup

1 -Create project using VITE.mp4

06:09

2 -Setup folder structure for project.mp4

04:04

3 -Setup react router dom.mp4

07:41

4 -Setting up Nested Route.mp4

06:54

5 -How nested route work (Explain Detail).mp4

03:16

6 -Setup Material UI (MUI).mp4

08:57

7 -Setup absolute import statement.mp4

09:30

4 - Setup Backend

1 -Setup backend project.mp4

11:22

1 - IMPORTANT (DO NOT SKIP).html

2 -Setup API Layer with axios.mp4

09:28

5 - Feature Authentication JWT

1 -Local storage vs Cookie.mp4

05:08

2 -Setup (Fast) Sign Un Component.mp4

15:12

3 -Setup Sign In Component.mp4

08:46

4 -Validate Field with Controlled Component.mp4

23:09

5 -Validate Field with React Hook Form.mp4

16:00

6 -Schema validation with yup.mp4

11:31

7 -Setup toastify by hand.mp4

10:09

8 -Setup toastify part 2.mp4

12:11

9 -Setup redux for toastify.mp4

22:31

10 -Moving Toast component.mp4

04:29

11 -Signup API handle.mp4

11:46

12 -Setup tanstack react query.mp4

06:36

13 -Mutate sign up api with react query.mp4

11:12

14 -Setup redux for user state.mp4

24:13

15 -Get current user handle.mp4

13:36

16 -Create a custom hook for react query.mp4

11:38

17 -Excercise Sign In Functionality.mp4

02:59

18 -Sign In Functionality.mp4

18:59

19 -Redirect if NOT authenticated.mp4

13:13

20 -Custom hook for authenticate.mp4

03:26

21 -Create admin dashboard.mp4

12:18

22 -Header & Logout.mp4

11:53

22 - fix useAuthenticate hook.html

23 -Header Admin & Sidebar.mp4

12:47

6 - Feature Category Management

1 -Sidebar data.mp4

08:25

2 -Setup category component.mp4

07:17

3 -Add category modal.mp4

08:13

4 -useQuery to render category list.mp4

22:06

5 -Add category.mp4

17:11

6 -Show Icon on Form.mp4

14:19

7 -Invalidate category data.mp4

05:50

8 -Delete category modal.mp4

16:24

9 -Call API to Delete a category with useMutation.mp4

07:45

10 -Update form & share data.mp4

15:58

11 -Handle Update with API.mp4

21:38

12 -Category wrap up.mp4

04:38

7 - Feature Product Management

1 -Setup product page.mp4

02:53

2 -Setup data grid & How to find example.mp4

06:05

3 -Render product list to data grid.mp4

14:38

4 -Create product modal.mp4

10:33

5 -Handle preview image.mp4

16:42

6 -Select category.mp4

04:55

7 -Product form validation.mp4

15:54

8 -Show image on data grid.mp4

09:07

9 -Change category id to category name.mp4

04:51

10 -Render actions.mp4

06:24

11 -Delete Modal Confirm & Reuse Component.mp4

21:04

12 -Update product - binding data.mp4

20:35

13 -Update product - handle API.mp4

11:27

14 -Product - wrap up.mp4

05:00

8 - Feature Product Galleries Management

1 -Setup product galleries page.mp4

07:07

2 -Setup UI component.mp4

08:00

3 -Fix UI & Change Column.mp4

08:39

4 -Render galleries.mp4

15:16

5 -Upload mutiple images.mp4

28:24

6 -Delete image.mp4

12:57

7 -Gallery warp up.mp4

04:01

9 - Feature Product (User)

1 -Setup product page.mp4

17:06

2 -Product card component.mp4

09:10

3 -Render product.mp4

08:20

4 -Setup pagination (server side).mp4

14:54

5 -Sync page to url.mp4

06:46

6 -Price slider default.mp4

07:20

7 -Sync filter price to url.mp4

23:33

8 -Setup product detail page.mp4

21:22

9 -Show image with carousel.mp4

15:46

10 -Separate components.mp4

05:24

11 -Search products.mp4

19:18

10 - Feature Cart

1 -Add product to cart - build data.mp4

09:22

2 -Add product to cart - handle API.mp4

07:30

3 -Setup cart page.mp4

05:51

4 -Setup cart table & total price.mp4

07:52

5 -Render cart items.mp4

18:11

6 -Clear cart item.mp4

10:04

11 - Feature Profile

1 -Setup profile page.mp4

04:42

2 -Profile Tabs.mp4

08:45

3 -Setup fields for Profile Tabs.mp4

07:59

4 -Profile info validation.mp4

07:49

5 -Update profile information.mp4

26:05

6 -Change password.mp4

17:06

7 -Adding address.mp4

24:41

8 -Delete address.mp4

09:52

12 - Feature Order

1 -Global quantity on header.mp4

04:14

2 -Overview order API.mp4

08:57

3 -Checkout processing.mp4

27:06

4 -Setup my orders page.mp4

05:42

5 -Get my orders.mp4

18:01

6 -Fix column.mp4

10:58

7 -Fix JSON bug.mp4

04:48

8 -Setup order detail page.mp4

08:07

9 -Get order items.mp4

15:21

13 - Feature Review

1 -Setup review component.mp4

15:13

2 -Get product review.mp4

07:29

3 -Review product.mp4

23:03

14 - Feature Order Management

1 -Setup orders admin page.mp4

05:49

2 -Render all orders.mp4

05:08

3 -Update order status.mp4

20:00

4 -Fix UI.mp4

01:57

15 - Feature Coupon

1 -Setup coupon page.mp4

06:59

2 -Coupon table.mp4

09:55

3 -Create coupon form & validation.mp4

10:59

4 -Create coupon - handle API.mp4

11:52

5 -Delete coupon.mp4

23:03

6 -Apply coupon.mp4

06:49

16 - Global loading & error

1 -ProgressBar loading.mp4

06:46

2 -Global error & success.mp4

08:01

Description

Build and Scale a Modern eCommerce Platform with React, TypeScript, and Advanced State Management, React Hook Form

What You'll Learn?

Build Scalable eCommerce Applications with React and TypeScript: Gain hands-on experience in developing a full-featured eCommerce application
Implement State Management with Redux: Learn how to effectively manage application state using Redux
Utilize React Query for Data Fetching and Caching: Discover how to leverage React Query to handle data fetching, caching, and mutation
Integrate Authentication and Authorization: Understand how to implement robust authentication and authorization mechanisms, including JWT

Who is this for?

Aspiring Web Developers: Individuals looking to expand their skill set and build a strong foundation in React and TypeScript

Have basic knowledge of ReactJS but want to learn how to combine React and TypeScript

Want to improve React and TypeScript skills

Incorporate Redux and React Query into the project

Learn research and debugging skills

What You Need to Know?

Basic React knowledge is require (useState, useEffect)

No knowledge of Typescript is necessary

More details

Description
Don't waste your time on building a beautiful user interface, focus on React skills
In this course, you wonâ€™t just learn how to write React codeâ€”youâ€™ll learn the essential skills every developer needs to thrive in the real world. Instead of spoon-feeding you syntax thatâ€™s quickly forgotten, Iâ€™ll show you how to think like a developer: how to research effectively, read and understand documentation, and troubleshoot bugs when things go wrong.
You wonâ€™t memorize solutionsâ€”youâ€™ll learn where to find them. From understanding official docs to leveraging the power of the community, this course equips you with the tools to solve problems independently and grow your expertise.

Why Focus on Documentation?
In the fast-evolving world of frontend development, syntax and best practices are continually changing. Instead of simply memorizing code that might become outdated, this course emphasizes the importance of knowing how to navigate and utilize documentation. By teaching you how to find and interpret relevant resources, Iâ€™ll ensure you stay adaptable and up-to-date, no matter how the technology evolves.
Master the art of finding answers and staying current with industry changesâ€”skills that will serve you well throughout your development career.
By the end of this course, you'll not only have built an eCommerce application, but you'll also have the confidence to tackle new challenges, knowing how to find answers and overcome obstacles like a pro.

Note Before You Enroll
This course is not for you if you are interested in building a beautiful user interface. Instead, if your goal is to learn React, TypeScript, and essential development skills while building a functional eCommerce application, youâ€™re in the right place. We focus on honing your coding skills, understanding documentation, and solving real-world problems, rather than on UI design.
If youâ€™re ready to enhance your development skills and tackle practical challenges, join us in this focused, hands-on learning experience.

What You Will Learn:
React &Â TypeScript Basic: Gain hands-on experience with React &Â TypeScript features, including components, hooks. Learn to build dynamic and interactive user interfaces efficiently.
TypeScript Integration: Understand how to leverage TypeScript to enhance your React projects, ensuring type safety and improving code maintainability.
State Management with Redux: Delve into Redux to manage application state effectively. Learn to handle complex state logic and integrate Redux seamlessly with React.
Data Fetching with React Query: Utilize React Query for advanced data handling, including fetching, caching, and synchronizing data. Enhance your application's performance and user experience.
Authentication: Implement basic user authentication and authorization with JWT to secure your application and manage user access.
Form Validation:Â React Hook Form

Who Should Take This Course:
This course is ideal for developers who want to concentrate on sharpening their React skills without getting distracted by design details. Itâ€™s perfect for those who already have a basic understanding of React and TypeScript and are eager to build a practical, functional project.
Why Choose This Course:
Focus on what really mattersâ€”developing your React expertise and building a solid, functional eCommerce application. Skip the fluff and get straight to mastering the skills that will make you a proficient React developer.
Start building your React skills today!
Who this course is for:
Aspiring Web Developers: Individuals looking to expand their skill set and build a strong foundation in React and TypeScript
Have basic knowledge of ReactJS but want to learn how to combine React and TypeScript
Want to improve React and TypeScript skills
Incorporate Redux and React Query into the project
Learn research and debugging skills

User Reviews

Rating

average 0

Total votes0

Focused display

React

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.