Nest js & Next js ПОЛНЫЙ КУРС. FullStack разработка SSR на React TypeScript. Музыкальная платформа
В этом курсе мы разработаем fullstack музыкальную платформу на TypeScript. Серверная часть приложения будет построена с использованием фреймворка Nest js. На клиенте будем использовать Server side rendering на React с использованием фреймворка Next js.
Мой курс “Продвинутый Frontend. В production на React“ -
Ссылка на исходный код -
Макет в figma -
Ссылка на схему БД -
Необходимые знания для прохождения этого курса:
1. Playlist по Redux -
2. Redux TypeScript -
3. Быстрый курс по Next JS -
4. Mongo DB -
5. Практика, которую необходимо освоить -
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 (доступ к бонусам) -
Qiwi кошелек -
Яндекс деньги -
1 view
416
102
8 months ago 00:33:00 1
Монолит, микросервис, Андрей Мелихов -
8 months ago 02:20:37 1
Claude Barzotti 40 autres chansons Merveilleuses Cover By Florence Jamart #rip #claudebarzotti
8 months ago 02:20:29 1
Hommage Claude Barzotti 40 autres chansons Merveilleuses Cover By Florence Jamart #claudebarzotti
9 months ago 01:41:26 1
Продвинутый BACKEND на . Nest js ПОЛНЫЙ КУРС & Docker
10 months ago 00:44:06 1
КУРС по - Если писать back-end, то только так!
10 months ago 03:54:23 1
🎄НОВОГОДНЯЯ НЕДЕЛЯ СТРИМОВ! Разработка интернет магазина с НУЛЯ | День 1 [React / ]
10 months ago 02:28:35 1
. Полный курс
10 months ago 00:03:55 1
Aesop Rock - All City Nerve Map (Official Video)
10 months ago 00:13:07 8
Bach-Busoni - Chaconne (Nelson Freire, piano)
10 months ago 00:39:08 1
DOOM - my favourite pieces of music - personal soundtrack mix.
10 months ago 02:19:08 31
MongoDB. Полный курс
10 months ago 00:40:39 1
Снова настраиваем миграции в Nest js
10 months ago 00:11:24 1
1. Второй блок. Вступление
10 months ago 00:43:58 1
Building a Nested Comments System with React
11 months ago 02:08:30 9
400. Safari, нестинг в DevTools, интенты, WebDriver BiDi, Shadow DOM, Design Tools, a11y, ООП в JS
11 months ago 06:48:14 1
🚀 AMAZON 2.0 - ИНТЕРНЕТ МАГАЗИН с нуля за 6 часов [Next / React / Nest / PostgreSQL / Prisma / TS]
12 months ago 00:18:25 2
Docker: создание Dockerfile и оптимизация image
12 months ago 00:48:46 1
Я 💛 Фронтенд. фреймворки, или Туда и обратно - Андрей Мелихов
1 year ago 00:56:17 1
Разработка чата. Работаем с вебсокетами на Nest js. Пишем обработку сообщений.
1 year ago 06:58:27 1
Весь современный стек в одном видео! | Блок сайт на , и FSD
1 year ago 00:28:14 1
Как спасти набережную: пляж вместо асфальта | Париж, Тула, Казань и Копенгаген
1 year ago 00:14:23 1
Tips #1: Microservices, пример работы с Kafka
1 year ago 04:21:59 1
Tutorial: Beginner to Front-End Developer
1 year ago 06:38:16 28
🔥 РЕАЛИЗАЦИЯ ОПЛАТЫ - ФИНАЛ! Разработка интернет магазина с НУЛЯ | День 7 [React/]