Mô tả

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.

Bạn sẽ học được gì

Yêu cầu

Nội dung khoá học

7 sections

Introduction

4 lectures
Important! Read this before you start the course! (Github repo etc)
00:55
Project overview
05:34
Udemy ratings and reviews
00:38
Set up new Next JS project and install shadcn ui
09:06

Build the landing page

4 lectures
Add the landing page text and buttons
10:37
Tidying up the landing page styles and link to login and signup pages
17:31
Customise shadcn ui theme
11:00
Build the light and dark mode toggle
18:23

Build the login page

2 lectures
Add the login page and card
10:22
Create the login form
23:17

Build the sign up page

12 lectures
Add the sign up page and card
03:43
Add the account type select field
09:40
Add the company name and employees fields and validation
09:01
Add the date of birth validation
06:58
Add the date of birth field with Popover
11:16
Customize the Calendar
19:48
Render selected date + custom dropdowns for month / year selection
16:13
Add the dropdown captions and years values
13:53
Hook up month and year navigation anytime the custom dropdown values change
04:57
Add the password and confirm password fields
16:34
Create a custom PasswordInput component
12:03
Add the terms and conditions checkbox
14:15

Build the dashboard layout

5 lectures
Create the dashboard layout
07:17
Create the MenuTitle
07:06
Build out the side panel menu items
09:52
Add the sidebar footer with Avatar
12:09
Add the missing pages and refactor HTML tags
04:55

Build the My Dashboard page

12 lectures
Add the employees stats and teams stats tabs
04:53
Add the data Cards
04:21
Start adding the Card content
09:32
Extend the shadcn ui Button component
03:36
Add the employees present card content
12:07
Add the employee of the month card content
08:41
Create the stacked bar chart with recharts
18:58
Finish the bar chart
18:14
Create the teams stats component
07:18
Add the team leaders card content
09:38
Add the team distribution pie chart
11:40
Add the support tickets resolved line graph
14:28

Extras

9 lectures
Mobile menu (part 1)
06:52
Mobile menu (part 2)
11:22
Mobile menu (part 3)
12:43
Mobile menu (part 4)
07:07
Create the loading skeleton for the employees table
09:50
Create the employees data table
13:47
Add pagination for the employees data table
08:41
Clean up the styling of the data table
09:11
BONUS!
00:51

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.