In this video, we will build a dashboard interface from scratch.
Check out the sponsor, Mailtrap:
Full Source Code:
This project will use the following technologies:
- React/Next.js
- Shadcn/ui
- TypeScript
- Tailwind CSS
- Recharts
- Lucide React
- React Hook Form & Zod
Full Next.js Course:
Udemy Version:
Timestamps:
0:00 - Intro
4:02 - Project Setup
9:18 - Initialize Shadcn/ui
10:37 - Using Shadcn Components
12:54 - Navbar, Avatar, Dropdown Components
24:04 - Sidebar & Command Component
33:40 - Dashboard Cards
39:55 - Make The Cards Dynamic
44:13 - Posts Data Array & Types
47:50 - Posts Table
59:13 - Limit & Sort Posts
1:02:27 - Analytics Data & Types
1:04:30 - Analytics Chart & Recharts
1:11:10 - Posts Page
1:13:50 - Back Button Component
1:16:38 - Pagination Component
1:18:00 - Edit Post Page & Form
1:23:34 - Zod Form Schema
1:25:17 - Get Post Data
1:27:00 - useForm Hook
1:28:45 - Create Form
1:38:03 - Toast Component
1:42:29 - Dark Mode Toggler
1:49:48 - Auth Page & Layout
1:55:26 - Tabs Component
2:00:47 - Login Form
2:10:50 - Register Form
2:13:52 - Auth Page Theme Toggler
|
Gemini CLI now supports Skills! Join hos...
Accelerators are getting faster, but is ...
For more details on this topic, visit th...
model that works best for your needs and...
With everything starting to use AI, ther...
Celebrate 10 years of Keras! 🎉 In this s...
Are you exploring JAX for the first time...
For more details on this topic, visit th...
Learn how Chrome handles permission upda...
CSS Selector Cheat Sheet: []( Web Dev Ro...
Building a recipe app? Stop worrying abo...
In this Python FastAPI tutorial, we'll b...
🔥AI-Powered Digital Marketing Certificat...
For only $1, you can claim a 1GB Residen...
WithSecure transformed threat analysis b...