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
|
🔥PGP in Generative AI and ML in collabor...
Today Quincy Larson interviews Andrea Gr...
Some people just can't wait to move out ...
In this Unit Testing tutorial series, yo...
Download your free Python Cheat Sheet he...
In this Unit Testing tutorial series, yo...
#Programming #python #stocks #sp500 Des...
Get an insider's view as AWS's Randi Lar...
詳細について、動画の関連ナレッジセンター記事をご参照ください: Tsukamo...
In this demo we will show how you can au...
In this video, you will see how function...
In this video, we will share how Amazon ...
In this demo, we will see how Amazon Q D...