English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 49 lectures (8h 13m) | 4.50 GB
shadcn ui – build dashboards with shadcn ui components, including shadcn ui, tailwindcss, and Next JS (shadcn ui 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.
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.
What you’ll learn
- Increase your value and improve your knowledge as a web developer
- Learn how to build a dashboard with shadcn ui
- Learn client side validation with zod and react-hook-form
- Learn how to create beautiful charts and data visualizations using recharts
Table of Contents
Introduction
1 Important Read this before you start the course Github repo etc
2 Project overview
3 Udemy ratings and reviews
4 Set up new Next JS project and install shadcn ui
Build the landing page
5 Add the landing page text and buttons
6 Tidying up the landing page styles and link to login and signup pages
7 Customise shadcn ui theme
8 Build the light and dark mode toggle
Build the login page
9 Add the login page and card
10 Create the login form
Build the sign up page
11 Add the sign up page and card
12 Add the account type select field
13 Add the company name and employees fields and validation
14 Add the date of birth validation
15 Add the date of birth field with Popover
16 Customize the Calendar
17 Render selected date custom dropdowns for month year selection
18 Add the dropdown captions and years values
19 Hook up month and year navigation anytime the custom dropdown values change
20 Add the password and confirm password fields
21 Create a custom PasswordInput component
22 Add the terms and conditions checkbox
23 BUG FIX terms and conditions checkbox
Build the dashboard layout
24 Create the dashboard layout
25 Create the MenuTitle
26 Build out the side panel menu items
27 Add the sidebar footer with Avatar
28 Add the missing pages and refactor HTML tags
Build the My Dashboard page
29 Add the employees stats and teams stats tabs
30 Add the data Cards
31 Start adding the Card content
32 Extend the shadcn ui Button component
33 Add the employees present card content
34 Add the employee of the month card content
35 Create the stacked bar chart with recharts
36 Finish the bar chart
37 Create the teams stats component
38 Add the team leaders card content
39 Add the team distribution pie chart
40 Add the support tickets resolved line graph
Extras
41 Mobile menu part 1
42 Mobile menu part 2
43 Mobile menu part 3
44 Mobile menu part 4
45 Create the loading skeleton for the employees table
46 Create the employees data table
47 Add pagination for the employees data table
48 Clean up the styling of the data table
49 BONUS
Resolve the captcha to access the links!