Admin Dashboard From Scratch - Next.js, TypeScript, Shadcn/ui

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:

- Shadcn/ui
- TypeScript
- Tailwind CSS
- Recharts
- Lucide React
- React Hook Form & Zod

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

[chenenpei]

I have been working as a web developer for 7 years and I still enjoy watching your tutorials. ❤

[CuraDev]

For those who are learning I wish you success, keep practicing and you will get the job you are looking for :)

[LuisBlancoAustin]

Brad does it again! He inspires hope, ignites the imagination, and instills a love of learning. Thank you kindly, sir.

[minidragonlady]

Your theme and font size for the editor is the perfect one. All instructors should do like this!

[mohitsaud]

I was thinking to learn and design admin dashboard and here comes the video. Thank You Brad

[jeanmako]

I think I am going to lose my mind. The exact same thing I was looking for yesterday was created 17 hours later. Thanks a lot Brad, you're the best.

[charlesjojovandyck]

Finally done with this course the fulfillment you feel within. Thank Champ

[GilAguilar]

Nice! Thanks for this Brad.
Looking forward to building this 🤟💙☕️

[Salah-YT]

thank u so much all done waiting for part 2 🙂

[smartdriver]

Thanks Brad, your tutorial is awesome and easy to follow

[vooDOO]

Great tutorial as always. you are my inspiration for becoming a full-stack developer. i have being following you and your tuts since even the beginning of NewBoston, I think before it was bucky-something- . Great tutorial as always. bless you.

[QueeeeenZ]

Awesome! would love to see a Nuxt version of this.

[jarbyvid]

Thanks again Brad. Great tutorial. Learned a lot from this one.

[mastle]

Another banger by the master, eternally thankful

[colinado]

Thank you so much for this content. I recognize your diligence.🤝

[Himmom]

Being following for 7 years and YouTube have never sent me a notification on new video release.

[markus_dev_cwb]

Amazing project!

I have this Udemy Course and i recommend.

[firstlastcode]

Thank you boss for all the good things

[aileenchan]

Thank you so much for sharing this tutorial! Ever considered doing a Tutorial for Yeoman?

[vivekthapa]

Good to c another tutorial from legend. Can you make one video related to Progressive Web Application with nextjs? I am sure lots of developer want to learn from you.