React Typescript - Build Ecommerce Project

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

Requirements

Basic React knowledge is require (useState, useEffect)

No knowledge of Typescript is necessary

Description

Don't waste your time on building a beautiful user interface, focus on React skillsIn 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 EnrollThis 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 FormWho 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!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What'll you learn in this course?

Lecture 3 NOTE - Before you enroll this course

Section 2: TypeScript & React TypeScript

Lecture 4 Section Overview

Lecture 5 Primitive data types

Lecture 6 Any type

Lecture 7 Union type

Lecture 8 Array

Lecture 9 Array part 2

Lecture 10 Object

Lecture 11 Function

Lecture 12 Function with object parameters

Lecture 13 Custom type

Lecture 14 Custom type - part 2

Lecture 15 Interface

Lecture 16 Generic

Section 3: Big Project Time - Setup

Lecture 17 Create project using VITE

Lecture 18 Setup folder structure for project

Lecture 19 Setup react router dom

Lecture 20 Setting up Nested Route

Lecture 21 How nested route work ? (Explain Detail)

Lecture 22 Setup Material UI (MUI)

Lecture 23 Setup absolute import statement

Section 4: Setup Backend

Lecture 24 IMPORTANT (DO NOT SKIP)

Lecture 25 Setup backend project

Lecture 26 Setup API Layer with axios

Section 5: Feature: Authentication JWT

Lecture 27 Local storage vs Cookie

Lecture 28 Setup (Fast) Sign Un Component

Lecture 29 Setup Sign In Component

Lecture 30 Validate Field with Controlled Component

Lecture 31 Validate Field with React Hook Form

Lecture 32 Schema validation with yup

Lecture 33 Setup toastify by hand…

Lecture 34 Setup toastify part 2

Lecture 35 Setup redux for toastify

Lecture 36 Moving Toast component

Lecture 37 Signup API handle

Lecture 38 Setup tanstack react query

Lecture 39 Mutate sign up api with react query

Lecture 40 Setup redux for user state

Lecture 41 Get current user handle

Lecture 42 Create a custom hook for react query

Lecture 43 Excercise: Sign In Functionality

Lecture 44 Sign In Functionality

Lecture 45 Redirect if NOT authenticated

Lecture 46 Custom hook for authenticate

Lecture 47 Create admin dashboard

Lecture 48 fix useAuthenticate hook

Lecture 49 Header & Logout

Lecture 50 Header Admin & Sidebar

Section 6: Feature: Category Management

Lecture 51 Sidebar data

Lecture 52 Setup category component

Lecture 53 Add category modal

Lecture 54 useQuery to render category list

Lecture 55 Add category

Lecture 56 Show Icon on Form

Lecture 57 Invalidate category data

Lecture 58 Delete category modal

Lecture 59 Call API to Delete a category with useMutation

Lecture 60 Update form & share data

Lecture 61 Handle Update with API

Lecture 62 Category wrap up

Section 7: Feature: Product Management

Lecture 63 Setup product page

Lecture 64 Setup data grid & How to find example

Lecture 65 Render product list to data grid

Lecture 66 Create product modal

Lecture 67 Handle preview image

Lecture 68 Select category

Lecture 69 Product form validation

Lecture 70 Show image on data grid

Lecture 71 Change category id to category name

Lecture 72 Render actions

Lecture 73 Delete Modal Confirm & Reuse Component

Lecture 74 Update product - binding data

Lecture 75 Update product - handle API

Lecture 76 Product - wrap up

Section 8: Feature: Product Galleries Management

Lecture 77 Setup product galleries page

Lecture 78 Setup UI component

Lecture 79 Fix UI & Change Column

Lecture 80 Render galleries

Lecture 81 Upload mutiple images

Lecture 82 Delete image

Lecture 83 Gallery warp up

Section 9: Feature: Product (User)

Lecture 84 Setup product page

Lecture 85 Product card component

Lecture 86 Render product

Lecture 87 Setup pagination (server side)

Lecture 88 Sync page to url

Lecture 89 Price slider default

Lecture 90 Sync filter price to url

Lecture 91 Setup product detail page

Lecture 92 Show image with carousel

Lecture 93 Separate components

Lecture 94 Search products

Section 10: Feature: Cart

Lecture 95 Add product to cart - build data

Lecture 96 Add product to cart - handle API

Lecture 97 Setup cart page

Lecture 98 Setup cart table & total price

Lecture 99 Render cart items

Lecture 100 Clear cart item

Section 11: Feature: Profile

Lecture 101 Setup profile page

Lecture 102 Profile Tabs

Lecture 103 Setup fields for Profile Tabs

Lecture 104 Profile info validation

Lecture 105 Update profile information

Lecture 106 Change password

Lecture 107 Adding address

Lecture 108 Delete address

Section 12: Feature: Order

Lecture 109 Global quantity on header

Lecture 110 Overview order API

Lecture 111 Checkout processing

Lecture 112 Setup my orders page

Lecture 113 Get my orders

Lecture 114 Fix column

Lecture 115 Fix JSON bug

Lecture 116 Setup order detail page

Lecture 117 Get order items

Section 13: Feature: Review

Lecture 118 Setup review component

Lecture 119 Get product review

Lecture 120 Review product

Section 14: Feature: Order Management

Lecture 121 Setup order's admin page

Lecture 122 Render all orders

Lecture 123 Update order status

Lecture 124 Fix UI

Section 15: Feature: Coupon

Lecture 125 Setup coupon page

Lecture 126 Coupon table

Lecture 127 Create coupon form & validation

Lecture 128 Create coupon - handle API

Lecture 129 Delete coupon

Lecture 130 Apply coupon

Section 16: Global loading & error

Lecture 131 ProgressBar loading

Lecture 132 Global error & success

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