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

🔥 Оформить премиум подписку - htmllessons.ru/premium?...
❤️ Отзывы тут - t.me/htmllessons_reviews
🦋 Наш ТГ канал - t.me/redgroupchannel
Поддержи видео лайком, 2500 лайков 👍 и я делаю новый большой проект!
🖥 RED Planner бесплатный исходник - htmllessons.ru/repositories#s...
🧪 Также есть версия папка проекта + схема insomnia + дизайн + базовый сетап для практики (доступно по подписке) - htmllessons.ru/repositories#s...
🔐 МК по авторизации (все исходники и запись доступны навсегда!) - t.me/red_master_class_bot
Представляем вам разработанный нами сайт для планирования. В этом ролике мы создадим full-stack приложение Red Planner на популярном фреймворке React. Мы начнем с создания фронтенда, а затемку перейдем к созданию бэкенда с использованием фреймворка Nest и проект будет типизирован с использованием TypeScript (TS). Ещё в проекте будет использоваться такие технологии как prisma, horizon ui, axios, nextjs 14, express и тд. Приложение Trello 2.0 будет иметь все основные функции оригинального Trello, такие как создание, редактирование и удаление карточек, таймер, канбан, перетаскивание карточек между колонками и тд. Более того мы добавим в приложение тайм блокинг, который дает возможность идеально планировать свое расписание, перетаскивать задачи и многое другое. Приятного просмотра.
⚡️ Список интенсивов по подписке - htmllessons.ru/list-intensive...
☑️ Чеклист "С нуля до Senior front-end" - t.me/checklist_redgroup_pay_bot
VK - redgroupchannel
🍥 Тема в редактор/IDE - After Dark / Halcyon. Font - Jetbrains mono
🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze
Шрифт - fsd.it/shop/fonts/pragmatapro/
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
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 - Итоги
⚡️Закрытый клуб "5 утра" - htmllessons.ru/ext/club
💡 Личный ТГ канал - t.me/hardmaxchannel
👇 Полезные видео:
Настройка vs code - • Полный курс по настрой...
Настройка webstorm - • Настройка, которая сде...
Настройка терминала - • Настройка терминала 20...
👉 Все ссылки (+ настройка редактора) и информация обо мне - redlinks.tech/
#Nextjs #Nestjs #RedGroup #React #Postgresql #Prisma

[@REDGroup]

🔥 Оформить премиум подписку - htmllessons.ru/premium Поддержи видео лайком, 2500 лайков 👍 и я делаю новый большой проект! 🦋 Бесплатный исходник уже в ТГ канале - t.me/redgroupchannel

[@KREDKED]

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

[@user-vy5ry2xp7g]

2700 месяц на электронки больше тратят многие) Так что не надо жаловаться)

[@yuryvashchanchuk1087]

[@lumberpants8815]

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

[@Artem-dev-VAA]

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

[@artematrr]

🔥Ждём, когда видео расхайпится 🔥

[@trust6077]

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

[@Sergey_Klimov]

Здорово. Спасибо тебе. Не опускай руки!

[@zuzu-wy9wb]

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

[@vovchara_frontdev]

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

[@user-um4ve8cz6t]

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

[@user-hp6qz3ui9e]

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

[@richardleshik7477]

Годно! Больше больших проектов богу больших проектов! 🎉🎉

[@danylokarpenko4943]

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

[@alexeymonarh6764]

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

[@gyglejid]

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

[@KVV77Seven]

Супер!🔥🔥🔥

[@carlcj6139]

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

[@introvert5462]

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

[@MegaMaxxon]

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

[@ligh7fun]

Отличный контент, супер 🤗

[@danylokarpenko4943]

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

[@user-hp3kl7jp9z]

Просто шикарная работоспособность!

[@kreet4855]

Спасибо за твой труд!

[@mihhha8552]

Супер, давно ждал что то подобного

[@Melastor]

Гут. Спасибо за титанический труд и за вклад в сообщество.

[@user-fq6sh6jh6s]

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

[@illusprite367]

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

[@curious001]

Это жирный лайк!)

[@IvanovJeniaIT]

Круто, спасибо за видео!!!

[@natali1711]

Крутой выпуск!!! Молодчина)))Красавчик

[@vlladimirr21]

Спасибо большое за крутой контент!

[@deepweed0]

Спасибо большое :)

[@vladmaximov9474]

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

[@NikitaKazantsev1C]

Со стороны студентов тебе огромное спасибо❤. Помог написать немало курсовых)

[@Tochichka6]

🤩🤩🤩Это действительно бомба-интенсив!

[@cepbepok]

Отличное видео, спасибо большое! Мне не хватило в авторизации ролей, пришлось самому разбираться)

[@user-qq1zb5jx6w]

Круто!🔥 🔥 🔥

[@top._quotes]

огонь бро, спасибо

[@LenaFelica_songwriter]

Круто, спасибиссимо!!🤘🤘🤘🤘

[@fesyse4945]

Максим, спасибо что делаешь такие большие ролики и делишься своими знаниями 🔥🔥🔥

[@denissavast]

Благодарю !👋

[@GiGaBiteee-wy4vc]

Проект очень топовый! Коммент для продвижения

[@OKSANA_WebDevelepment]

Просто огонь Макс!!!! Спасибо)))

[@REDGroup]

Пожалуйста

[@maxpro7135]

Спасибо за контент 🎉😊

[@mort7525]

Ура, заслуженный лайк👍👍👍🔥🔥🔥 Набираем лайкосы👍👍👍

[@ilya9772]

Красава,вот это контент!

[@TamikMachine]

Это просто мега круто💯

[@user-iw7wr5yk1d]

Очень крутой видос спасибо Максим

[@mivolo_boy]

Красавчик!!! Не останавливайся, это ооооочень крутой видос Кто еще может вот так в открытом доступе показывать разработку такого огромного проекта Просто красавчик, жду еще, а пока буду смотреть этот…) Благо, он на 6,5 часов )

[@frozzy42]

Очень круто!!!

[@devcodingitstudio2764]

Топчик!

[@IvanFrantsuzov]

Супер!

[@YtArslan]

Супер🔥

[@nikko374]

Ролик топ ❤

[@st1gmata950]

Жду еще интересных стаков!

[@vita8451]

спасибо за твой видео🔥🔥🔥🔥🔥🔥🔥🔥 Next.js 14 / React / Nest / TypeScript / Prisma

[@tezis.digital]

Я после голосовухи в телеге пишу. Ролик обязательно окупится! Как минимум из-за него я подписку докупил на 3 месяца, хотя хотел пока на ютубе тебя посмотреть и бесплатные проекты проработать. К тому же скорее всего по себе знаю, что некоторые откладывают просмотр больших проектов, пока не закроют текущие, либо не подрастут до более высокого уровня просто чтобы проект был понятен! Лично я только добрался до Amazon 2.0 😂 поэтому просто не могу прерваться на планнер) и есть мотивация скорее закончить, чтобы скорее приступить к Трелло) Ты крутой, не опускай руки, твоя работа в долгую и это очень ценно 🚀🚀🚀

[@REDGroup]

Принять слышать и спасибо за неравнодушие. Но факт есть в том, что видео не так интересно. Что-то надо еще улучшать, чтобы выйти в топы.

[@olhasotova3589]

Макс красавчик ! Спасибо !

[@ximik6452]

Это круто! Один из самых крутых проектов в портфолио! 🔥

[@BekbolTailakov]

где он сохранил рефреш токен в cookie? он начал использовать а я не заметил когда он туда положил

[@mmmikasa]

Попробовал воспроизвести проект, бэк отрабатывает с Insomnia отлично. Но когда начался фронт, на моменте с формой авторизации, форма появляется, но при нажатии на кнопки ничего не происходит. Потом просто закинул всю папку с фронтом из исходников и также ничего не происходит, просто висит форма, можно заполнить поля, но дальше ничего не происходит. Еще почему-то "Auth" на форме черного цвета, а не белого. Куда заплатить, чтобы мне помогли запустить этот проект. Очень нужно, для диплома🙃) А так видео супер, я считаю, лучший урок по созданию веб-приложения на ютубе из всех, которые я нашел, а я нашел очень много. Мне кажется, лучше не двигаться в сторону писанины с 0 в будущем, а потратить время на разжевывание кода. А насчет длительности, хоть 20 часов, такие уроки буду смотреть с кайфом, можно просто разбивать на части. Скоро 100к, удачи🖖

[@serlantart9459]

получилось исправить проблему?

[@mmmikasa]

@@serlantart9459 нет, к сожалению

[@serlantart9459]

@@mmmikasa у меня тоже, но я думаю, что это как-то связано с url и localhost

[@mmmikasa]

@@serlantart9459 не понял, что не так с url и localhost?

[@serlantart9459]

@@mmmikasa у тебя бэкенд отправляет обратно запрос на localhost 3001 (как прописано в файле main ts в части бэка), а у тебя фронт скорее всего на localhost 3000. Тебе отправлять запросы надо на localhost3000, поэтому в файле надо поменять 3001 на 3000

[@user-ik1in6zt4y]

Отлично !

[@temurbekrajapboyev8416]

Thank you very much bro, for free lessons🔥🔥

[@user-fs2ii9bk5l]

🔥 огонь.....

[@khanchobai9748]

😮😮😮 круто!

[@chunga4884]

🔥🔥🔥

[@CryptoGamees]

Красавчик

[@user-ow1cx9xc9g]

Спасибо тебе за годные контенты Макс. Твоя платформа топ за свои деньги

[@_simula_7403]

👑Cool!

[@jok7179]

Спосибо🔥🔥🔥

[@kiricle]

Спасибо за такой крутой контент

[@yurchinhotv2972]

Невероятно

[@supitacantora413]

Круто!!!!

[@overshotkuka9347]

Уважение автору!! Контент реально полезный❤

[@dionisiukevelsky9780]

неплохо парень неплохо у каждого в жизни случаются испытания самое главное не сдаваться и все обязательно получится

[@flyguy9864]

ура спасибо некст 14 проект пушка 🚀🚀🚀🚀

[@timmr6420]

очень круто

[@narwhal6422]

Супер🎉

[@Igor-km5qp]

Keep grinding dude.

[@MRX-mp4cs]

Спасибо

[@user-fv6uf8gt2r]

коммент в поддержку!!!

[@MegaMaxxon]

Макс, давай жги! Проекты очень интересные, стек огонь 👍 Аудитория растёт но нужно время. Траверси вон долго разгонялся, начал его смотреть когда у него 100 тыс было)

[@REDGroup]

Благодарочка

[@mmmikasa]

🙃Кто пробовал запустить этот проект? Поставьте +

[@artiomborisov6838]

Коммент 3 для активности

[@niktop7172]

Очень годный монтаж. Новый уровень

[@tushcaron]

Спасибо, бро, рад стараться 😉 (Сижу и ищу комменты про свои смонтированные шесть с половиной минут в начале видоса 😂)

[@injty]

молодец. качественный контент для работяг. удачи тебе.

[@openuptun8056]

Nice!

[@user-px2cr6tc4z]

🔥

[@Halida81]

молодцы ребят

[@nurseyitbaktbek3110]

Контент в кайф

[@user-wk4em3pd3g]

🔥🔥🔥🔥🔥🔥🔥🔥

[@fgewbtrfdhsb]

Газ⚡

[@user-hj2tg7cy2p]

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@NICRYDO]

монтаж пушка

[@user-wp2vc8dg5o]

🔥🔥🔥🔥

[@WebFrontend-gx8cm]

🔥🚀

[@abadal4141]

крутой проект, удачи

[@user-fc3qx5fi2m]

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

[@user-pl5ig1te3g]

Крутой проект, спасибо тебе за твой труд! Очень мотивируешь двигаться дальше! Лайфхак: если не работают импорты то можно нажать command+shift+p и выбрать Restart TS Server. Обычно это помогает, так как после установки новых библиотек авто импорты могут не подтягиваться

[@pubgmabail3041]

RED group вперёд 🎉

[@GiGaBiteee-wy4vc]

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥