Shadcn UI & Next JS - Build beautiful dashboards with shadcn

8h 12m 38s
English
Paid
July 23, 2024

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.

More

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

Real-Time Collaborative Apps with Next.js and Supabase
Nest.js Microservices: Build & Deploy a Scaleable Backend
Build A Slack Clone

Build A Slack CloneCode With Antonio

Duration 15 hours 13 minutes 30 seconds
Next.js Complex State Management Patterns with RSC
Next40. Master Next.js 14 in 40 days of epic projects
Ultimate Next.js 13 Course + eBook

Ultimate Next.js 13 Course + eBookjsmastery.pro

Duration 51 hours 35 minutes 4 seconds
Build your AI startup in hours using our customizable demo apps | AnotherWrapper
Shopify + Next.js + Tailwind CSS: Modern Ecommerce