CF

Shadcn UI & Next JS - Build beautiful dashboards with shadcn

8h 12m 38s
English
Paid

Embark on an exciting journey into frontend development with our comprehensive Shadcn UI course, specifically designed for developers eager to build state-of-the-art dashboards utilizing Shadcn UI in Next.js. This course serves as your portal to mastering essential skills like form functionality, client-side validation, component customization, and dynamic chart creation—crucial expertise for any aspiring web developer. Please note, this course has a strong emphasis on frontend development only. We don't cover backend logic, databases, or authentication in this course; all data is hardcoded dummy data. Our primary focus is on creating stunning frontends using Shadcn UI.

Throughout the course, you'll develop "SupportMe"—a fictional dashboard designed to track employees, teams, and customer support tickets.

Why Choose This Course?

  • Focused Learning Path: Immerse yourself in building a visually appealing and interactive dashboard. By concentrating on frontend technologies, you'll develop proficiency in highly sought-after web development skills.
  • Hands-On Experience with Shadcn UI & Next.js: Master the integration of Shadcn UI within the Next.js framework, enabling you to develop fast, server-rendered React applications.
  • Forms and Validation with Zod: Gain in-depth knowledge in creating forms with react-hook-form and implementing client-side validation using Zod, ensuring data integrity without sacrificing user experience.
  • Extendable Components: Unleash your creativity with Shadcn UI by extending its components. This empowers you to tailor elements to match the unique requirements of your projects.
  • Styling with Tailwind CSS: Embrace the utility-first styling approach of Tailwind CSS. You'll learn to design your dashboard efficiently while staying within the comfort of your HTML environment.
  • Interactive Charts with Recharts: Create visually stunning data representations with Recharts. This module will guide you in integrating responsive and customizable charts into your dashboard for added flair.
  • Pure Frontend Focus: Engage in course projects designed with hardcoded/dummy data. There's no need to concern yourself with backend complexities or authentication issues—concentrate solely on enhancing your frontend development skills.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 47 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 47 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Project overview
All Course Lessons (47)
#Lesson TitleDurationAccess
1
Project overview Demo
05:35
2
Udemy ratings and reviews
00:39
3
Set up new Next JS project and install shadcn ui
09:07
4
Add the landing page text and buttons
10:38
5
Tidying up the landing page styles and link to login and signup pages
17:32
6
Customise shadcn ui theme
11:01
7
Build the light and dark mode toggle
18:24
8
Add the login page and card
10:23
9
Create the login form
23:18
10
Add the sign up page and card
03:44
11
Add the account type select field
09:41
12
Add the company name and employees fields and validation
09:02
13
Add the date of birth validation
06:59
14
Add the date of birth field with Popover
11:17
15
Customize the Calendar
19:49
16
Render selected date + custom dropdowns for month / year selection
16:14
17
Add the dropdown captions and years values
13:54
18
Hook up month and year navigation anytime the custom dropdown values change
04:58
19
Add the password and confirm password fields
16:35
20
Create a custom PasswordInput component
12:04
21
Add the terms and conditions checkbox
14:16
22
BUG FIX: terms and conditions checkbox
02:42
23
Create the dashboard layout
07:18
24
Create the MenuTitle
07:07
25
Build out the side panel menu items
09:53
26
Add the sidebar footer with Avatar
12:10
27
Add the missing pages and refactor HTML tags
04:56
28
Add the employees stats and teams stats tabs
04:54
29
Add the data Cards
04:22
30
Start adding the Card content
09:34
31
Extend the shadcn ui Button component
03:37
32
Add the employees present card content
12:08
33
Add the employee of the month card content
08:42
34
Create the stacked bar chart with recharts
19:00
35
Finish the bar chart
18:15
36
Create the teams stats component
07:19
37
Add the team leaders card content
09:39
38
Add the team distribution pie chart
11:41
39
Add the support tickets resolved line graph
14:29
40
Mobile menu (part 1)
06:54
41
Mobile menu (part 2)
11:23
42
Mobile menu (part 3)
12:44
43
Mobile menu (part 4)
07:08
44
Create the loading skeleton for the employees table
09:51
45
Create the employees data table
13:48
46
Add pagination for the employees data table
08:42
47
Clean up the styling of the data table
09:12
Unlock unlimited learning

Get instant access to all 46 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

47 lessons · 8h 12m 38s
Show all 47 lessons
  1. 1 Project overview 05:35
  2. 2 Udemy ratings and reviews 00:39
  3. 3 Set up new Next JS project and install shadcn ui 09:07
  4. 4 Add the landing page text and buttons 10:38
  5. 5 Tidying up the landing page styles and link to login and signup pages 17:32
  6. 6 Customise shadcn ui theme 11:01
  7. 7 Build the light and dark mode toggle 18:24
  8. 8 Add the login page and card 10:23
  9. 9 Create the login form 23:18
  10. 10 Add the sign up page and card 03:44
  11. 11 Add the account type select field 09:41
  12. 12 Add the company name and employees fields and validation 09:02
  13. 13 Add the date of birth validation 06:59
  14. 14 Add the date of birth field with Popover 11:17
  15. 15 Customize the Calendar 19:49
  16. 16 Render selected date + custom dropdowns for month / year selection 16:14
  17. 17 Add the dropdown captions and years values 13:54
  18. 18 Hook up month and year navigation anytime the custom dropdown values change 04:58
  19. 19 Add the password and confirm password fields 16:35
  20. 20 Create a custom PasswordInput component 12:04
  21. 21 Add the terms and conditions checkbox 14:16
  22. 22 BUG FIX: terms and conditions checkbox 02:42
  23. 23 Create the dashboard layout 07:18
  24. 24 Create the MenuTitle 07:07
  25. 25 Build out the side panel menu items 09:53
  26. 26 Add the sidebar footer with Avatar 12:10
  27. 27 Add the missing pages and refactor HTML tags 04:56
  28. 28 Add the employees stats and teams stats tabs 04:54
  29. 29 Add the data Cards 04:22
  30. 30 Start adding the Card content 09:34
  31. 31 Extend the shadcn ui Button component 03:37
  32. 32 Add the employees present card content 12:08
  33. 33 Add the employee of the month card content 08:42
  34. 34 Create the stacked bar chart with recharts 19:00
  35. 35 Finish the bar chart 18:15
  36. 36 Create the teams stats component 07:19
  37. 37 Add the team leaders card content 09:39
  38. 38 Add the team distribution pie chart 11:41
  39. 39 Add the support tickets resolved line graph 14:29
  40. 40 Mobile menu (part 1) 06:54
  41. 41 Mobile menu (part 2) 11:23
  42. 42 Mobile menu (part 3) 12:44
  43. 43 Mobile menu (part 4) 07:08
  44. 44 Create the loading skeleton for the employees table 09:51
  45. 45 Create the employees data table 13:48
  46. 46 Add pagination for the employees data table 08:42
  47. 47 Clean up the styling of the data table 09:12

Related courses

Frequently asked questions

What is Shadcn UI & Next JS - Build beautiful dashboards with shadcn about?
Embark on an exciting journey into frontend development with our comprehensive Shadcn UI course, specifically designed for developers eager to build state-of-the-art dashboards utilizing Shadcn UI in Next.js. This course serves as your…
Who teaches Shadcn UI & Next JS - Build beautiful dashboards with shadcn?
Shadcn UI & Next JS - Build beautiful dashboards with shadcn is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Shadcn UI & Next JS - Build beautiful dashboards with shadcn?
Shadcn UI & Next JS - Build beautiful dashboards with shadcn contains 47 lessons with a total runtime of 8 hours 12 minutes. All lessons are available to watch online at your own pace.
Is Shadcn UI & Next JS - Build beautiful dashboards with shadcn free to watch?
Shadcn UI & Next JS - Build beautiful dashboards with shadcn is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Shadcn UI & Next JS - Build beautiful dashboards with shadcn online?
Shadcn UI & Next JS - Build beautiful dashboards with shadcn is available to watch online on CourseFlix at https://courseflix.net/course/shadcn-ui-next-js-build-beautiful-dashboards-with-shadcn. The page hosts every lesson with the integrated video player; no download is required.