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
|
🔥 Explore Amazing Courses By Simplilearn...
🔥Data Analyst Masters Program (Discount ...
🔥PMP® Certification Training - 🔥PRINC...
Knitting and coding may not seem related...
We’ve all been there… sitting in an appr...
n8n turns automation skills into income ...
🔥Professional Certificate in AI and Mach...
What is Homebrew? It's not related to co...
From days to minutes: How AI is revoluti...
Knowing how to ask the right question is...
Today Quincy Larson interviews Robby Rus...
How to Install Flutter on Windows 11 | A...
Want to make real money with coding? I s...
Download your free Python Cheat Sheet he...
Learn to take a full-stack React, Go, an...