typescript
youtube
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
|
2024/06/03
youtube
![Python for Data Science Full Course 2026 [Free] | Learn Data Science With Python | Simplilearn](https://i.ytimg.com/vi/bN_H9uUFSWo/sddefault.jpg)
![Power BI Full Course 2026 [FREE] | Learn Power BI in 9 Hours | Power BI Training | Simplilearn](https://i.ytimg.com/vi/vm6GOrsRYxo/sddefault.jpg)
