arrow_back
Course Introduction & Resources
Course Introduction
Resources [Important]
React Basics & Setup
React Introduction
Environment Setup
Create React App
React Behind The Scene
React Boilerplate/005
Components: Class & Function Based / 006
JSX: In-depth Introduction / 007
Practice: Basic Template Structure / 008
States and useState
Why We Need States?/009
State Introduction: useState/010
useState: Multiple Updates / 011
useState: Array State Value / 012
useState: Array setState Value / 013
Conditional Templates / 014
Quick Hook Advice / 015
Components & Props
Multiple Components & Fragments / 016
Props: In-depth Introduction / 017
Props: Children / 018
Prop Drilling / 019
Styling React Application
Global Level Styling/020
Component Level Styling/021
Inline Level Styling/022
Dynamic Level Styling/023
Module Level Styling/024
User Input, Events & useRef
Forms & Input / 025
onChange Event / 026
Controlled Inputs / 027
onSubmit Event / 028
Add New Task / 029
useRef Hook / 030
useEffects, useCallback and Custom Hooks
JSON Server / 031
useEffect Hook / 032
React StrictMode
List Output/035
onClick Event/036
useCallback Hook / 037
Custom Hook (useFetch) / 038
Loading State / 039
Handling Errors (try/catch) / 040
Aborting Fetch Request / 041
Infinite Loops / 042
Project: TaskMate
TaskMate Demo
Project Structure
Components / 045
State: tasklist & setTasklist / 046
Function: Edit & Delete / 047
Warning: Undefined Value / 048
Update Button / 049
Local Storage: Store All Tasks / 050
Theme: Change Background / 051
Project Deployment
React Router
React Router Introduction/053
React Router Setup/054
Project Structure/055
Navigation/056
Route Parameters/057
No Route Found/058
Nested Routes/059
Project Restructuring/060
Tailwind CSS Crash Course
Introduction & Demo
Common Properties
Hover, Focus, and Other States
Responsive Design
Dark Mode
Custom Configuration/206
Project Demo/207
Header & Hero Section/ 208
Footer / 209
Responsive Screen & Component Tools / 210
Movie API Project: Cinemate
Cinemate Demo
Project Setup
Tailwind Introduction/063
TMDB API: Documentation / 064
UI Design (Tailwind & Flowbite) / 065
Navigation Structure
Dark Mode Integration/067
Movie List Structure/068
API Fetch: Movie List / 069
Custom Hook: useFetch / 070
API Fetch: Movie Search / 071
Tailwind CSS Customization/072
Page Not Found/073
Individual Movie Information/074
Scroll Restoration: Scroll To Top / 075
Dynamic Page Title/076
Style Update/077
Project Deployment/078
Development Branch On Git & Github
Solved: Netlify Error / 079
Assignment: Shopping Cart
Assignment Statement & Demo / 080
Solution: Project Setup
Solution: Components / 082
Solution: Pages / 083
Assignment Deployment
Context & Reducers Project: Shopping Cart
Global State Management
Project Structure / 086
Context / 087
Reducer / 088
Methods / 089
Project Deployment / 090
Redux Project: Shopping Cart
Redux Introduction
Project Structure/091
Slice & Action / 092
Reducers: Add & Remove / 093
Redux Store State/094
Project Deployment/095
E-Commerce Project: Codebook
Codebook Demo/097
Installations/098
Project Structure/099
Header Component - I / 100
Header Component - II / 101
Home Page / 102
Products Page / 103
API: Product List / 104
Rating Component / 105
Individual Product Component / 106
Dark Mode / 107
ScrollToTop Component / 108
Product Search / 109
Dynamic Title / 110
Filter: Context & Reducers / 111
Filter: Initial Product List / 112
Filter: Properties / 113
Clear Filter / 114
Dropdown Option / 115
User Account & Cart
Login & Registration Page / 118
React-Toastify / 119
API: Login/Register End Point / 120
Session Storage / 121
Toggle Dropdown (Hide) / 122
Cart Interface / 123
Cart: Context & Reducers / 124
Cart: Provider / 125
Add To Cart / 126
Condition Check: Already In Cart / 127
Out Of Stock Products / 128
Protected Routes/129
Checkout Modal/130
Undefined Value Warning/131
Order Submit Function/132
Order Page/133
Dashboard: Condition 1 / 134
Dashboard: Condition 2 / 135
Auth Service: API End Points / 136
Data Service: API End Points / 137
Product Service: API End Points / 138
Page Not Found / 139
Dynamic Page Title/140
Error Handling/141
ENV/142
Frontend Deployment/143
Backend Deployment/144
Update Environment Variables/145
Login As Guest
Solved: Netlify Errors / 147
Assignment: Word Counter
Statement & Demo / 157
Solution: WordCount / 158
React Testing Library & Jest
Testing Introduction / 148
React Testing Library & Jest / 149
Project Setup
Testing Structure/151
Test: Component Rendering / 152
Test: Fire Events & User Events / 153
Queries, Type, Expect & More / 154
Test: API Async Loading / 155
Test: Page Component Wrapper / 156
Firebase Crash Course
Firebase Introduction
Webpack Setup / 252
Firebase Setup / 253
Firebase Connection / 254
Fetching Documents - I / 255
Fetching Documents- II / 256
Adding & Deleting Documents / 257
Snapshots / 258
Firestore Queries / 259
Ordering Data / 260
Updating Documents / 261
Fetching Individual Document / 262
Authentication - I / 263
Authentication - II / 264
Blog Project: WriteNode
WriteNode Demo/159
Project Structure/160
Project Styling/161
Homepage/162
Firebase Setup/163
Firebase Configuration/164
Conditional Auth Header/165
Create Blog Post/167
Error: Object Fetch / 168
Toggle Update/169
Dynamic Page Title
React Loading Skeleton
Project Deployment/172
Bonus
Bonus