Nest js & Next js ПОЛНЫЙ КУРС. FullStack разработка SSR на React TypeScript. Музыкальная платформа

В этом курсе мы разработаем fullstack музыкальную платформу на TypeScript. Серверная часть приложения будет построена с использованием фреймворка Nest js. На клиенте будем использовать Server side rendering на React с использованием фреймворка Next js.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Ссылка на исходный код - github.com/utimur/music-platf...
Макет в figma - www.figma.com/file/irTuBB34zS...
Ссылка на схему БД - clck.ru/TNAVD
Необходимые знания для прохождения этого курса:
1. Playlist по Redux - • Redux
2. Redux + TypeScript - • React & Redux & TypeSc...
3. Быстрый курс по Next JS - • Next JS быстрый курс S...
4. Mongo DB - • Mongo DB ПОЛНЫЙ КУРС
5. Практика, которую необходимо освоить - • React & Node.js ИНТЕРН...
6. Подгрузка данных при скроле - • Динамическая пагинация...
Таймкоды:
00:00 - [ВВЕДЕНИЕ] - Введение, теория, план на урок
02:00 - [BACKEND] - Начало работы с Nest JS
03:05 - [BACKEND] - Структура приложения
09:20 - [BACKEND] - Проектирование диаграммы базы данных
11:30 - [BACKEND] - Сервис, Модуль, Контроллер
14:27 - [BACKEND] - Подключаемся к БД, описываем схему данных
22:15 - [BACKEND] - REST API, DTO
34:40 - [BACKEND] - Загрузка файлов, раздача статики, FileService
54:30 - [BACKEND] - CORS, завершаем разработку сервера
54:40 - [FRONTEND] - Начало работы, создаем NEXT проект
55:25 - [FRONTEND] - Подключаем TypeScript
59:10 - [FRONTEND] - Бургер меню
01:03:40 - [FRONTEND] - MainLayout
01:06:00 - [FRONTEND] - Страница со списком треков
01:12:15 - [FRONTEND] - Подключаем S[AC]SS
01:16:10 - [FRONTEND] - Страница подробного просмотра трека с комментариями
01:22:15 - [FRONTEND] - Страница с поэтапным созданием трека
01:30:01 - [FRONTEND] - Компонент для загрузки файлов
01:36:00 - [FRONTEND] - Верстка плеера
01:40:30 - [FRONTEND] - Логика плеера, подключаем Redux, Next redux wrapper
01:42:10 - [FRONTEND] - Типизируем PlayerReducer
01:50:00 - [FRONTEND] - Кастомные хуки useActions, useTypedSelector
01:52:30 - [FRONTEND] - action creators
01:56:00 - [FRONTEND] - работа с объектом Audio в браузере, проигрывание трека
02:07:40 - [FRONTEND] - Работа с сервером, axios, getServerSideProps & Redux
02:12:40 - [FRONTEND] - Кастомный хук useInput
02:13:40 - [FRONTEND] - Создание трека, запрос на сервер, отправка файлов
02:20:30 - [FRONTEND] - SEO оптимизация, head, title, meta
02:26:28 - [FRONTEND] - Поиск треков, оптимизация запроса на поиск
02:30:40 - [ЗАКЛЮЧЕНИЕ] - Ставим лайки и пишем комментарии ♥♥♥
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

[@UlbiTV]

Друзья, таймкоды в описании! Оставьте в комментариях идеи для роликов, которые вы бы хотели видеть у меня на канале! 👇🏻👇🏻👇🏻

[@darkside2436]

Социальная сеть, интернет-магазин, CRM, как подключить платёжную систему для сайта

[@taras7844]

добавляйте свой патрион)

[@viks2387]

Тестирование react(не стандартные кейсы как во всех роликах, а компоненты со сложной логикой) и бэка на node js

[@darkside2436]

Express js + typescipt

[@oOIMAXIOo]

1:54:14 ты делаешь импорт '../actions-creators/player' в этом есть какой-то смысл? Потому что на первый взгляд выглядет так что ты опечатолся вышел из папки и снова вернулся. Я имею ввиду почему ты просто не написал './player' ?

[@eleukhin]

Ты - классный чел, огромный респект, то что делишься своим опытом и объясяешь все простыми словами

[@andrewevdokimov9327]

Спасибо за такой контент. Это действительно эксклюзив на просторах рунета

[@UlbiTV]

Спасибо! Стараюсь делать что-то новое)

[@srt2046]

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

[@vladislavsamarsky1760]

Это просто прекрасный курс! Большое спасибо за Ваш труд

[@UlbiTV]

Спасибо вам за поддержку!)

[@user-zk3bc1lf8k]

УРАААААА!!!!!!🙌 🥳 🎉 наконец-то нью видос❤️Вы большой молодец!

[@UlbiTV]

Ой, спасибо, очень приятно слышать!))

[@sashabashkev604]

Тимур, огромная благодарность за твои труды и уроки! Ты Brad Traversy и нереально крут! Удачи и буду ждать твой миллион подписчиков))

[@user-xt9nl7no8e]

Воу! Какая же подача материала! Это круто! Это шикарно! Это другой уровень! Бро, спасибо что ты есть!

[@ingmarvontrier102]

Неделю смотрел, очень много полезной практической информации. Большое спасибо !

[@user-vk6wk8bs5m]

Какой ты молодец! еще не смотрел конкретно это видео, но предвкушаю, что видео очень крутое, как и все те, что я смотрел ранее.

[@anaxronik]

Мужик, ты реально запариваешься в роликах, респект тебе за это. В будущем хотелось бы увидеть что-нибудь про архитектуру, а точнее как ее продумывать и планировать.

[@UlbiTV]

Спасибо дружище, учту твое пожелание)

[@barbatage5078]

Новое долгожданное видео! Очень кстати) спасибо, Тима! Как всегда пушка!

[@UlbiTV]

Спасибо вам!

[@user-hi8cg3up2c]

Спасибо за видео. Это действительно топ! Если быстрый ролик по Next не произвел особого впечатления, т.к. представляет собой по сути пересказ официального туториала, тот здесь прям отличный контент. Куча материала, разбирал 3 дня.

[@user-zs6yt5vd8k]

Хочу сказать, что в целом на канале ролики отличные ) Очень бы хотелось, чтобы еще были выпущены подобные ролики на VueJS

[@user-ql6cs2cy7d]

Ну ты красава конечно! Даже на английском таких видосов нет. Спасибо большое!

[@jsmonstr9638]

Посмотрел и даже не заметил, что прошло 2 часа. Подписчики быстро будут набираться, я уверен, с таким контентом среди русскоговорящих я не видел еще никого, Владилен, но настолько объемных роликов бесплатных у него нет, подписан на твой канал еще с 200-300 подписчиков, заметно качество изменилось, видно больше вкладываешься. Молодец, продолжай!

[@UlbiTV]

Спасибо большое) Очень приятно слышать такие слова)

[@johntravolta2228]

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

[@user-en8fd9ut5q]

Спасибо за супер-видео! Творческих успехов, Тимур!

[@olehmudriy9308]

Спасибо большое!!! Вот это действительно годный контент! Следующий свой проект буду делать на таком стеке!

[@AlexRudOy4ik]

Чувак, ты просто боженька! Долгих лет тебе и кучу подписчиков

[@UlbiTV]

Спасибо дружище!) взаимно!!!

[@user-yu1yh6sr5g]

Очень познавательное видео. Сначала с интересом просмотрел, потом (в течение нескольких дней) повторил в коде. Из проблем традиционно были сложности с подбором версий пакетов: вариант из авторского репо по некоторым причинам не зашел, поэтому пришлось экспериментировать с комбинацией react, react-redux, redux, next-redux-wrapper и, неожиданно, библиотеки стилей material. Спасибо Тимуру за его труд, приводяший к таким серьезным и полезным результатам.

[@graves3799]

Чуви очень круто 👍, как раз задумал старый монорепо next-nest на TS перевести полностью

[@si1ver300594]

Наконец то получилось досмотреть. Спасибо большое за контент, много полезных моментов.

[@UlbiTV]

Рад, что понравилось) спасибо!

[@user-wg4ii5ng5e]

Очень информативно. спасибо большое, автору желаю успехов)

[@vladcid3938]

Спасибо за контент такого даже на зарубежном Ютубе нет.Лайк

[@user-pq6hh5by9i]

Очень благодарен Тимур за контент скажу что про Nest не могу найти годный материал как у тебя, не говорю еще про Nest & Mongo. Благодарствую за видео и прошу продолжать в том же духе!!!

[@HTMLHarbor]

Спасибо за великолепную работу 🔥💪💪💪🚀🚀🚀

[@UlbiTV]

Благодарю!

[@user-dw8lb8lc7u]

Ты прекрасен, спасибо за крутые ролики, люблю typescript и nest js

[@UlbiTV]

Спасибо друг, очень приятно слышать)

[@alexeymyasnichenko3318]

всего то за 2 дня бэкендик написал, пришла часть фронта). Контент лучший как всегда)

[@jhonkoan1063]

Отличный канал, супермного практической инфы. Много ставлю пауз и смотрю на скорости 0.5. Самому все эти вещи гуглить не просто. Сейчас все это дело как никогда актуально(стажируюсь). Благодарность автору.

[@UlbiTV]

Удачи на стажировке, и спасибо вам за поддержку!

[@Sashaa]

Как стажировка, чем сейчас занимаешься?

[@user-yr3ub5gp3t]

Большое спасибо! Очень крутой материал!

[@Shad0w5m00h]

Осилил половину! Курс получился наиураганнейшим! Доброго тебе всего всего)))) хоть на каком-то примере увидел как оно происходит, а то все время дурацкие туду листы

[@oOIMAXIOo]

В двух часах видео, 3 месяца самостоятельного изучение. Это просто космос, а не материал!)

[@UlbiTV]

Первое предложение - выше всех похвал)) спасибо друг)

[@hpc832]

Обалденно полезна инфа!👍 Хотелось бы процесс создания клона твича еще от вас увидеть😉

[@4sARy]

Огромное спасибо за сей мини курс! С беком до этого не работал, но как увидел Nest js сразу понял, что это легче, чем думал до этого. Голова заболела когда фронт начался ...

[@UlbiTV]

Дааа, один из самых сложных курсов на канале)

[@egorpobylets6597]

Тимур, спасибо! Отличное видео по Nest js, Next js, SSR, React, TypeScript

[@FreakxUA]

Очень удивлен как Автор так качественно записал видео, как будто без склеек, дублей. И темп постоянно такой, то ставлю на паузу и возвращаюсь, лучше чем растянуто на несколько часов. ТОП

[@alexey_horbunov]

Еще прохожу курс по express, а у меня уже два новых ролика на проработку с Вашего канала есть. Спасибо огромное, уже рекомендую вас знакомым

[@UlbiTV]

Спасибо за рекомендации!) Самое ценное, что можно сделать для моего канала)

[@user-lv4dn6bc9l]

Крутой обучающий материал. Спасибо тебе за объяснение сложных вещей простыми словами!!

[@dmitryivanov3200]

Огрооооомное спасибо тебе за твой труд! Это просто суперовый контент!!!

[@UlbiTV]

Спасибо дружище)) Над этим курсом особенно старался

[@nazar9796]

каждый видос как праздник, автору респект

[@UlbiTV]

Спасибо огромное!

[@bogdanvelykodnyi7352]

Где же ты был год назад, когда я начинал работать с нестом, топ контент, лайк)

[@UlbiTV]

Спасибо дружище;)

[@user-rr2sd9lp6n]

Какой кайф, хотел как раз на подобии верстануть страничку, просто идеальный видос !!!!!!

[@UlbiTV]

Ты капитальный красавчик Руслан)) Спасибо)

[@m.lukyanovich]

Просто супер материал. Твои уроки можно глотать один за другим) Всегда исчерпывающе, но без воды - прямо 100% полезной информации) Новичкам бы посоветовал обязательно параллельно открывать документацию по используемым технологиям и не просто повторять за видео, а учиться реализовывать функционал, опираясь на неё. Если сегодня проходить это видео, то с Next 13 только так и получится) Кстати, очень жду видео по нему!))

[@dev_insider]

Вот это подгон, спасибо большое!

[@UlbiTV]

Спасибо!)

[@popovsergey72]

Привет! Ты крут, в комплетке с продвинутым backend и Docker - то что надо!!! Удачи тебе,!!!

[@khodzherdaniil464]

Ахринеть, я не услышал ни одной молекулы "воды", которая бы хоть как то засорила поток полезной информации которая непрерывно поступала в мой мозг )) Спасибо, отличная работа!

[@kirillshapovalov495]

Очень круто! Спасибо! Именно такие проекты и прокачивают разработчика! Успехов тебе!

[@kirillshapovalov495]

Кстати, хотель спросить. Будет ли курс по созданию приложения на Реакт Нейтив (от начала до деплоя хотя-бы в Плей Маркет)?

[@UlbiTV]

Спасибо! И тебе успехов!)

[@UlbiTV]

Да, ролик будет, только сейчас времени мало на такой курс, в дальнейшем точно будет

[@coldwarrior9992]

Привет, как всегда отличная подача, лайк и коммент не глядя видео👍

[@UlbiTV]

Спасибо друг, но и посмотреть тоже стоит!)

[@user-xh1gf8nu8i]

Очень, здорово!! Ты красавчик !!!

[@UlbiTV]

Благодарю!)

[@user-pd9no5ye5g]

Для меня это прям джекпот, как раз нужный стек, спасибо)

[@UlbiTV]

Надеюсь было полезно!)

[@user-xo1qm5lg2t]

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

[@vadimprokoshin5801]

Большое спасибо! )) Отлично, в общем-то )))

[@Tim-Slim]

Новый концентрат ценнейшей информации!!! Сыпасиба!!!

[@UlbiTV]

Спасибо!))

[@user-ku3fl8uc1x]

Супер!!! Спасибо автору.

[@UlbiTV]

Благодарю вас!)

[@vadimveksler7699]

Очень крутой контент, и глубокий для ютуба. Я раньше не работал с Nest и Next, только поверхностно с этими технологиями знаком, но работаю уже более 3 лет с React и Node. Помимо этого конечно знаком со всеми почти технологиями из данного обзора, иначе бы наверное не зашло бы все с первого раза... Думаю, что попробую доработать этот проект, возможно что-то свое создам, используя как базу это обучающее видео, и данный стэк для воплащение своего какого-то проекта. По критике могу сказать, что UI, более сложная часть данного проекта, было показано поверхностно и в более ускоренной форме. Причина, почему UI сложней, я считаю из за того, что не в стейт менеджере ни на бекенде особо нет логики и нет в ней необходимости на данном этапе разработки. Поэтому, это видео было насыщенно использованием кучи разных библиотек и технологий, но в рамках отдельно взятой стандартной задачи и может быть конечно в теории быть усложненно во много раз. Верстке и стилям было уделено мало времени, это логично, так как для этого нужно писать много монотонного кода и это может занять кучу времени, особенно если есть требование к соответствию с макетом. Но а так очень круто, ставлю 8 из 10 за преподнесения и подачу материала. Спасибо :)

[@taras7844]

Братан, как же я тебе благодарен, в интернете почти нет инфи про этот стек)

[@CyberGenius777]

Не почти, ее нет

[@taras7844]

@@CyberGenius777 есть искать просто нужно хорошо

[@UlbiTV]

Спасибо) надеюсь было полезно!

[@gorillsezh3703]

вот за это спасибо!) я как раз перехожу на typescript им нужно много много практики)

[@UlbiTV]

Надеюсь было полезно!

[@kirillmitskevich8851]

Очень круто! Очень полезно! Спасибо тебе ))

[@UlbiTV]

Стараюсь друг)) Спасибо! рад что полезно!

[@user-bg1ov6ng1c]

Спасибо. Отличный, насыщенный курс. Хотелось бы увидеть ролик о том как взаимодействовать на nestjs с бд без орм, на чистом SQL

[@user-zi9ud4my2s]

Очень хороший курс! Заметил небольшую проблему с отдельной страницей трэка, если передать в путь несуществующий id, то next выдаст ошибку. Я решил это тем, что обернул запрос в try catch, и в случае не удачи подгрузки данных передавал в пропсы notFound: true. А в целом спасибо за твои старания, в основном такие курсы не бесплатные.

[@user-of6mc3tr5y]

Боже, совсем недавно у меня в голове родилась идея сделать свой плеер с мэшапами, чтобы поработать с Некстом и TS, а тут видос точь в точь, который мне нужен

[@antonstepanov3315]

Отличный урок, большое спасибо!

[@Polite_person_]

Огромное спасибо и пожалуйста не останавливался

[@UlbiTV]

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

[@serg1221]

Ну нифига ж себе ты вовремя, тут только получил таск на TS и Next, оценим

[@UlbiTV]

Надеюсь было полезно!)

[@serg1221]

@@UlbiTV очень даже, SSR, редакс с некстом, ну и плюхи помельче, очень облегчил таск, спасибо)

[@maxim7603]

Спасибо, это очень круто!

[@UlbiTV]

Спасибо друг, старался)

[@WebEnv]

продолжай, это оч полезно) Попробуй затронуть тему тестирования!

[@gvegasss]

Супер, ты реально капитальный красавчик

[@andrejkling3886]

Wow... amazing content 👍💕 thank you so much 👏

[@ArhisAlight]

Спасибо большое, равный твоему контенту не встречал на рус ютубе! Я выдохнул))) Поскольку первую часть с бекендом прошел=))) Пришлось попыхтеть с реализацией функционала для альбома, сделать все необходимые привязки к треку и файлу картинки и чтобы это всё работало как нужно =) с учетом популейтов и т.д. + функционал добавления и удаление треков с альбома, также расширил функционал при удалении трека или альбома чтобы сразу же удалялся файл созданной картинки трека или альбома и также сам аудиофайл с диска=) Звучит вроде всё просто, но возникали ошибки на ровном месте, а последняя ошибка, вообще вынесла мозг )))))) Поскольку ошибки как таковой вроде нету всё красиво, все запросы проходят, а нужный функционал не работает, это самое страшное что могло случится и оно случилось, так бывает если сравнивать два объекта ObjectId между собой, вместо того чтобы сравнивать их значение)))) Еще раз спасибо =)) Сейчас пройду мини-курс по нексту и продолжу этот курс уже с фронтэендом )))

[@UlbiTV]

Очень круто)) красавчик) на канале есть курс по продвинутому бекенду, там нест) рекомендую

[@ArhisAlight]

@@UlbiTV Спасибо, обязательно доберусь до него)))

[@user-cq7wf6ys9h]

Однозначно лайк! Пробовал делать подобное, только пробовал за место mongodb+mongoose использовать sequelize+mysql, и для теста заменил redux на mobx. Всё замечательно и без проблем заработало)) спасибо за контент, реально СУПЕР помогаешь))

[@UlbiTV]

Спасибо дружище)

[@catweb666]

Благодарю, очень интересно

[@UzDevWave]

Здравствуйте, надо ещё!

[@aleksandrmatyka3118]

Ты крутой, спасибо за контент!)

[@UlbiTV]

Спасибо!

[@user-pd9no5ye5g]

искал искал внятное описание reducer для next, но что-то непонятное везде написано, нет целостного описания (англ. сайты не берем) и вспомнил что тут было такое) реально все что нужно есть кратко, понятно, полноценно) Спасибище)

[@UlbiTV]

Спасибо дружище))

[@user-rk5wo6wq7h]

Канал в топ! Курс: mobx и redux - когда использовать.

[@nelson6783]

спасибо Тимур!)

[@Quentinrei]

Жду 100к подписчиков !! Успехов !!

[@Daniel-qs4yw]

Спасибо большое за хороший и полезный контент!! если можешь со временем сделать проект на Typescript + Redux Toolkit по типу интернет магазина и обьяснить главную идею стора. Ну и может потом сделать админку(crm/cms) и соединить всё в один большой проект ЛАЙК! СУБСКРАЙБ и РЕПОСТ!)

[@TheZionjke]

Мужик ты просто крут!

[@BestLiliya]

Очень полезно, большое спасибо

[@ipa_stor]

Новое видео подъехало, ну что, всем приятного просмотра:)) пойду изучать, Тимур, спасибо большое, пойду изучать, надеюсь все разберу:))) пс: мне кажется или такое приложение отлично будет сммотреться в портфеле...

[@UlbiTV]

Ждал твой коммент)) Продуктивного обучения!)

[@sunny.7712]

Чел, как же я тебя люблю

[@sharikdont1543]

Как всегда, качественно интересно, спасибо! Также очень хотелось бы видеть более подробный курс по Firebase + React, на русскоязычном ютубе такого нет или же урок по созданию чего либо с библиотекой WebRTC

[@UlbiTV]

Спасибо!) Запишу себе в todo))

[@HIghtowerSever]

Молодец! Спасибо!

[@UlbiTV]

Благодарю!)

[@lookcook_]

Если идеи еще принимаются, то про тестирование на фронте было бы отлично. Спасибо за твою работу

[@user-xn9km1bh7y]

Спасибо за качественный материал) актуально в 2023)) хотелось бы больше продакшн примеров с использованием JWT + Apollo, RTK с автообновлением токенов...

[@riddl.1337]

нашёл что толковое?

[@gokanton6090]

Спасибо, интересное видео, для себя интересное узнал про сео. Жду react native)

[@UlbiTV]

Будет!) Спасибо!)

[@Divanniy.Trader]

ТОП КОНТЕНТ !!!!!!!!!!!!!!!!!!!!!!!!!!

[@user-pp1or5fl2d]

Было бы не плохо разделить отдельно выдосы по бэку и по фронту. Тогда бы те кому не интересен бэк,просто работали с апихой. И ts очень не хватает. А так , ты очень крут)Спасибо

[@typlomi]

Спасибо за курс ) Сделал на МобХ правда)

[@vladyslavsosnov8412]

Видео топ! Спасибо

[@sergeykechedzhiev5403]

Очень круто 👍

[@UlbiTV]

Спасибо!)

[@oops61rus]

Воды в курсе столько, что Я скоро умру от жажды Предельно чётко и понятно рассказано

[@UlbiTV]

Хееех, спасибо друг)

[@kimblinov1594]

спасибо! за труды

[@taras8068]

Отличный урок, спасибо!) кто застрял на 2:10, как вариант проверить чтобы была версия "next-redux-wrapper": "^ 6.0.2". По умолчанию на октябрь 2021 уже 7ю версию поставит, а с ней уже нужно будет писать код немного по другому

[@DenisMikhalev]

Как раз на Next пилю, спасибо, очень кстати увидеть best practices

[@UlbiTV]

Успехов!

[@sagiden1343]

wow, it's cool project. Thank you very much

[@f1y1xz]

"Для лучшего понимания мы эти файлы удаляем". Тимур ты супер.

[@UlbiTV]

Спасибо вам большое за поддержку!)

[@Catafey1]

Туториал хороший, но самая главная тема, по части фронта про SSR с Next и Redux, считаю не раскрыта. Использована обёртка, которая имеет минусы и в оф.доке некста другой пример подключения с Redux. Самое интересное начинается, когда надо сделать 3-7 запросов к API, чтобы заполнить стор и отрисовать страницу, и запросы блокирующие. Плюс, нет авторизации + локализации через SSR, что тоже имеет много подводных камней с Redux. Как начало серий - отлично! За хайповый Nest отдельный лайк. PS: подкину идей для новых видео - показать другие новые и современные Web API для браузера, в списке есть много полезных фич как Audio. По Nest - показать продвинутые фичи, с React - красивые масштабные анимации.

[@UlbiTV]

Спасибо за идеи и замечания) Старался раскрыть как можно больше аспектов в одном видео, но как сами понимаете, это практически нереально сделать, иначе ролик будет настолько длинный, что его никто не будет смотреть)

[@taras7844]

Можете пожалуйста посветить по поводу next с redux вижу что тут все не однозначно, я так понял что авторизация тут тоже очень не простая по простому не выйдет с nestoм зделать?

[@TheZionjke]

@@UlbiTV Зря ты так думаешь) Если ты сделаешь курс и разобьешь его на 5-6 видос, ну засунешь туда много фишек и функционала - это будет просто ТОПОВЫЙ ТОП. Посмотри сколько смотрят Арчакова с его курсами ;)