Главная страницаКатегория next.jsПроекты Next.js: Создание трекера задач

Проекты Next.js: Создание трекера задач

Name: Проекты Next.js: Создание трекера задач
Price: 13 USD
Rating: 5 (28 reviews)

Next.js Projects: Build an Issue Tracker

codewithmosh (Mosh Hamedani)

★5 (всего оценок - 28)

Продолжительность

7 ч 1 мин

Категория

Next.js

Количество уроков

87 Видео

Дата добавления

12 окт. 2023 г., 10:06

Язык

Английский

Дата выхода

1 окт. 2023 г., 01:00

Дата обновления

29 апр. 2026 г., 18:59

Этот курс поможет вам шаг за шагом создать полноценный трекер задач на Next.js — от проектирования базы данных до развёртывания. Чёткая структура, практические видео и современные инструменты делают обучение простым и максимально прикладным.

О чем этот курс

Курс создан для разработчиков, которые хотят уверенно работать с Next.js 13+, а также научиться строить современные веб‑приложения с использованием TypeScript, Prisma, Tailwind и Radix UI. Вместо хаотичных объяснений вы получаете комплексную, логичную и по‑настоящему практичную программу.

Что вы создадите

На протяжении курса вы разработаете реальный трекер задач — приложение, включающее аутентификацию, управление задачами, маршрутизацию, API-эндпоинты и интеграцию с базой данных.

Какие навыки вы получите

Создание приложений на Next.js 13+ с использованием App Router
Работа с TypeScript и типобезопасность на практике
Использование Prisma для работы с базой данных
Проектирование UI с Tailwind CSS и Radix UI
Создание RESTful API в Next.js
Аутентификация на NextAuth.js
Оптимизация производительности и улучшение SEO
Отладка и устранение ошибок в процессе разработки
Развёртывание приложений в продакшн

Кому подойдет этот курс

Материал рассчитан на разработчиков уровня от начинающего до продолжающего, которые:

уже знают основы JavaScript или TypeScript;
хотят перейти на современный стек Next.js 13+;
ищут структурированное обучение через реальный проект;
предпочитают практику, а не теорию.

Структура курса

1. Основы и подготовка окружения

Вы настроите проект, установите зависимости, разберётесь с App Router и необходимыми инструментами.

2. Проектирование и создание интерфейса

С помощью Tailwind и Radix UI вы создадите современный, понятный и адаптивный интерфейс трекера задач.

3. Работа с данными

Вы научитесь моделировать данные в Prisma, выполнять миграции и подключать базу данных к Next.js.

4. Реализация API и аутентификации

Курс научит создавать RESTful API, управлять задачами и внедрять вход/регистрацию через NextAuth.js.

5. Оптимизация и деплой

Заключительный этап включает улучшение производительности, SEO и публикацию приложения.

Преимущества курса

Пошаговое обучение с акцентом на практику
Современный стек, востребованный на рынке
Понятные объяснения без лишней теории
Легко воспроизводимый проект, который можно развивать дальше
Полезные советы, лайфхаки и VSCode-шорткаты для ускорения работы

Итог

После прохождения курса вы сможете самостоятельно создавать современные веб‑приложения на Next.js — от идеи до готового развернутого продукта. Это отличный шаг вперёд для повышения квалификации и уверенной работы с современным фронтенд‑стеком.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:02:06
1- Welcome
Урок 2. 00:00:51
2- Prerequisites
Урок 3. 00:00:39
3- Source Code
Урок 4. 00:00:59
4- How to Take This Course
Урок 5. 00:02:17
1- Project Roadmap
Урок 6. 00:01:18
2- Setting Up the Development Environment
Урок 7. 00:02:53
3- Creating the Project
Урок 8. 00:08:53
4- Building the navbar
Урок 9. 00:06:19
5- Styling the Active Link
Урок 10. 00:01:59
1- Setting Up MySQL
Урок 11. 00:01:47
2- Setting Up Prisma
Урок 12. 00:06:41
3- Creating the Issue Model
Урок 13. 00:06:56
4- Building an API
Урок 14. 00:02:34
5- Setting Up Radix UI
Урок 15. 00:04:58
6- Building the New Issue Page
Урок 16. 00:04:54
7- Customizing Radix UI Theme
Урок 17. 00:01:57
8- Adding a Markdown Editor
Урок 18. 00:08:44
9- Handling Form Submission
Урок 19. 00:06:50
10- Handling Errors
Урок 20. 00:06:15
11- Implementing Client-side Validation
Урок 21. 00:03:23
12- Extracting the ErrorMessage Component
Урок 22. 00:04:22
13- Adding a Spinner
Урок 23. 00:03:59
14- Discussion- Code Organization
Урок 24. 00:05:05
1- Showing the Issues
Урок 25. 00:08:09
2- Building the Issue Status Badge
Урок 26. 00:06:20
3- Adding Loading Skeletons
Урок 27. 00:06:47
4- Showing Issue Details
Урок 28. 00:04:11
5- Styling the Issue Detail Page
Урок 29. 00:03:35
6- Adding Markdown Preview
Урок 30. 00:06:41
7- Building a Styled Link Component
Урок 31. 00:05:16
8- Additional Loading Skeletons
Урок 32. 00:02:59
9- Disabling Server-side Rendering
Урок 33. 00:05:28
10- Refactoring- Organizing Imports
Урок 34. 00:04:44
1- Adding the Edit Button
Урок 35. 00:07:32
2- Applying the Single Responsibility Principle
Урок 36. 00:06:29
3- Building the Edit Issue Page
Урок 37. 00:06:45
4- Building an API
Урок 38. 00:02:04
5- Updating Issues
Урок 39. 00:08:18
6- Understanding Caching
Урок 40. 00:06:59
7- Improving the Loading Experience
Урок 41. 00:07:03
1- Adding a Delete Button
Урок 42. 00:04:05
2- Adding a Confirmation Dialog Box
Урок 43. 00:02:44
3- Building an API
Урок 44. 00:02:12
4- Deleting an Issue
Урок 45. 00:04:30
5- Handling Errors
Урок 46. 00:02:22
6- Improving the User Experience
Урок 47. 00:04:03
7- Removing Duplicate Skeletons
Урок 48. 00:03:48
1- Setting Up NextAuth
Урок 49. 00:05:47
2- Configuring Google Provider
Урок 50. 00:05:29
3- Adding the Prisma Adapter
Урок 51. 00:05:19
4- Adding the Login and Logout Links
Урок 52. 00:04:31
5- Change the Layout of the NavBar
Урок 53. 00:04:23
6- Adding a Drop-down Menu
Урок 54. 00:03:03
7- Troubleshooting- Avatar Not Loading
Урок 55. 00:08:08
8- Refactoring the NavBar
Урок 56. 00:01:50
9- Adding a Loading Skeleton
Урок 57. 00:07:46
10- Securing the Application
Урок 58. 00:02:58
1- Building the Assignee Select Component
Урок 59. 00:05:37
2- Populating the Assignee Select Component
Урок 60. 00:04:21
3- Setting Up React Query
Урок 61. 00:06:46
4- Fetching Data with React Query
Урок 62. 00:04:06
5- Add Assigned Issues to Prisma Schema
Урок 63. 00:10:59
6- Implementing the API
Урок 64. 00:04:39
7- Assigning an Issue to a User
Урок 65. 00:02:43
8- Showing Toast Notifications
Урок 66. 00:05:17
9- Refactoring the Assignee Select Component
Урок 67. 00:05:54
1- Building the Filter Component
Урок 68. 00:06:42
2- Filtering Issues
Урок 69. 00:07:20
3- Making Columns Sortable
Урок 70. 00:03:08
4- Sorting Issues
Урок 71. 00:05:21
5- Fix Filtering Bugs
Урок 72. 00:02:52
6- Generating Dummy Data
Урок 73. 00:06:15
7- Building the Pagination Component
Урок 74. 00:04:04
8- Implementing Pagination
Урок 75. 00:05:00
9- PaginatingIssues
Урок 76. 00:08:38
10- Refactoring- Extracting IssueTable Component
Урок 77. 00:07:40
1- Building the LatestIssues Component
Урок 78. 00:07:21
2- Building the IssueSummary Component
Урок 79. 00:06:18
3- Building the BarChart Component
Урок 80. 00:02:30
4- Laying Out the Dashboard
Урок 81. 00:04:12
1- Adding Metadata
Урок 82. 00:04:22
2- Optimizing Performance Using React Cache
Урок 83. 00:03:25
3- Removing.env File
Урок 84. 00:03:59
4- Setting Up Error Tracking
Урок 85. 00:02:34
5- Setting Up the Production Database
Урок 86. 00:10:31
6- Deploying to Vercel
Урок 87. 00:00:26
1- Course Wrap Up

Автор - codewithmosh (Mosh Hamedani)

codewithmosh (Mosh Hamedani)

Здравствуй! Меня зовут Мош Хамедани. За последние три года я преподавал более 1 млн. стулентам как программировать или как стать лучшим кодером через мои онлайн-курсы и канал YouTube. Я работаю инженером-программистом в течение последних 18 лет, и я люблю делиться своими знаниями с вами.

+406

Комментарии

dimi
12 мар. 2024 г., 18:16
Please add the newest course from Mosh https://codewithmosh.com/p/react-testing-mastery
It's already in orders https://coursehunter.net/order-desc?order-id=13951
Mubashir
13 окт. 2023 г., 16:10
Please upload pdfs like Additional Exercises and others
CourseHunter Team Mubashir
13 окт. 2023 г., 20:56
updated