Город МОСКОВСКИЙ
02:31:16

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

Аватар
Йога для улучшения пищеварения
Просмотры:
199
Дата загрузки:
10.11.2023 11:00
Длительность:
02:31:16
Категория:
Технологии и интернет

Описание

В этом курсе мы разработаем fullstack музыкальную платформу на TypeScript. Серверная часть приложения будет построена с использованием фреймворка Nest js. На клиенте будем использовать Server side rendering на React с использованием фреймворка Next js.

Мой курс "Продвинутый Frontend. В production на React" - https://ulbitv.ru/frontend

Ссылка на исходный код - https://github.com/utimur/music-platform-course
Макет в figma - https://www.figma.com/file/irTuBB34zSZ2KW1XRlgnJf/music?node-id=2%3A5
Ссылка на схему БД - https://clck.ru/TNAVD

Необходимые знания для прохождения этого курса:
1. Playlist по Redux - https://www.youtube.com/playlist?list=PL6DxKON1uLOHsBCJ_vVuvRsW84VnqmPp6
2. Redux + TypeScript - https://youtu.be/ETWABFYv0GM
3. Быстрый курс по Next JS - https://youtu.be/Onn38VeEAC8
4. Mongo DB - https://youtu.be/LNvmI8a9jwY
5. Практика, которую необходимо освоить - https://youtu.be/H2GCkRF9eko
6. Подгрузка данных при скроле - https://youtu.be/J2MWOhV8T6o

Таймкоды:
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 (доступ к бонусам) - https://boosty.to/ulbitv

Qiwi кошелек - http://qiwi.com/n/BODYE821
Яндекс деньги - https://yoomoney.ru/to/4100116193037469

Рекомендуемые видео