Shadcn UI & Next JS - Build beautiful dashboards with shadcn

Focused View

Tom Phillips,WebDevEducation Support

6:38:34

0 View

1. Introduction

1. Important! Read this before you start the course! (Github repo etc).html

2. Project overview.mp4

05:34

3. Udemy ratings and reviews.mp4

00:38

4. Set up new Next JS project and install shadcn ui.mp4

09:06

2. Build the landing page

1. Add the landing page text and buttons.mp4

10:37

2. Tidying up the landing page styles and link to login and signup pages.mp4

17:31

3. Customise shadcn ui theme.mp4

11:00

4. Build the light and dark mode toggle.mp4

18:23

3. Build the login page

1. Add the login page and card.mp4

10:22

2. Create the login form.mp4

23:17

4. Build the sign up page

1. Add the sign up page and card.mp4

03:43

2. Add the account type select field.mp4

09:40

3. Add the company name and employees fields and validation.mp4

09:01

4. Add the date of birth validation.mp4

06:58

5. Add the date of birth field with Popover.mp4

11:16

6. Customize the Calendar.mp4

19:48

7. Render selected date + custom dropdowns for month year selection.mp4

16:13

8. Add the dropdown captions and years values.mp4

13:53

9. Hook up month and year navigation anytime the custom dropdown values change.mp4

04:57

10.1 Password input.txt

10. Add the password and confirm password fields.mp4

12:20

11. Create a custom PasswordInput component.mp4

12:03

12. Add the terms and conditions checkbox.mp4

08:16

5. Build the dashboard layout

1. Create the dashboard layout.mp4

07:17

2. Create the MenuTitle.mp4

07:06

3. Build out the side panel menu items.mp4

09:52

4. Add the sidebar footer with Avatar.mp4

12:09

5. Add the missing pages and refactor HTML tags.mp4

04:55

6. Build the My Dashboard page

1. Add the employees stats and teams stats tabs.mp4

04:53

2. Add the data Cards.mp4

04:21

3. Start adding the Card content.mp4

09:32

4. Extend the shadcn ui Button component.mp4

03:36

5. Add the employees present card content.mp4

12:07

6.1 cm.zip

6.2 rl.zip

6.3 tf.zip

6. Add the employee of the month card content.mp4

08:41

7. Create the stacked bar chart with recharts.mp4

18:58

8. Finish the bar chart.mp4

18:14

9. Create the teams stats component.mp4

07:18

10.1 cm.zip

10.2 rl.zip

10.4 tf.zip

10. Add the team leaders card content.mp4

09:38

11. Add the team distribution pie chart.mp4

11:40

12. Add the support tickets resolved line graph.mp4

13:41

Description

shadcn ui - build dashboards with shadcn ui components, including shadcn ui, tailwindcss, and Next JS (shadcn ui 2024)

What You'll 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 is this for?

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

What You Need to Know?

Have a good understanding of Javascript and React

Experience with Tailwind CSS would be beneficial

More details

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.
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.
Who this course is for:
Web developers who want to learn a better approach to building out UI's without having to do it from scratch

User Reviews

Rating

average 0

Total votes0

Focused display

Next JS

Tom Phillips

Instructor's Courses

Tom Phillips has been developing front end web and mobile apps in the United Kingdom for numerous years. In that time he has had to prepare and teach multiple courses on the latest cutting edge front end web frameworks to junior developers, as well as mentor them during their early days as junior developers. Through doing this, Tom found efficient methods to teach and break down common complex problems that many developers face when trying to get started with new frameworks, especially in such a rapidly changing field as front end web development. Now he's applying those methods to his Udemy courses!Way back when Tom himself was a junior developer, he was fortunate enough to have been mentored by experts in the field. This allowed him to rapidly progress in his career and understand and architect multiple large projects in his time as an expert front end developer. Now Tom is passing on the buck and sharing his knowledge. Get the same mentoring that Tom received by enrolling on one of his courses and fast-track your understanding and knowledge in front end web development.

WebDevEducation Support

Instructor's Courses

Tom has been a web developer for over a decade. He created WebDevEducation to provide courses that provide you with the skills to increase your value as a front end developer by improving your web development skills. Learn popular web development libraries and frameworks with Tom to get ahead of the competition!(TOMPHILL LTD - 09531652)

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.