udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Shadcn UI и Next JS - Создание красивых панелей управления с помощью shadcn
Shadcn UI & Next JS - Build beautiful dashboards with shadcn
★4.6 (всего оценок - 13)
Продолжительность
8 ч 12 мин
Категория
Next.jsКоличество уроков
47 Видео
Дата добавления
22 июл. 2024 г., 16:32
Язык
Английский
Дата выхода
26 июн. 2024 г., 01:00
Дата обновления
29 апр. 2026 г., 20:49
Этот курс создан для тех, кто хочет уверенно и быстро освоить современный фронтенд, используя мощный стек Next.js + Shadcn UI. Вы изучите практики построения интерфейсов профессионального уровня, научитесь работать с формами, валидацией, компонентами, графиками и Tailwind CSS — всё это на примере создания полноценной панели управления “SupportMe”.
Что вы узнаете в этом курсе
Курс охватывает ключевые инструменты и методики, необходимые для создания современного интерфейса панели управления. Материал подается от фундаментальных концепций к более продвинутым возможностям Shadcn UI и Next.js.
Shadcn UI в реальных проектах
Вы разберете структуру библиотеки, узнаете, как грамотно подключать и настраивать компоненты, а также научитесь расширять их под конкретные задачи.
Next.js для удобной разработки
Мы используем преимущества серверного рендеринга и маршрутизации Next.js, чтобы выстроить эффективную архитектуру фронтенд-приложения без необходимости подключать бэкенд.
Практика с формами и валидацией
Формы — ключевой элемент любой панели управления. В курсе вы научитесь работать с react-hook-form и Zod, создавая динамичные, удобные и защищённые формы.
Валидация на клиенте
- Настройка схем Zod
- Связка react-hook-form с типизацией
- Улучшение UX с правильной обратной связью пользователю
Создание сложных интерфейсных элементов
Вы научитесь собирать формы любой сложности — от простых полей до многоуровневых структур.
Стилизация и расширение UI
Курс уделяет особое внимание кастомизации интерфейса с помощью Tailwind CSS и расширению компонентов Shadcn UI.
Tailwind CSS без боли
Мы используем утилитарный подход к стилям, что позволяет быстро и гибко создавать визуальную логику прямо в HTML.
Расширение компонентов
Вы разберете, как адаптировать компоненты под свои задачи, а также какие паттерны помогают сохранять чистоту и масштабируемость кода.
Интерактивные графики с Recharts
Чтобы панель управления выглядела профессионально, вы научитесь визуализировать данные с помощью Recharts.
Построение адаптивных графиков
- Линейные и столбчатые диаграммы
- Кастомизация элементов графиков
- Добавление интерактивности
Финальный проект: панель управления SupportMe
Всё обучение вы примените на практике, создавая вымышленную панель управления для отслеживания сотрудников, команд и заявок службы поддержки.
Почему это лучший способ обучения
- Только фронтенд — никакой нагрузки бэкенда
- Фиктивные данные для максимально быстрых экспериментов
- Фокус на реальных интерфейсных задачах
- Понимание структуры продвинутых UI-приложений
Итог
После прохождения курса вы сможете уверенно создавать современные, визуально привлекательные и функциональные панели управления с использованием Next.js, Shadcn UI и Tailwind CSS — навыки, востребованные в реальной разработке.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:05:35Project overview
- Урок 2. 00:00:39Udemy ratings and reviews
- Урок 3. 00:09:07Set up new Next JS project and install shadcn ui
- Урок 4. 00:10:38Add the landing page text and buttons
- Урок 5. 00:17:32Tidying up the landing page styles and link to login and signup pages
- Урок 6. 00:11:01Customise shadcn ui theme
- Урок 7. 00:18:24Build the light and dark mode toggle
- Урок 8. 00:10:23Add the login page and card
- Урок 9. 00:23:18Create the login form
- Урок 10. 00:03:44Add the sign up page and card
- Урок 11. 00:09:41Add the account type select field
- Урок 12. 00:09:02Add the company name and employees fields and validation
- Урок 13. 00:06:59Add the date of birth validation
- Урок 14. 00:11:17Add the date of birth field with Popover
- Урок 15. 00:19:49Customize the Calendar
- Урок 16. 00:16:14Render selected date + custom dropdowns for month / year selection
- Урок 17. 00:13:54Add the dropdown captions and years values
- Урок 18. 00:04:58Hook up month and year navigation anytime the custom dropdown values change
- Урок 19. 00:16:35Add the password and confirm password fields
- Урок 20. 00:12:04Create a custom PasswordInput component
- Урок 21. 00:14:16Add the terms and conditions checkbox
- Урок 22. 00:02:42BUG FIX: terms and conditions checkbox
- Урок 23. 00:07:18Create the dashboard layout
- Урок 24. 00:07:07Create the MenuTitle
- Урок 25. 00:09:53Build out the side panel menu items
- Урок 26. 00:12:10Add the sidebar footer with Avatar
- Урок 27. 00:04:56Add the missing pages and refactor HTML tags
- Урок 28. 00:04:54Add the employees stats and teams stats tabs
- Урок 29. 00:04:22Add the data Cards
- Урок 30. 00:09:34Start adding the Card content
- Урок 31. 00:03:37Extend the shadcn ui Button component
- Урок 32. 00:12:08Add the employees present card content
- Урок 33. 00:08:42Add the employee of the month card content
- Урок 34. 00:19:00Create the stacked bar chart with recharts
- Урок 35. 00:18:15Finish the bar chart
- Урок 36. 00:07:19Create the teams stats component
- Урок 37. 00:09:39Add the team leaders card content
- Урок 38. 00:11:41Add the team distribution pie chart
- Урок 39. 00:14:29Add the support tickets resolved line graph
- Урок 40. 00:06:54Mobile menu (part 1)
- Урок 41. 00:11:23Mobile menu (part 2)
- Урок 42. 00:12:44Mobile menu (part 3)
- Урок 43. 00:07:08Mobile menu (part 4)
- Урок 44. 00:09:51Create the loading skeleton for the employees table
- Урок 45. 00:13:48Create the employees data table
- Урок 46. 00:08:42Add pagination for the employees data table
- Урок 47. 00:09:12Clean up the styling of the data table
Автор - udemy
Комментарии