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
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 commentsWant to join the conversation?
Sign in to commentSimilar courses
The No-BS Solution for Enterprise-Ready Next.js Applications
Sources: Jack Herrington
Next.js is one of the most popular frameworks for building web applications. It is fast, flexible, and underpins some of the largest sites on the internet.
8 hours 20 minutes 31 seconds
Bedrock: Jumpstart your next SaaS product
Sources: Max Stoiber (@mxstbr)
The modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need.
Build your AI startup in hours using our customizable demo apps | AnotherWrapper
Sources: Fekri
Create your AI startup quickly and efficiently using AnotherWrapper's customizable demo apps. Our all-in-one Next.js AI starter kit includes everything you...
Build an LMS Platform
Sources: Code With Antonio
In this 10-hour course, you will learn how to create your own LMS (Learning Management System) platform from scratch. We will use modern technologies...
10 hours 41 minutes 23 seconds
Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2
Sources: udemy
This is part two of the course "Advanced NextJS WooCommerce With REST API And TailwindCSS". If you haven't already please complete the previous part of the cour
8 hours 6 minutes 25 seconds