Course Introduction

04:58

React History - Milestone

02:48

What is React RC & Latest React version

01:56

IQ - What is React RC & Latest React version

00:54

Creating first project - React 19

02:09

IQ - Creating first project - React 19

04:39

Understanding Project Structure

03:48

IQ - Understanding Project Structure

05:45

Creating Project with TypeScript

03:01

IQ - Creating Project with TypeScript

03:06

Creating project in NextJS

03:45

Creating project in Remix

03:19

IQ - Project with TypeScript and Remix

01:43

Creating component from scratch

04:17

IQ - Creating component from scratch

03:25

Creating Product Card

05:13

IQ - Creating Product Card

01:15

Render Dynamic values from an Object

02:19

IQ - Render Dynamic values from an Object

00:52

Render Dynamic values from an Array

02:06

Concept of Key attribute in Map()

02:30

IQ - Rendering Dynamics Values from Array and Key attribute

02:18

React Fragment & Empty Fragment

03:41

IQ - React Fragment & Empty Fragment

02:55

Default vs Named Export

03:59

IQ - Default vs Named Export

01:23

The Rules of JSX

02:37

IQ - The Rules of JSX

01:23

Assigning JSX to variable

01:42

IQ - Assigning JSX to variable

01:15

Understanding Props

03:48

IQ - Understanding Props

01:42

Making Product Component Dynamic using Props

01:44

Conditional rendering

04:54

IQ - Conditional rendering

01:37

Basic Event Handling - click

03:18

IQ - Basic Event Handling - click

01:47

Parameter Passing

01:44

IQ - Parameter Passing

01:31

Task 1- Create a Dynamic Employee Component

06:21

Task 2 - Conditional Rendering on Employee component (isActive)

02:37

Task 3 - Calculate the Factorial value by Passing Parameter

03:17

What is the state and why needed?

02:38

IQ - What is the state and why needed

01:13

useState() hook - Understanding state creation

03:30

IQ - useState() hook - Understanding state creation

01:37

State as a Snapshot

02:50

IQ - State as a Snapshot

01:15

Updating state based on previous state

03:29

IQ - Updating state based on previous state

01:07

Working with multiple states

05:04

Initializer function - Avoiding recreation of initial state

02:51

IQ - Initializer function - Avoiding recreation of initial state

00:56

Array as state

05:29

IQ - Array as state

03:11

Object as state

03:54

IQ - Object as state

03:10

Task 1 - Initialise the State with the large Array

03:08

Task 2 - Update the Elements of the state using Updater Function

03:45

Event handling recap

03:00

React Event Object - Synthetic Event

03:43

IQ - React Event Object - Synthetic Event

02:03

Input Event - Textbox

02:40

Task 1 - Input Event - Textbox

01:31

IQ - Input Event - Textbox

00:47

Event Propogation - Bubbling

05:12

IQ - Event Propogation - Bubbling

04:33

Stopping Propogation

03:08

IQ - Stopping Propogation

02:39

preventDefault() - Preventing default behavior

03:04

IQ - preventDefault() - Preventing default behavior

01:02

<form> with Multiple States

06:02

Task 2 - <form> with Multiple States

05:32

Using Object State with <form>

03:51

Task 3 -Using Object State with <form>

03:43

Single Event Handler Using Dynamic Key

04:54

IQ - Single Event Handler Using Dynamic Key

02:02

Task - Single Event Handler Using Dynamic Key

02:17

Functional Update - The correct way

01:28

Input Fields - Checkbox

02:55

Input Fields - Radio Button

05:33

Task - Input Fields - Radio Button

02:46

IQ - Input Fields - Checkbox & Input Fields - Radio Button

02:17

Task - Form Handling using Textbox, Checkbox & Radio Buttons

07:48

Event Handling - onFocus Event

02:41

Event Handling - onBlur Event

01:49

Task - Event Handling - onFocus & onBlur event

03:28

Event Handling - onKeyUp & onKeyDown event

03:08

IQ - Event Handling - onKeyUp & onKeyDown event

00:54

Event Handling - onMouseEnter & onMouseLeave event

02:31

Task - Event Handling - onMouseEnter & onMouseLeave event

03:42

IQ - Event Handling - onMouseEnter & onMouseLeave event

02:59

Introduction

02:01

Project Creation

02:30

Project Setup with Tailwind CSS and Header Creation

04:42

Creating Product Card Component

04:26

Rendering Product List with Static Data

02:23

Creating Add Product Modal

07:36

Creating Form for Add Product

03:06

Storing the Values of the Add Product Form

03:44

Implementing Add Product Functionality

04:35

Implementing Delete Functionality

04:03

Setting Up Edit Product Form

06:03

Implementing Edit Product Functionality

05:58

Implementing Active/Inactive Product Functionality

04:07

Rendering Active/Inactive Products

02:49

Understanding Component Life Cycle

10:03

IQ - Understanding Component Life Cycle

03:49

Introduction to useEffect Hook

02:58

Using Simple useEffect() Hook

03:22

IQ - Using Simple useEffect() Hook

01:28

useEffect() - Importance of the Dependency Array

05:24

IQ - useEffect() - Importance of the Dependency Array

01:12

useEffect() - Cleanup Function

08:50

IQ - useEffect() - Cleanup Function

03:20

The Right Place to Call the useEffect() Hook

02:36

When to Avoid using the useEffect Hook in React

03:05

Understanding React Strict Mode's Extra Setup and Cleanup Cycle

05:03

useEffect() hook - Managing Dependencies

03:08

useEffect() Vs DOM Updates - Need of UseLayoutEffect()

05:40

Deferring Effects Triggered by Interactions in React

03:12

Understanding of useEffect only runs on Client Side

05:03

Introduction to Routing

05:42

Understanding Routing in React

05:34

Configure Routes using React Router

04:25

IQ - Configure Routes using React Router

02:10

Understanding Single-page Application and Multi-page Application

04:30

IQ - Understanding Single-page Application and Multi-page Application

03:42

Navbar Creation on Root Route

02:18

Creating Products Page

05:35

Not Found Page (404)

02:26

IQ - Not Found Page (404)

03:06

Understanding Nested Routes

05:29

Dynamically Handling Nested Routes - Route Parameter

08:37

IQ - Dynamically Handling Nested Routes - Route Parameter

01:42

Layouts - <Outlet />

06:11

IQ - Layouts - <Outlet />

01:51

"index" Attribute - Referring the Parent Route

06:03

IQ - "index" Attribute - Referring the Parent Route

00:55

Use Navbar as a Layout

00:55

Passing Data to Child Component - context & useOutletContext() hook

04:21

Passing Data to Child Component - "state" and useLocation() hook

02:53

IQ - Passing Data to Child Component - context & useOutletContext() hook AND Passing Data to Child Component - "state" and useLocation() hook

01:33

Creating Product Details Card

05:15

Understanding the "useRoutes()" hook

05:49

IQ - Understanding the "useRoutes()" hook

01:55

Understanding <NavLink> Component

05:55

IQ - Understanding <NavLink> Component

01:30

<Navigate> Component for Redirection

02:30

"useNavigate()" - Correct Way to Redirect

06:20

IQ - <Navigate> Component for Redirection & "useNavigate()" - Correct Way to Redirect

01:53

Project Restructuring

05:12

Interface Improvement

06:00

Prop Drilling

04:08

IQ - Prop Drilling

01:41

Understanding of Context API

08:06

IQ - Understanding of Context API

02:15

useContext() Hook

01:55

IQ - useContext() Hook

00:40

Creating Interface for Calculator App

07:11

Setup Context API into Calculator App

05:32

Handling Input Data in the Global State

04:20

Global State Manipulation

04:25

IQ - Global State Manipulation

00:42

Nested Context Providers

06:40

Introduction to Redux and RTK

05:45

IQ - Introduction to Redux and RTK

02:18

Creating Slice

02:40

IQ - Creating Slice

01:03

Configuring Store

03:56

IQ - Configuring Store

02:04

Fetching the Store Data - useSelector()

03:30

IQ - Fetching the Store Data - useSelector()

00:35

Creating Actions in Slice

04:39

IQ - Creating Actions in Slice

01:52

How immutability in actions works behind the scenes

03:08

IQ - How immutability in actions works behind the scenes

01:30

Handling Input values in the Redux

07:38

Calculating Arithmetic Operations in Redux

03:49

Implementing Redux in React Router App

06:26

Introduction - HTTP Requests

09:15

IQ - Introduction - HTTP Requests

04:22

Fetch() API

09:09

IQ - Fetch() API

01:36

Rendering Users Data

04:25

POST Method in fetch() API

05:47

PUT and PATCH Method in fetch() API

02:28

DELETE Method in fetch() API

01:38

Error Handling in Fetch() API

04:36

Error Handling with Try Catch() block

03:18

Introduction

03:12

IQ - Introduction

02:05

Project Creation

02:37

Creating Server using Express.js

07:00

IQ - Creating Server using Express.js

02:13

Creating Basic API

06:05

IQ - Creating Basic API

01:20

Configuring Nodemon

01:46

IQ - Configuring Nodemon

01:26

POSTMAN Installation

02:22

Making a GET Request from POSTMAN

02:27

Introduction

03:16

IQ - Introduction

01:58

MySQL Installation

08:47

Database Creation

02:19

Drop Database

01:48

DataTypes

05:35

Creating Table

03:35

IQ - Creating Table

01:46

INSERT Query

03:13

Basic Filtering with WHERE Clause

02:18

Advanced Filtering with WHERE Clause

03:15

Sorting Data with ‘LIMIT’ & ‘ORDER BY’

01:58

Updating the Data

01:39

Delete Records Using DELETE Clause

02:34

Drop Table

02:21

Connect MySQL Database in Node App

04:27

IQ - Connect MySQL Database in Node App

01:24

Fetching Products from Database

02:18

IQ - Fetching Products from Database

01:16

Configuring Organized Routes with "express.Router()"

05:02

Creating API for Adding Products

07:03

Creating API to Fetch a Unique Product

04:40

Creating API to Update Product's data

04:02

IQ - Creating API to Update Product's data

02:01

Creating API to Delete a Product

02:24

Restructuring Database Connection and Success Messages

03:57

Introduction

01:47

Fetching Products Dynamically

04:22

Rendering Products Dynamically

05:04

Integrating API in Porduct Details Page

04:23

Creating Interface for Adding Products

03:49

Implementing Add Products Form

04:51

Integrating 'Add Product' API

03:25

Implementing Edit Products Functionality

07:25

Creating Delete Confirmation Popup

08:45

Integrating Delete Product API

04:25

Introduction to custom hooks

04:31

IQ-Introduction to custom hooks

01:51

Create and Use Custom Hook

06:24

Task 1 - Create A Custom Hook For Timer

05:23

Fetching Product Details using Custom Hook

03:54

NEXT JS in spite of ReactJS

01:38

IQ - NEXT JS in spite of ReactJS

03:32

Creating First Project

04:02

IQ - Creating First Project

02:16

Project Structure

02:59

IQ - Project Structure

01:33

Pages Router Vs App Router

01:40

IQ - Pages Router Vs App Router

00:54

Defining Routes

02:53

Nested Routes

01:28

Linking Pages with <Link>

02:48

React Server Component Vs Client Component

05:18

IQ - React Server Component Vs Client Component

01:24

Error Page

03:22

Dynamic Routes and Route Params

04:34

Asynchronous Server Components

03:51

IQ - Asynchronous Server Components

01:24

Understanding Caching in Next

03:19

IQ - Understanding Caching in Next

02:23

Unexpected Behaviour in Project Build

03:21

IQ - Unexpected Behaviour in Project Build

01:35

Static to Dynamic - Cache Control

02:28

IQ - Static to Dynamic - Cache Control

01:06

useActionState() Hook

06:03

IQ - useActionState() Hook

01:47

The Magic of Memoization

03:56

IQ - Memoization

01:50

useCallback() and useMemo() Hook

05:42

IQ - useCallback() and useMemo() Hook

01:24

The useOptimistic() Hook

08:54

IQ - useOptimistic() Hook

00:36

The useFormStatus() Hook

04:09

IQ - useFormStatus() Hook

01:25

The useDebugValue() Hook

03:19

IQ - useDebugValue() Hook

02:23

Introduction

02:36

Project Creation

02:41

Creating Sidebar Component

03:34

Working on Sidebar

03:46

Combining Utility Classes with @apply

03:54

IQ - @layer & @apply - Combining Utility Classes

01:37

Styling the Sidebar

04:56

Adding Icons to the Sidebar

03:03

Creating ‘Users’ Page

05:43

Creating ‘Add Users’ Form

07:08

Implementing Component Based Architecture

06:34

Creating Button & Input Components

04:16

Refactoring Code Structure

02:40

Database Creation

02:30

Adding Users with Server Action

04:00

Implementing Hashing

03:19

IQ - Implementing Hashing

02:04

Validating User Creation

03:44

Rendering Users in the Table

05:44

Creating Edit User Page

03:33

Dynamic Default Values for Edit

02:45

Updating User Data

03:43

Deleting User

03:41

Creating Delete Confirmation Popup

04:17

Enabling Confirmation Popup

05:32

Deleting User by confirmation popup

02:24

Creating Product Type Page

04:39

Creating Add Product Type Page

03:36

Adding Product Types and Products models into the schema

03:37

IQ - Adding Models In the Schema - Product Type & Product

01:06

Adding Product Type using server action

04:26

Rendering Product Types into the Table

02:00

Creating Edit Product Type Page

03:19

Dynamic Default values for Product Type

02:33

Updating Product Type with server action

02:39

Deleting Product Type with server action

01:50

Creating Products Page

03:46

Creating Products interface for listing

04:50

Creating Add Product Page

02:57

Completing Add Products Form

02:55

Creating Switch Component

05:10

Creating File Input Component

06:17

Rendering Dynamic Product Types Data in Add Product Page

02:12

Creating Server Action for Adding Products

03:03

Implementing Image storage functionality

05:53

Completing Add Product Functionality

04:13

Rendering Dynamic Data in Products table

03:53

Creating Edit Product Page

03:13

Dynamic Default values for Product

03:44

Render Default values in Switch and File Input

02:39

Updating Product with server action

05:14

IQ - Updating Product with server action

01:39

Deleting Product with server action

02:03

Initiating Client Section

01:53

Creating Header Component

05:20

Implementing Search bar

02:16

Joining Tailwind Classes with Ideal Approach

02:34

IQ-Joining Tailwind Classes with Ideal Approach

02:38

Adding Profile Dropdown

04:31

useRef() Hook

04:42

Close Profile Dropdown menu on outside click

03:02

IQ-Close Profile Dropdown menu on outside click

02:36

Creating Input component

01:54

Creating Home Page

02:34

Creating Filters Section

06:15

Creating Custom Accordion Component

10:58

IQ-Creating Custom Accordion Component

01:37

Completing Custom Accordion Component

04:35

Continue on Filter Section

03:02

Creating Price Range Slider Component

04:39

Creating Product Card Component

08:17

Completing Product Card Component

02:47

Creating Button Component

01:44

API creation for Product listing

03:59

Dynamic Product Rendering using Server Action

07:12

API Creation For Fetching Product Types

01:41

Dynamic Product Type Rendering using API

02:28

Set Filter values into the search params

04:29

Modifying Products API to Apply Filters

05:35

Filter Functionality on client side

03:44

Search Filter Functionality

04:31

Creating the Product Page

06:38

Completing Product Page

03:21

API Creation For Fetching a Product by its ID

02:54

Dynamic Product Details Rendering using API

03:25

Rendering Products based on status

02:42

Creating Cart Page

03:24

Rendering Cart Item Card

06:22

Completing the Cart UI

04:55

Creating Context for Handling Products

01:50

IQ - Creating Context for Handling Products

01:28

Implement Cart Functionalities

08:04

Making Cart Page Dynamic

02:54

Enabling Quantity Selection

03:45

Finishing Dynamic Cart Page

05:06

Creating Login Page

05:52

Introduction of JOSE + JWT

01:53

Setup Authentication flow using JOSE + JWT

08:49

Create Server action for Login

03:13

Cookie Based Authentication

04:56

IQ - Cookie Based Authentication

01:14

Handling Private and Public routes using middleware

05:03

Fetching Authenticated User Data

03:07

Implementing Logout with Server Action

05:18

Authenticate all the Server Actions of Admin Section

02:50

Creating Authentication Routes in Client Section

03:28

Creating Interface for Authentication Routes

05:47

Creating Buyer Table in the Database

01:55

Creating Sign-up API

03:52

Testing Signup API using Postman

03:37

Creating Login API

02:56

Testing the Login API Using Postman

01:34

Implementing Signup Functionality in the Client Section

07:19

Implementing Customer Login Functionality

03:59

API to Fetch Unique Customer's data

04:18

Fetching Customer's data using API in the Client Section

05:35

Logout Functionality in the Client Section

02:08

Introduction

02:16

IQ - Introduction

02:17

Basic Configurations of Stripe

04:19

Rendering Stripe's Embedded Checkout Form

08:11

Creating Checkout Session Dynamically

06:44

Creating Payment Status Page

07:23

Creating Sales and Transaction Table in Database

04:51

API to Update Database after the Successful Checkout

06:05

Testing the Checkout API using Postman

03:57

Integrating Checkout API in the Client Section

02:55

Creating Buyer Master Section

03:18

Rendering Dynamic data in Buyers Table

02:40

Introduction

02:21

Preparing Customers and Buyers Report

03:11

Rendering Customers & Buyers Report

03:32

Preparing Total Revenue Report

02:02

Preparing Recent Order Report

07:46

Creating Purchased Products Modal

03:51

Fetching Purchased Products in Modal

01:41

Render Products in the Purchased Products table

02:24

Implementing Chart Using Recharts

05:51

Preparing Sales Report using Chart

04:42

Rendering Sales Chart with dynamic values

02:35

Preparing Customers Report using Chart

04:35

Creating Chart Section Component

01:34

Introduction

03:55

IQ - Introduction

01:41

Introduction to CI/CD

02:38

IQ - Introduction to CI/CD

01:05

Github Integration

06:04

IQ - Github integration

01:38

Database Migration from SQLite to MySQL

05:22

Link the MySQL database to Admin Application

04:22

Deploying Admin App on Vercel

07:43

Deploying Client App on Vercel

06:39