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
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.
Full-Stack Project with Claude Code
Sources: Mckay Wrigley (takeoff)
In this workshop, participants step by step create an MVP clone of FigJam - a visual collaboration editor - using Claude Code, Opus 4, Cursor IDE, and...
1 hour 12 minutes 14 seconds
The Ultimate NextJs Course
Sources: hamedbahram.io
NextJs is a powerful framework for building fullstack React applications. It makes it easy to create fast, SEO-friendly websites and web applications that are optimized for perf...
15 hours 7 minutes 33 seconds
Next.js Firebase - The Full Course
Sources: fireship.io
You will build a full-stack Social Blogging Platform inspired by sites like DEV.to and Medium. Authors can create content under their custom username, then pub
2 hours 38 minutes 13 seconds
Ecommerce on the Jamstack with Snipcart, Next.js, & WordPress
Sources: leveluptutorials
Welcome to E-commerce on the Jamstack with Snipcart, Next.js & WordPress! In this series, we will learn how make a fast, modern, e-commerce site using Next.js,
4 hours 18 minutes 15 seconds
Want to join the conversation?
Sign in to comment