Shadcn UI & Next JS - Build beautiful dashboards with shadcn
8h 12m 38s
English
Paid
Course description
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
Watch Online Shadcn UI & Next JS - Build beautiful dashboards with shadcn
0:00
/ #1: Project overview
All Course Lessons (47)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsSimilar courses
Full-Stack Fundamentals 1 - Frontend
Sources: Mckay Wrigley (takeoff)
As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
1 hour 8 minutes 57 seconds
Build A Canva Clone
Sources: Code With Antonio
In this 18-hour course, we will create a platform for graphic design with numerous features. You will learn how to create an intuitive editor for cust...
17 hours 48 minutes 39 seconds
Magic UI Pro
Sources: Dillion Verma
Magic UI Pro is a platform for creating modern, visually appealing landing pages with minimal effort. It offers over 50 pre-designed...
Build and Deploy a SaaS AI Agent Platform
Sources: Code With Antonio
In this video course, you will create a video call application with AI support from scratch. You will learn how to set up real-time video communication...
13 hours 24 minutes 14 seconds
Build Viral Telegram Apps Course
Sources: Nikandr Surkov
Learn to develop Telegram Mini Apps from scratch to completion: game mechanics, payment integration (TON and Telegram Stars), built-in viral elements...
37 minutes 59 seconds
Want to join the conversation?
Sign in to comment