🚀 Full-stack разработка Trello 2.0 | RED PLANNER [Next.js 14 / React / Nest / TypeScript / Prisma]

Поддержи видео лайком, 2500 лайков 👍 и я делаю новый большой проект!

Представляем вам разработанный нами сайт для планирования. В этом ролике мы создадим full-stack приложение Red Planner на популярном фреймворке React. Мы начнем с создания фронтенда, а затемку перейдем к созданию бэкенда с использованием фреймворка Nest и проект будет типизирован с использованием TypeScript (TS). Ещё в проекте будет использоваться такие технологии как prisma, horizon ui, axios, nextjs 14, express и тд. Приложение Trello 2.0 будет иметь все основные функции оригинального Trello, такие как создание, редактирование и удаление карточек, таймер, канбан, перетаскивание карточек между колонками и тд. Более того мы добавим в приложение тайм блокинг, который дает возможность идеально планировать свое расписание, перетаскивать задачи и многое другое. Приятного просмотра.

🍥 Тема в редактор/IDE - After Dark / Halcyon. Font - Jetbrains mono
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze

Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!

00:00:00 - Начало
00:01:40 - Исходник проекта
00:03:10 - Почему такая система планирования?
00:04:35 - Стэк проекта
00:06:30 - ДЕМО
00:18:50 - Структура БД
00:25:00 - Шрифт/Тема/Иконки
00:25:19 - Разворачиваем бэкэнд
00:30:50 - Ставим важные зависимости
00:33:50 - Базовые настройки проекта
00:35:50 - Insomnia
00:37:50 - Prisma и схема БД
00:54:50 - Настройка back-end
00:59:50 - Первая генерация
01:03:20 - Авторизация ​
01:11:20 - Детальный разбор ошибок NestJS
01:12:20 - Продолжаем делать авторизацию
01:22:30 - Сервис авторизации
01:35:50 - Серверные куки к запросу
01:37:50 - Контроллер для авторизации
01:43:10 - Тест в Insomnia
01:44:57 - DTO пользователя
01:47:50 - Сервис пользователя
01:53:50 - Контроллер пользователя
01:59:50 - DTO и сервис задачи
02:02:50 - Контроллер для задачи
02:04:20 - Тест в Insomnia
02:06:20 - Подготовка к временным блокам
02:09:45 - Транзакция
02:18:20 - Сервис для таймера
02:22:50 - Контроллер для таймера
02:24:20 - Тест в Insomnia
02:29:20 - Настройка front-end
02:35:50 - Зависимости для фронта
02:38:20 - Базовые важные настройки
02:45:10 - Tailwind конфиг
02:46:50 - Продолжаем важные настройки
02:52:30 - Пишем все типы
02:58:20 - Axios интерсепторы
03:09:10 - Сервисы на фронте
03:11:10 - Форма входа и регистрации
03:18:40 - UI компоненты
03:29:10 - Продолжаем форму
03:33:50 - middleware next 14
03:42:10 - Статистика в кабинете
03:48:10 - Dashboard Layout
04:03:00 - Настройки профиля и таймера
04:13:30 - Страница задач
04:18:30 - DragNDrop задач
04:22:00 - Группировка по дате
04:31:50 - UI для задач
04:43:30 - Хуки для задач
04:45:30 - Debounce
04:53:50 - Продолжаем делать задачи
05:04:30 - Фильтрация задач по колонкам
05:11:30 - Переключатель видов задач
05:17:30 - Канбан вид
05:24:43 - Помодоро Таймер
06:04:00 - Time blocking форма
06:13:40 - DND Time blocking
06:27:10 - Финал
06:28:00 - Итоги

👇 Полезные видео:

#Nextjs #Nestjs #RedGroup #React #Postgresql #Prisma

[REDGroup]

Всех с праздником! 🎉
*В сентябре подписок в продаже больше не будет, будут только штучные продажи каждого продукта отдельно. Сейчас последняя возможность!

[KREDKED]

Ты реально молодец! Добро делаешь для людей - не все могут себе позволить покупать курсы

[trust]

Большая работа проделана, спасибо за такой проект. Так же хочу отметить монтаж в видео, это просто шикарно, очень в тему

[MegaMaxxon]

🔥🔥🔥 гипоксическая гимнастика - > энергия++ ясность мышления++ сон++ самочувствие ++

[zuzu-wywb]

🔥🔥🔥 Это очень крутя работа, спасибо 🔥🔥🔥

[Artem-dev-VAA]

Очень ждал этот проект. спасибо за твой видео🔥🔥🔥🔥🔥🔥🔥🔥🔥

[шкаф-цг]

Проект имбище полное! Обожаю такие большие проекты

[ВікторКармазенюк]

Контент топ!) Огромное уважение за такую работу)) жду еще больше видео и проектов особенно!)

[lumberpants]

Ваау! Что за бомба!!!! Реально спасибо большое, что все так подробно обьясняешь🤩🤩🤩

[vladmaximov]

Только приступил, но по началу могу сказать, что это лучший контент. На уровне Минина ) продолжай в том же духе ))

[danylokarpenko]

красавчик) нечаянно на тебя попал сегодня! и тут такой приятный проект

[vovchara_frontdev]

Крутяк!!!! Макс как всегда красавчик, не всегда получается на трансляции попасть, но эти записи просто супер для обучающихся и практикующих!)

[carlcj]

Ппц я его ждал, уверен, что на многие непонятные вещи в этом великолепном видео есть ответы и разъяснения. Хочу выразить благодарность за проделанную работу, это невероятно здорово, я больше никого не знаю и никогда не видел кто делал бы настолько масштабно и круто, почти все делают какие-то маленькие приложения которые может сделать любой новичок, а ты Макс делаешь невероятно крутые проекты, где есть чему поучиться мб даже миддл разработчику.
Это просто клондайк практики.
Единственная к тебе просьба - только не останавливайся и не сдавайся.
Спасибо тебе ещё раз за такой проект да ещё и в бесплатном доступе

[ЭдуардАзизян-нк]

Максим спасибо за такой годный проект!!!🔥🔥🔥

[introvert]

ты молодец) мне очень нравятся твои ролики очень хорошо все разбираешь. Понятным для простого начинающего разработчика)

[alexeymonarh]

Красавчик, спасибо! Проект бомба. Желаю удачи и успехов для вашего канала👏💪

[DeLetSHift]

Огроманя благодарность за качественный контент. Я в начале думал, что автор наверное слишком радуется. Но работа проделана и правда очень крутая, спасибо!

[gyglejid]

Коммент, лайкос, подписка и благодарочка за труды! Действительно действенная помощь)

[illusprite]

Автоматизация реально крутая! Отличная работа, спасибо

[danylokarpenko]

очень круто объясняешь! скорость отличная! нету воды и лишних секунд! спасибо!