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

Build a Microservices app with .Net and NextJS from scratch

Build a Microservices app with .Net and NextJS from scratchudemy

Category: Next.js, C Sharp (C#)
Duration 31 hours 42 minutes 57 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platformudemy

Category: React.js, Next.js, Node.js
Duration 20 hours 25 minutes 13 seconds
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.Marc Lou

Category: React.js, Next.js
Duration 11 hours 38 minutes 42 seconds
Build A Finance Platform

Build A Finance PlatformCode With Antonio

Category: Next.js
Duration 13 hours 43 minutes 45 seconds
Next JS & Open AI / GPT: Next-generation Next JS & AI apps

Next JS & Open AI / GPT: Next-generation Next JS & AI appsudemy

Category: Next.js, ChatGPT
Duration 5 hours 8 minutes 46 seconds
Next.js & React with ChatGPT - Development Guide (2023)

Next.js & React with ChatGPT - Development Guide (2023)udemy

Category: React.js, Next.js, ChatGPT
Duration 7 hours 6 minutes 49 seconds
React Simplified - Next.js

React Simplified - Next.jswebdevsimplified.com

Category: Next.js
Duration 8 hours 56 minutes 9 seconds
Mastering Next.js 13 with TypeScript

Mastering Next.js 13 with TypeScriptcodewithmosh (Mosh Hamedani)

Category: TypeScript, Next.js
Duration 5 hours 16 minutes 33 seconds