Shadcn UI & Next JS - Build beautiful dashboards with shadcn
8h 12m 38s
English
Paid
July 23, 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.
More
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
Join premium to watch
Go to premium
| # | 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
Full Stack Development
Duration 4 hours 24 minutes 36 seconds
Course
Next.js - The Full Course
Duration 1 hour 14 minutes 14 seconds
Course
Next.js From Scratch 2024
Duration 11 hours 54 minutes 9 seconds
Course
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
Duration 13 hours 2 minutes 12 seconds
Course
Testing Next.js Apps with Jest, Testing Library and Cypress
Duration 7 hours 35 minutes 24 seconds
Course
Build A Finance Platform
Duration 13 hours 43 minutes 45 seconds
Course
Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)
Duration 5 hours 53 minutes 23 seconds
Course
Stripe for SaaS
Duration 1 hour 11 minutes 29 seconds
Course
Next.js Projects: Build an Issue Tracker
Duration 7 hours 1 minute 57 seconds
Course