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
|
Welcome back to Code, Commit, Deploy, Re...
Download your free Python Cheat Sheet he...
PyCon JP Associationが主催するYouTubeライブです。実験...
Hear the latest updates across Firebase,...
Build A Smart Chat Bot Using Python & Ma...
🔥Data Analyst Masters Program (Discount ...
🔥IIITB - Advanced Certification in UI UX...
🔥Business Analysis Basics With Course Co...
🔥Data Analyst Masters Program (Discount ...
Developing Android car apps is easier th...
Download your free Python Cheat Sheet he...
本日はClaude 最新機能の使い道についてお話させて頂きました! ぜひご視聴く...
Download your free Python Cheat Sheet he...
Download your free Python Cheat Sheet he...
Android Studio supports Gemma 4: our mos...