Shadcn UI & Next JS – Build beautiful dashboards with shadcn

Shadcn UI & Next JS – Build beautiful dashboards with shadcn, available at $54.99, has an average rating of 4.84, with 49 lectures, based on 107 reviews, and has 764 subscribers.

You will learn about Increase your value and improve your knowledge as a web developer Learn how to build a dashboard with shadcn ui Learn client side validation with zod and react-hook-form Learn how to create beautiful charts and data visualizations using recharts This course is ideal for individuals who are Web developers who want to learn a better approach to building out UI's without having to do it from scratch It is particularly useful for Web developers who want to learn a better approach to building out UI's without having to do it from scratch.

Enroll now: Shadcn UI & Next JS – Build beautiful dashboards with shadcn

Summary

Title: Shadcn UI & Next JS – Build beautiful dashboards with shadcn

Price: $54.99

Average Rating: 4.84

Number of Lectures: 49

Number of Published Lectures: 49

Number of Curriculum Items: 49

Number of Published Curriculum Objects: 49

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

Increase your value and improve your knowledge as a web developer
Learn how to build a dashboard with shadcn ui
Learn client side validation with zod and react-hook-form
Learn how to create beautiful charts and data visualizations using recharts

Who Should Attend

Web developers who want to learn a better approach to building out UI's without having to do it from scratch

Target Audiences

Web developers who want to learn a better approach to building out UI's without having to do it from scratch

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 onlyon 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.

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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Important! Read this before you start the course! (Github repo etc)

Lecture 2: Project overview

Lecture 3: Udemy ratings and reviews

Lecture 4: Set up new Next JS project and install shadcn ui

Chapter 2: Build the landing page

Lecture 1: Add the landing page text and buttons

Lecture 2: Tidying up the landing page styles and link to login and signup pages

Lecture 3: Customise shadcn ui theme

Lecture 4: Build the light and dark mode toggle

Chapter 3: Build the login page

Lecture 1: Add the login page and card

Lecture 2: Create the login form

Chapter 4: Build the sign up page

Lecture 1: Add the sign up page and card

Lecture 2: Add the account type select field

Lecture 3: Add the company name and employees fields and validation

Lecture 4: Add the date of birth validation

Lecture 5: Add the date of birth field with Popover

Lecture 6: Customize the Calendar

Lecture 7: Render selected date + custom dropdowns for month / year selection

Lecture 8: Add the dropdown captions and years values

Lecture 9: Hook up month and year navigation anytime the custom dropdown values change

Lecture 10: Add the password and confirm password fields

Lecture 11: Create a custom PasswordInput component

Lecture 12: Add the terms and conditions checkbox

Lecture 13: BUG FIX: terms and conditions checkbox

Chapter 5: Build the dashboard layout

Lecture 1: Create the dashboard layout

Lecture 2: Create the MenuTitle

Lecture 3: Build out the side panel menu items

Lecture 4: Add the sidebar footer with Avatar

Lecture 5: Add the missing pages and refactor HTML tags

Chapter 6: Build the My Dashboard page

Lecture 1: Add the employees stats and teams stats tabs

Lecture 2: Add the data Cards

Lecture 3: Start adding the Card content

Lecture 4: Extend the shadcn ui Button component

Lecture 5: Add the employees present card content

Lecture 6: Add the employee of the month card content

Lecture 7: Create the stacked bar chart with recharts

Lecture 8: Finish the bar chart

Lecture 9: Create the teams stats component

Lecture 10: Add the team leaders card content

Lecture 11: Add the team distribution pie chart

Lecture 12: Add the support tickets resolved line graph

Chapter 7: Extras

Lecture 1: Mobile menu (part 1)

Lecture 2: Mobile menu (part 2)

Lecture 3: Mobile menu (part 3)

Lecture 4: Mobile menu (part 4)

Lecture 5: Create the loading skeleton for the employees table

Lecture 6: Create the employees data table

Lecture 7: Add pagination for the employees data table

Lecture 8: Clean up the styling of the data table

Lecture 9: BONUS!

Instructors

Tom Phillips
Fast-paced information-dense courses for busy web developers
WebDevEducation (Tom Phillips)
Fast-paced information-dense courses for busy web developers

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 1 votes
4 stars: 18 votes
5 stars: 88 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu