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
|
🔥Post Graduate Program in Data Analytics...
Download your free Python Cheat Sheet he...
🔥Full Stack Java Developer Program (Disc...
Ready to break into UI/UX design or leve...
🔥Purdue - Applied Generative AI Speciali...
In this short, discover the Project Mana...
Join us on December 17 at 11am PT! Learn...
Decoupling Design in Flutter → GitHub i...
Jaspr on Observable Flutter → Buddyfind...
talabat - Delivering Tomorrow. → Migrat...
Verdure example → GenUI package → Giv...
Moving from asking "how" to asking "why"...
Download your free Python Cheat Sheet he...