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
|
DataVisor is a leading financial fraud a...
Suger.io is a marketplace-first software...
Trellix develops cybersecurity software ...
Deepgram is an audio AI company that bui...
Scale AI works with enterprises to bring...
Smarsh specializes in communications dat...
Explore the most innovative IoT projects...
In this YouTube Shorts, we explore how V...
🔥Purdue - Applied Generative AI Speciali...
PyCon JP Associationが主催するYouTubeライブです。実験...
Ready to kickstart your career in Cybers...
Welcome to "Generative AI for Beginners"...
Ready to turn raw data into powerful ins...
🔥Digital Marketing Specialist - ...
This new Shadcn update brings some reall...