Shadcn UI & Next JS - Build beautiful dashboards with shadcn

8h 12m 38s
English
Paid

Dive into the world of frontend development with this comprehensive Shadcn UI course, tailored for developers eager to craft state-of-the-art dashboards using Shadcn UI in Next.js. This course is your gateway to mastering the integration of form functionality, client-side validation, component customization, and dynamic chart creation - all key skills for any aspiring web developer. Note that this course focuses only on the front-end. We do not write any backend logic, database, or implement authentication in this course. All data in this course is hardcoded / dummy data. The sole focus of this course is building out beautiful front ends with Shadcn UI.

Read more about the course

In this course we'll build "SupportMe" - a fictional dashboard that tracks employees, teams, and customer support tickets.

Why This Course?

  • Focused Learning Path: Concentrate on building a visually appealing, interactive dashboard. By prioritizing frontend technologies, you'll gain proficiency in the most sought-after skills in the web development industry.
  • Hands-On Shadcn UI & Next.js: Learn to leverage Shadcn UI within the Next.js ecosystem, enabling you to create fast, server-rendered React.
  • Forms and Validation with Zod: Dive deep into crafting forms with react-hook-form, and implementing client-side validation using Zod, ensuring data integrity without compromising user experience.
  • Extendable Components: Get creative with Shadcn UI by extending its components. This section empowers you to tailor elements to fit the unique needs of your projects.
  • Styling with Tailwind CSS: Embrace the utility-first approach of Tailwind CSS for styling. You'll learn how to efficiently design your dashboard without leaving the comfort of your HTML.
  • Interactive Charts with Recharts: Visualize data beautifully with Recharts. This module will guide you through integrating responsive and customizable charts into your dashboard for that extra flair.
  • Pure Frontend Focus: All course projects are designed with hardcoded/dummy data. There's no backend complexity or authentication to worry about—purely frontend development to enhance your skills.

Watch Online Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Join premium to watch
Go to premium
# Title Duration
1 Project overview 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

Similar courses to Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Next.js - The Full Course

Next.js - The Full Coursefireship.io

Category: React.js, Next.js
Duration 1 hour 14 minutes 14 seconds
Testing Next.js Apps with Jest, Testing Library and Cypress

Testing Next.js Apps with Jest, Testing Library and Cypressudemy

Category: Next.js, Cypress
Duration 7 hours 35 minutes 24 seconds
Ultimate Next.js 13 Course + eBook

Ultimate Next.js 13 Course + eBookjsmastery.pro

Category: Next.js
Duration 51 hours 35 minutes 4 seconds
supastarter - SaaS starter kit for Next.js & Nuxt

supastarter - SaaS starter kit for Next.js & Nuxtsupastarter

Category: Next.js, Other (Mobile Apps Development)
Duration
Build a Google Docs Clone

Build a Google Docs CloneCode With Antonio

Category: Next.js
Duration 10 hours 26 seconds
React Node AWS - Build infinitely Scaling MERN Stack App

React Node AWS - Build infinitely Scaling MERN Stack Appudemy

Category: React.js, AWS, Next.js, Node.js
Duration 25 hours 1 minute 19 seconds
Ecommerce on the Jamstack with Snipcart, Next.js, & WordPress

Ecommerce on the Jamstack with Snipcart, Next.js, & WordPressleveluptutorials

Category: Next.js, Wordpress
Duration 4 hours 18 minutes 15 seconds