Shadcn UI & Next JS - Build beautiful dashboards with shadcn
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 Shadcn UI & Next JS - Build beautiful dashboards with shadcn
# | 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
![Server side rendering with Next + React](https://cdn.courseflix.net/courses/100x56/server-side-rendering-with-next-react.jpg?d=1739919294908)
Server side rendering with Next + Reactudemy
![Next JS: The Complete Developer's Guide](https://cdn.courseflix.net/courses/100x56/next-js-the-complete-developer-s-guide.jpg?d=1739919294908)
Next JS: The Complete Developer's GuideudemyStephen Grider
![Testing Next.js Apps with Jest, Testing Library and Cypress](https://cdn.courseflix.net/courses/100x56/testing-next-js-apps-with-jest-testing-library-and-cypress.jpg?d=1739919294908)
Testing Next.js Apps with Jest, Testing Library and Cypressudemy
![Nest.js Microservices: Build & Deploy a Scaleable Backend](https://cdn.courseflix.net/courses/100x56/nest-js-microservices-build-deploy-a-scaleable-backend.jpg?d=1739919294908)
Nest.js Microservices: Build & Deploy a Scaleable Backendudemy
![Next40. Master Next.js 14 in 40 days of epic projects](https://cdn.courseflix.net/courses/100x56/next40-master-next-js-14-in-40-days-of-epic-projects.jpg?d=1739919294908)
Next40. Master Next.js 14 in 40 days of epic projectsReed Bargernextjs40.com
![Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2](https://cdn.courseflix.net/courses/100x56/advanced-nextjs-woocommerce-rest-api-tailwindcss-part-2.jpg?d=1739919294908)
Advanced NextJS WooCommerce REST API, TailwindCSS - Part-2udemy
![React Node AWS - Build infinitely Scaling MERN Stack App](https://cdn.courseflix.net/courses/100x56/react-node-aws-build-infinitely-scaling-mern-stack-app.jpg?d=1739919294908)
React Node AWS - Build infinitely Scaling MERN Stack Appudemy
![FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT](https://cdn.courseflix.net/courses/100x56/full-authentication-with-react-js-next-js-typescript.jpg?d=1739919294908)
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPTudemy
![The Ultimate NextJs Course](https://cdn.courseflix.net/courses/100x56/the-ultimate-nextjs-course.jpg?d=1739919294908)
The Ultimate NextJs Coursehamedbahram.io
![React, NextJS and NestJS: A Rapid Guide - Advanced](https://cdn.courseflix.net/courses/100x56/react-nextjs-and-nestjs-a-rapid-guide-advanced.jpg?d=1739919294908)