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!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024