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
|
Don't let device failures or power outag...
Ross Richards, Senior Product Marketing ...
Now Playing has a new app that automatic...
Learn the basics of Data Structures in 6...
Today Quincy Larson interviews Justin Se...
本日はGoogleの神AIツール Antigravityについてお話させて頂きま...
For more details on this topic, visit th...
Download your free Python Cheat Sheet he...
Download your free Python Cheat Sheet he...
Tired of dependency updates breaking you...
Explore Lyria 3, Google DeepMind's new m...
XOCEAN is mapping the oceans to power th...
When Proximie’s CTO was operated on by h...
Every month, the world builds a new Manh...
For patients with rare and serious disea...