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
|
🔥Generative AI, Machine Learning, And In...
🔥Generative AI, Machine Learning, And In...
🔥AI-Powered Digital Marketing Certificat...
🔥Generative AI, Machine Learning, And In...
This video on DevOps Engineer Full Cours...
🔥Data Analyst Masters Program (Discount ...
本日はGoogle Stitch徹底解説についてお話させて頂きました! ぜひご視...
Learning a new skill in your native lang...
What if your AI could read every legal d...
The legal industry is under pressure. Mo...
AI is reshaping not just what software c...
Today Quincy Larson interviews Chris Coy...
This talk was recorded at NDC Security i...
This talk was recorded at NDC Security i...