Intro
Dev Environment
React Fundamentals
-
Intro (0:58)
-
Github Repository
-
Folder Structure (8:59)
-
Remove Boilerplate (2:27)
-
First Component (10:13)
-
Extra Settings (12:53)
-
Create Element (4:31)
-
JSX Rules (9:41)
-
Nest Components (4:03)
-
React Developer Tools (2:12)
-
Booklist (10:26)
-
CSS (10:32)
-
Local Images (public folder) (7:16)
-
JSX - CSS (7:27)
-
JSX - Javascript (6:30)
-
Props - Basic Setup (9:40)
-
Props - Somewhat Dynamic Setup (4:29)
-
Props - Multiple Approaches (4:45)
-
Children Prop (6:30)
-
Simple List (8:35)
-
Proper List (6:25)
-
Key Prop (4:07)
-
Object as a Prop (5:34)
-
Event Basics (13:08)
-
Form Submission (5:50)
-
Form Submission - Button Example (3:41)
-
Anonymous Function (arrow) (3:20)
-
Components Feature (5:08)
-
Prop Drilling (5:40)
-
Complex Example - Intro (2:02)
-
Complex Example - Bug (3:42)
-
Complex Example - Fix (3:21)
-
ES6 Modules (9:58)
-
Local Images (src folder) (5:42)
-
Numbers Challenge (6:28)
-
Title Challenge (2:25)
-
Build Folder (2:33)
-
Deployment (2:46)
Backroads Application
-
Setup (0:26)
-
Intro (1:57)
-
Install (3:20)
-
SRC Boilerplate (8:14)
-
Structure (10:50)
-
Components (6:32)
-
Nav Logo (2:36)
-
Smooth Scroll (3:21)
-
Page Links (7:34)
-
Social Links (7:26)
-
Hero and About Components (2:16)
-
Title Component (4:30)
-
Services Component (4:10)
-
Tours Component (7:56)
-
Footer Component (5:01)
-
Alternative Approach - Page Links Component (7:04)
-
Alternative Approach - More Components (12:09)
-
Continuous Deployment - Setup (5:57)
-
Continuous Deployment - Benefits (5:27)
-
Continuous Deployment - "Gotcha" (4:55)
React Hooks and Advanced Topics
-
Intro (0:52)
-
Github Repository
-
Setup (2:31)
-
Overview (8:54)
-
Error Example (3:37)
-
UseState Fundamentals (9:55)
-
Initial Render and Re-renders (3:01)
-
General Rules of React Hooks (2:36)
-
UseState Array Example - Setup (6:12)
-
UseState Array Example - Complete (7:29)
-
UseState - Extra Info (1:31)
-
UseState - Object Example (5:17)
-
Auto Batching Info (1:28)
-
UseState Object Example - Complete (5:54)
-
UseState Set Function "Gotcha" (3:15)
-
UseState Functional Update Form (4:21)
-
UseState - SetTimeout Example (4:13)
-
Matching Project
-
Code Example (6:00)
-
UseEffect - Fundamentals (7:02)
-
UseEffect - Multiple Effects (3:57)
-
UseEffect Fetch Challenge - Intro (3:34)
-
UseEffect Fetch Challenge - Complete (9:19)
-
UseEffect Clean Up Info (1:15)
-
Multiple Returns (5:45)
-
Multiple Returns - Fetch Data Setup (3:39)
-
Multiple Returns - Fetch Data (9:09)
-
Fetch Error "Gotcha" (4:01)
-
Order Matters (6:46)
-
Fetch Function Location (2:54)
-
React Hooks Rules (2:16)
-
Vanilla.js (optional) (5:17)
-
Short Circuit - Overview (5:23)
-
Short Circuit - Examples (7:41)
-
Ternary Operator (4:04)
-
Toggle Challenge (5:45)
-
User Challenge (5:50)
-
UseEffect Cleanup Function - Setup/Challenge (6:40)
-
UseEffect - Timer Example (5:30)
-
UseEffect - Event Listeners Example (3:29)
-
You Might Not Need an Effect (3:36)
-
Matching Project
-
Project Structure - Folder Example (6:22)
-
Project Structure - Named Exports (4:22)
-
Project Structure - Export Group (6:43)
-
Leverage Javascript - Intro (4:59)
-
Leverage Javascript - Challenge (7:13)
-
Leverage Javascript - Complete (10:06)
-
Forms - Setup (5:01)
-
Controlled Inputs (10:02)
-
User Challenge - Setup (2:48)
-
User Challenge - Add New Users (9:20)
-
User Challenge - Remove User (2:08)
-
Multiple Inputs (11:54)
-
Checkbox Input (3:40)
-
Select Inputs (4:38)
-
FormData API (11:11)
-
Matching Projects
-
useRef - DOM Node (7:22)
-
useRef - Initial Render (4:53)
-
Matching Projects
-
Custom Hooks - Toggle (5:55)
-
Custom Hooks - Fetch Person (6:47)
-
Custom Hooks - Generic Fetch (3:27)
-
Context API - Challenge (2:51)
-
Context API - Prop Drilling (11:04)
-
Context API - Solution (8:06)
-
Context API - Custom Hook (3:05)
-
Context API - Global Setup (11:34)
-
Matching Projects
-
UseReducer - Intro (2:30)
-
UseReducer - Challenge (5:16)
-
UseReducer - Setup (9:52)
-
Reducer Basics (9:47)
-
Actions and Default State (5:26)
-
Reset List (1:35)
-
Remove Person (4:25)
-
Import / Export (4:45)
-
Matching Projects
-
Performance - Intro (0:40)
-
Component Re-renders (5:02)
-
React Dev Tools (4:20)
-
Lower State (3:36)
-
Lower State - Challenge (5:20)
-
React.memo() (3:43)
-
Mind Grenade (5:11)
-
UseCallback Hook (5:20)
-
UseCallback Hook - Common Use Case (2:22)
-
UseMemo Hook (5:28)
-
UseTransition Hook (7:57)
-
React Suspense (9:27)
Fundamental Projects (with steps)
-
Important Info !!!
-
Intro (3:01)
-
Setup (13:44)
-
Setup - Figma File (2:06)
-
Birthday Buddy - Setup (1:55)
-
Birthday Buddy - Import List (5:02)
-
Birthday Buddy - Render List (6:16)
-
Birthday Buddy - Clear List (2:24)
-
Birthday Buddy - CSS (optional) (13:48)
-
Tours - Setup (1:11)
-
Tours - Fetch Tours (7:46)
-
Tours - Render Tours (11:55)
-
Tours - Remove Tour (3:59)
-
Tours - Read More (6:32)
-
Tours - Refetch (4:35)
-
Tours - CSS (optional) (18:37)
-
Reviews - Setup (0:53)
-
Reviews - Data (3:21)
-
Reviews - React Icons (3:47)
-
Reviews - First Person (4:30)
-
Reviews - Prev and Next (5:06)
-
Reviews - Check Number (4:19)
-
Reviews - Random Person (4:02)
-
Reviews - Modulus Operator (6:22)
-
Reviews - CSS (optional) (13:10)
-
Questions - Setup (0:56)
-
Questions - Render List (7:31)
-
Questions - Toggle Info (4:16)
-
Questions - Alternative Setup (11:05)
-
Questions - CSS (Optional) (8:40)
-
Menu - Setup (0:44)
-
Menu - Title Component (3:26)
-
Menu - Render Items (6:34)
-
Menu - Unique Categories (7:05)
-
Menu - Display Categories (2:57)
-
Menu - Filter (5:12)
-
Menu - CSS (optional) (10:47)
-
Tabs - Setup (0:46)
-
Tabs - Fetch Jobs (6:39)
-
Tabs - Display Job (5:55)
-
Tabs - Duties and UUID Library (6:46)
-
Tabs - Button Container (2:28)
-
Tabs - Current Item (4:48)
-
Tabs - CSS (optional) (12:57)
-
Slider - Setup (1:40)
-
Slider - Structure (10:07)
-
Slider - CSS (12:04)
-
Slider - Initial Logic (6:11)
-
Slider - Current Item (8:16)
-
Slider - Autoslide (autoplay) (3:37)
-
Slider - Library Info (1:07)
-
Slider - React Slick Setup (9:06)
-
Slider - React Slick Complete (9:05)
-
Lorem Ipsum - Setup (0:56)
-
Lorem Ipsum - Structure (6:43)
-
Lorem Ipsum - Submit Form (6:43)
-
Lorem Ipsum - Nanoid Library (1:52)
-
Lorem Ipsum - CSS (optional) (5:26)
-
Color Generator - Setup (1:49)
-
Color Generator - Form Structure (6:59)
-
Color Generator - HTML Color Input (2:38)
-
Color Generator - Values.js Library (3:27)
-
Color Generator - Render List (8:46)
-
Color Generator - React Toastify (4:54)
-
Color Generator - Change / Add Color (6:47)
-
Color Generator - Clipboard API (3:58)
-
Color Generator - CSS (optional) (10:15)
-
Grocery Bud - Setup (1:21)
-
Grocery Bud - Form Component (6:48)
-
Grocery Bud - Add Item (8:03)
-
Grocery Bud - Render Items (4:05)
-
Grocery Bud - Single Item (5:41)
-
Grocery Bud - Remove Item (1:37)
-
Grocery Bud - Local Storage (11:47)
-
Grocery Bud - Edit Item (global setup) (5:30)
-
Grocery Bud - React Toastify (3:56)
-
Grocery Bud - CSS (optional) (8:43)
-
Navbar - Setup (1:19)
-
Navbar - Data (2:08)
-
Navbar - Initial Setup (10:01)
-
Navbar - Initial Setup CSS (5:45)
-
Navbar - Fixed Setup (6:05)
-
Navbar - Dynamic Setup (8:19)
-
Navbar - Question (5:19)
-
Navbar - Complete (11:44)
-
Sidebar/Modal - Setup (0:56)
-
Sidebar/Modal - Components (2:44)
-
Sidebar/Modal - Global Context (6:57)
-
Sidebar/Modal - Home Component (6:13)
-
Sidebar/Modal - Modal Component (15:04)
-
Sidebar/Modal - Sidebar Component JSX (5:37)
-
Sidebar/Modal - Sidebar CSS (9:11)
-
Sidebar/Modal - Sidebar Toggle (2:24)
-
Strapi - Setup (1:04)
-
Strapi - Data (1:43)
-
Strapi - Global Context (4:49)
-
Strapi - Components (6:13)
-
Strapi - Navbar CSS (5:48)
-
Strapi - Hero (5:58)
-
Strapi - Sidebar JSX (8:16)
-
Strapi - Sidebar CSS (10:56)
-
Strapi - NavLinks (8:10)
-
Strapi - PageId Logic (3:34)
-
Strapi - Submenu JSX (8:12)
-
Strapi - Submenu CSS (10:10)
-
Strapi - Hide Submenu (part 1) (6:54)
-
Strapi - Hide Submenu (part 2) (12:13)
-
Cart - Intro (0:51)
-
Cart - Setup (5:33)
-
Cart - Global Context (3:14)
-
Cart - UseReducer Setup (6:30)
-
Cart - Setup Actions (4:23)
-
Cart - Data Structures (3:50)
-
Cart - Map Object (6:42)
-
Cart - Switch to Map() (5:25)
-
Cart - Clear Cart (4:09)
-
Cart - Remove Item (7:34)
-
Cart - Increase Amount (4:22)
-
Cart - Decrease Amount (3:26)
-
Cart - Calculate Totals (7:35)
-
Cart - Fetch Structure (4:36)
-
Cart - Fetch Complete (4:27)
-
Cart - CSS (optional) (17:30)
Axios HTTP Library
React Query
-
Intro (2:43)
-
Starter (0:37)
-
Useful Info
-
Server Setup (back-end) (6:46)
-
Tasks App Setup (front-end) (4:29)
-
Axios Custom Instance (5:09)
-
HTTP Methods (7:55)
-
API Docs (6:23)
-
React Query - Intro (3:00)
-
React Query - Install and Setup (1:55)
-
Important Update !!!
-
First Query (7:22)
-
Render Data (5:30)
-
Error Handling (5:56)
-
Thunder Client (3:58)
-
Create Task - Challenge (8:27)
-
Create Task - Initial Setup (9:02)
-
UseMutation Helpers (8:27)
-
Edit Task - Challenge (4:35)
-
Edit Task - Complete (5:31)
-
Delete Task (4:53)
-
Refactor (12:42)
-
Alternative Server Setup (2:20)
Unsplash Images Project (with React Query)
-
Intro (0:34)
-
Download (0:16)
-
Starter (1:21)
-
Structure (5:10)
-
Dark Theme - Initial Setup (6:07)
-
Dark Theme - Add / Remove Class (4:13)
-
Dark Theme - CSS (10:43)
-
Dark Theme - User Prefers Dark Mode (CSS) (2:39)
-
SearchForm (6:55)
-
Unsplash API - Info (0:28)
-
Unsplash API - Register (0:41)
-
Obtain Correct URL (8:03)
-
Setup React Query (2:47)
-
Setup Query (3:30)
-
Render Images (5:39)
-
React Query Dev Tools (2:15)
-
Setup Global SearchValue (5:15)
-
UseQuery Fix (4:04)
-
Dark Mode - Javascript Check (5:25)
-
Important Update !!!
-
Local Storage (3:10)
-
ENV Variables (5:26)
-
Deploy (5:25)
-
CSS (optional) (11:31)
Contentful CMS Project
-
Download (0:21)
-
Intro (1:43)
-
Setup (0:50)
-
Hero Component (4:35)
-
Undraw (1:54)
-
Projects Data (4:51)
-
Headless CMS (1:28)
-
Create Contentful Account (0:43)
-
Content Type (4:31)
-
Content (5:52)
-
Contentful API Docs (6:50)
-
Contentful SDK - Install and Setup (4:06)
-
Fetch Projects (9:22)
-
Render Projects (3:54)
-
Deploy (5:59)
-
Webhooks (4:17)
-
CSS (optional) (10:29)
MixMaster (React Router 6.4+ and React Query)
-
Setup (0:30)
-
Intro (1:08)
-
Starter (0:56)
-
SPA and React Router Info (3:12)
-
Basic Router (4:39)
-
Setup Pages (6:31)
-
Link Component (3:40)
-
Nested Pages (8:50)
-
Nested Pages - More Complex Example (3:23)
-
Navbar (5:02)
-
Styled Components - Setup (5:41)
-
Styled Components - Wrapper (4:41)
-
Navbar CSS (optional) (9:08)
-
About Page (2:17)
-
Page Layout (3:06)
-
Error Page (6:21)
-
Error Page - CSS (4:26)
-
Loader Info (4:59)
-
Loader - Landing Page (1:35)
-
CocktailDB Overview (2:15)
-
Important Update !!!
-
Fetch Drinks (5:00)
-
Single Page Error (6:33)
-
CocktailList (7:18)
-
CocktailCard (5:10)
-
CocktailList and CocktailCard CSS (optional) (5:53)
-
Global Loading and Context (6:32)
-
Single Cocktail - Setup (7:15)
-
Single Cocktail - Render (4:52)
-
Ingredients Challenge (7:14)
-
Additional Check (5:00)
-
Single Cocktail CSS (optional) (5:17)
-
React Toastify - Setup (1:36)
-
Newsletter Structure (5:56)
-
HTML Form Submission (4:35)
-
Action - Setup (8:25)
-
Submit Form (6:37)
-
Handle Errors (8:50)
-
Navigation State (2:11)
-
SearchForm - Structure (4:08)
-
SearchForm - Complete (6:56)
-
SearchForm CSS (optional) (2:06)
-
React Query - Setup (5:15)
-
Important Update !!!
-
React Query - Landing Page Setup (7:34)
-
React Query - Landing Page Complete (5:02)
-
React Query - Single Cocktail Page (5:48)
-
Redirects (1:01)
WebDev Portfolio (Tailwind CSS)
Redux Toolkit
-
Intro (2:44)
-
Github (0:20)
-
Setup (2:46)
-
Install (3:46)
-
Store (3:32)
-
First Slice (7:39)
-
Redux Dev Tools (1:40)
-
useSelector (8:37)
-
Hero Icons (3:04)
-
Cart Items - Local Data (2:15)
-
Cart Container (9:08)
-
Cart Item (3:24)
-
Reducers - Clear Cart (7:38)
-
Reducers - Return State (2:45)
-
Reducers - Remove Item (6:38)
-
Reducers - Increase and Decrease (6:20)
-
Reducers - Calculate Totals (6:08)
-
Modal Setup (2:28)
-
Modal Complete (9:29)
-
createAsyncThunk (13:03)
-
createAsyncThunk - More Options (9:24)
-
Builder Callback Notation (5:27)
Comfy Store (React Router 6.4+, RTK, Axios, React Query)
-
Intro (6:30)
-
DaisyUI (9:51)
-
Assets (1:43)
-
VITE + TailwindCSS (4:35)
-
DaisyUI Setup (1:48)
-
Install Dependencies (0:48)
-
Create Pages (7:20)
-
Route Structure (11:19)
-
Error Page (7:02)
-
Form Input (5:38)
-
Login Page (9:59)
-
Submit Button (3:42)
-
Register Page (5:39)
-
Custom Class (2:36)
-
Header Component (5:30)
-
Navbar Structure (12:24)
-
NavLinks Component (4:31)
-
Toggle Component (3:41)
-
Add Theme (3:12)
-
Set Theme (6:43)
-
About Page (4:19)
-
Hero Component (9:35)
-
Base URL (6:50)
-
Landing Loader (9:56)
-
Featured Products (12:24)
-
Format Price (3:35)
-
Fetch Single Product (8:42)
-
Render Single Product (5:15)
-
Single Product - Colors (5:43)
-
Single Product - Amount (6:23)
-
Generate Amount Inputs (4:32)
-
Products Page - Setup (8:06)
-
Products List (11:36)
-
Products Container (9:50)
-
Filters - Search Input (8:31)
-
Filters - Select Input (8:44)
-
Filters - Range Input (8:17)
-
Filters - Checkbox Input (3:43)
-
Global Loading (3:27)
-
Filters - Params (14:10)
-
Pagination - Setup (9:26)
-
Pagination - Complete (7:17)
-
Redux Toolkit - Setup (9:22)
-
Add To Cart Functionality (5:09)
-
AddItem Reducer (8:35)
-
Refactor and Local Storage (6:26)
-
Clear, Remove and Edit Reducers (9:13)
-
Cart Page (9:05)
-
Cart Totals (5:13)
-
Cart Items - Setup (14:42)
-
Cart Items - Functionality (4:12)
-
User Slice - Setup (5:26)
-
Refactor Theme Toggle (5:22)
-
Logout and Access User (14:25)
-
Register User - Docs (6:46)
-
Register User - Complete (6:02)
-
Login User - Setup (2:36)
-
Access RTK Store in Action (5:19)
-
Login Page - Action Complete (6:35)
-
Login User - Reducer (4:02)
-
Demo User (6:20)
-
Checkout Page - Setup (5:41)
-
Checkout Page - Restrict Access (5:46)
-
Create Order Request (6:15)
-
Checkout Form - Setup (5:17)
-
Checkout Form - Complete (9:36)
-
Auth Errors (4:20)
-
Orders Request (3:53)
-
Orders Page - Setup (8:39)
-
Orders List (11:45)
-
Complex Pagination (15:25)
-
React Query - Setup (5:44)
-
React Query - Landing Page (3:46)
-
React Query - Single Product Page (4:26)
-
React Query - All Products Page (5:50)
-
React Query - Orders Page (6:35)
-
React Query - Remove Queries (3:18)
Content Update
Typescript Tutorial
-
Intro and Setup (17:35)
-
Type Annotation (12:49)
-
Union Type and Type Any (15:15)
-
Arrays and Objects (18:32)
-
Function Params and Function Return (15:58)
-
Optional, Default and Rest Params (16:58)
-
Objects as Parameters and Excess Property Checks (14:40)
-
Type Alias and Intersection Type (20:40)
-
Interface Fundamentals (21:13)
-
Interface Advanced (26:01)
-
Tuples and Enums (17:18)
-
Type Assertion, Unknown and Never Types (22:45)
-
ES6 Modules (16:13)
-
Type Guarding - First Part (16:25)
-
Type Guarding - Second Part (15:26)
-
Generics (39:22)
-
Fetch Data and Declaration Files (32:40)
-
Classes (22:12)
-
Tasks Project - First Part (28:06)
-
Tasks Project - Second Part (13:54)
Typescript & React
Next.js Tutorial
-
Update !!!
-
Setup, Home Page and Link Component (12:58)
-
Nested Routes and CSS (13:05)
-
Layout, Navbar, Fonts and Metadata (14:44)
-
Server vs Client (9:12)
-
Fetching Data (15:34)
-
Nested Layouts and Dynamic Pages (9:49)
-
Images (20:52)
-
More Routing Options (7:41)
-
Server Actions and Actions Page Setup (13:32)
-
Actions File and Save User (14:27)
-
Fetch Users and Revalidate Cache (8:45)
-
useForStatus and useFormState (14:51)
-
Delete Button, Input Hidden and Bind Method (12:02)
-
Route Handlers - First Part (9:00)
-
Route Handlers - Second Part (13:26)
-
Middleware, Local Build and Cache (15:49)
Next.js Store App
-
Important Info !!!
-
Project Overview (10:44)
-
Setup (2:59)
-
Create Pages (3:51)
-
Shadcn Install (3:18)
-
Button Component (9:10)
-
Create Components (3:53)
-
Container Component (3:39)
-
Navbar Structure (5:14)
-
Logo Component (3:32)
-
NavSearch and CartButton Components (6:13)
-
Change Theme (3:09)
-
Toggle Dark Mode (11:17)
-
LinksDropdown Component (7:42)
-
Supabase Password Info !!!
-
Supabase Project (4:49)
-
Prisma Setup (3:58)
-
Connect Prisma to Supabase (7:11)
-
Prisma CRUD (3:35)
-
Practice Prisma Queries (6:06)
-
Product Model (4:28)
-
Seed Database (4:03)
-
Create More Components (4:16)
-
SectionTitle and EmptyList Components (3:41)
-
Fetch Products Functions (4:36)
-
Featured Products (5:33)
-
ProductsGrid Component (15:08)
-
Hero Component (5:01)
-
HeroCarousel Component (5:16)
-
Loading Container (10:30)
-
Products Container Component (19:34)
-
Products List Component (8:09)
-
NavSearch Component (15:39)
-
Fetch Product Details (9:31)
-
Product Details Page - Setup (8:23)
-
Supabase Bug !!!
-
Deploy on Vercel (6:56)
-
Setup Toast Component (1:56)
-
Clerk Version Info !!!
-
Cerk Auth (10:40)
-
SignOutLink Component (4:08)
-
UserIcon Component (5:03)
-
LinkDropdown Component - Complete (6:49)
-
Tes Auth Provider in Production (4:18)
-
Admin Pages - Structure (13:46)
-
Restrict Access to Admin Pages (8:54)
-
Create Product Page (setup) and Faker Library (7:34)
-
Form Input Component (8:13)
-
More Form Components (11:52)
-
Submit Button Component (5:22)
-
Form Container Component (15:41)
-
Create Product Action - Initial Approach (12:49)
-
Zod Library (11:29)
-
Custom Error Messages (13:53)
-
Image Validation (7:45)
-
Upload Image to Supabase (14:14)
-
Fetch Admin Products (9:58)
-
Icon Button and Delete Product Action (8:51)
-
Admin Products - Complete (4:37)
-
Remove Old Image from Supabase Bucket (7:37)
-
Fetch Admin Product Details (3:38)
-
Edit Product Page (12:22)
-
Update Image Container (15:23)
-
Loading Table (5:17)
-
Favorite Model (5:37)
-
Favorite Buttons and Actions (9:37)
-
Favorite Button and Form (9:23)
-
Toggle Favorite Action (5:18)
-
Favorites Page (5:34)
-
React Share (12:11)
-
Review Model (8:38)
-
Rating Input and Submit Review Components (14:41)
-
Create Review Action (5:09)
-
Rating and Comment Components (9:37)
-
Product Reviews (12:00)
-
Product Rating Complete (4:30)
-
User Reviews and Delete Review Actions (4:00)
-
Reviews Page (10:42)
-
Restrict Access (6:23)
-
Cart and CartItem Model (9:43)
-
Select Product and Amount Component (13:18)
-
Add To Cart Component (8:11)
-
Add To Cart - First Part (11:48)
-
Add To Cart - Second Part (12:47)
-
Cart Page and Cart Totals Component (17:12)
-
Cart Items List Component (16:05)
-
Delete Cart Item (10:26)
-
Update Cart Item (6:55)
-
Bug Fix (7:40)
-
Order Model and Order Actions (8:52)
-
Orders and Sales Pages (14:53)
-
Stripe Setup and API Keys (3:01)
-
Refactor Order and createOrderAction (6:57)
-
Checkout Page (6:12)
-
Payment Route (12:17)
-
Confirm Route (4:56)
-
Test Stripe (3:59)
-
Deploy Bug Fix !!!
-
Atlas Setup - Optional Video !!! (6:09)
Search Github Users - GraphQL, Typescript, TailwindCSS, ShadcnUI
-
Intro (1:34)
-
Install (1:16)
-
TailwindCSS and ShadcnUI (5:06)
-
Structure (5:39)
-
Search Form (7:30)
-
GraphQL (18:50)
-
Apollo Client (11:34)
-
Query (9:58)
-
User Profile, Stats Container and Card Components (13:02)
-
Most Forked Repos (8:48)
-
Most Popular Repos (5:25)
-
Most Used Languages (8:49)
-
Charts (15:11)
-
Loading Component (3:35)
React Application Testing with RTL and Vitest
-
Introduction (2:51)
-
Section Repository !!! Important !!!
-
Install (4:28)
-
Files and Folders (2:36)
-
First Test File (9:02)
-
Test Validation Details (11:14)
-
Vitest Info (7:00)
-
SearchByText Component (8:37)
-
SearchByText Methods Overview (6:27)
-
SearchByText Methods Test (16:43)
-
Test Driven Development Example (4:00)
-
SearchByRole Component (5:28)
-
SearchByRole Methods Overview (4:18)
-
SearchByRole Test File (13:49)
-
User Interactions Component (9:10)
-
User Interactions Test (18:23)
-
Form Testing Sandbox (16:35)
-
Test Empty Inputs (7:39)
-
Test Typing In the Inputs (3:36)
-
Refactor (10:47)
-
Form Testing Remaining Tests (11:21)
-
Reviews App Logic (24:23)
-
Reviews App List Unit Tests (13:41)
-
Reviews App Form Unit Tests (14:16)
-
Reviews App Sandbox Integration Tests (12:04)
-
Create and Configure Template for Testing React Applications (13:17)
Extra Projects
Next.js Jobify App
-
Important Update !!!
-
Intro (7:00)
-
Shadcn (18:54)
-
Layout, Home Page and Create Pages (14:46)
-
Clerk Version Info !!!
-
Clerk Auth and Nav Links (8:14)
-
Dashboard, Layout, Sidebar and Navbar (18:56)
-
Dropdown Links, Change and Toggle Theme (19:13)
-
Shadcn Form Component and Types (18:23)
-
Custom Form Components (12:06)
-
Create Job - Continued (10:35)
-
Database Hosting Info !!!
-
Prisma, Render and Create Job Action (18:23)
-
Toast Component, React Query Setup and Create Job Form Complete (15:13)
-
Get All Jobs Action and Page Setup (21:09)
-
Search Form (15:20)
-
Jobs List and Job Card (15:18)
-
Job Info and Delete Job (11:11)
-
Single Job Page and Edit Job Complete (13:33)
-
Seed Database (10:18)
-
Stats and Charts Actions (13:22)
-
Stats Cards, Loading Skeleton and Charts Container (15:59)
-
Button Container (15:19)
-
Complex Button Container (13:33)
Jobster
-
Intro and Setup (17:26)
-
Structure and Styled Components (23:18)
-
Setup Pages (32:01)
-
Error and Register page (first part) (36:00)
-
Register page (second part) (30:30)
-
HTTP Requests (30:19)
-
Login User and Dashboard Setup (33:42)
-
Navbar Setup and Toggle Functionality (26:35)
-
Small and Big Sidebar (22:41)
-
Profile Page (36:42)
-
Add Job Page - First Part (26:28)
-
Add Job Page - Second Part (31:38)
-
Create Job (23:59)
-
All Jobs (30:32)
-
Job Component (34:16)
-
Edit Job and Test User (40:48)
-
Stats Setup (24:11)
-
Charts Container (20:09)
-
Search Container (23:50)
-
Pagination (26:00)
-
Query Params (22:52)
-
Refactor Logout User (25:41)
-
Debounce (23:57)
Github Users
-
Setup and React Router (27:16)
-
First Pages, Context API and Mock Data (30:36)
-
Info Card and Followers Components (33:37)
-
Charts - First Part (27:50)
-
Calculate Most Used (28:47)
-
Calculate Most Popular (30:40)
-
Requests (33:32)
-
Requests - Second Part (29:23)
-
Auth (32:42)
-
Auth (second part) and Deploy (36:22)
