Освойте практический путь в Full‑Stack разработку: создайте полноценное приложение — клон Spotify — начиная с проектирования и заканчивая развертыванием. Этот курс поможет вам уверенно работать с React, Node.js, TypeScript и Postgres, следуя профессиональным стандартам разработки.
Что вы изучите в этом курсе
Курс сочетает теорию и практику, помогая не просто изучить технологии, но и применять их в реальном проекте. Вы шаг за шагом пройдёте путь создания современного web‑приложения.
Полный цикл разработки
Планирование архитектуры и структуры проекта
Масштабирование, модульность и лучшие практики проектирования
Выстраивание логики и взаимодействия клиентской и серверной частей
Создание интерфейса по дизайн‑спецификации
Вы научитесь превращать UI‑макеты в удобный и отзывчивый интерфейс, повторяя ключевые элементы Spotify:
Разметка и стилизация компонентов
Работа с современным стеком React
Организация структуры UI и управление состоянием
Разработка и развертывание API
На серверной стороне вы создадите полноценный API на Node.js и TypeScript и научитесь эффективно работать с Postgres.
Создание REST‑эндпоинтов
Организация базы данных и написание запросов
Обработка ошибок, логирование и безопасность
Практические навыки, которые вы получите
CI и непрерывное развертывание
Вы освоите современные инструменты DevOps для автоматизации разработки:
Настройка CI
Автоматическое тестирование и сборка
Готовность проекта к production
Публикация приложения
В завершение вы развернёте свой проект на сервер и свяжете его с личным доменом:
Настройка серверной инфраструктуры
Оптимизация производительности
Публикация фронтенда и бекенда
Почему этот курс полезен
Он не ограничивается мелкими примерами — вы создадите полноценное приложение, похожее на реальный коммерческий продукт. Благодаря этому вы:
Поймёте, как устроены современные web‑сервисы
Сформируете портфолио из серьёзного проекта
Сможете уверенно проходить собеседования на позиции Full‑Stack или Frontend/Backend разработчика
Удален по просьбе правообладателя
Урок 1.00:03:11
Introduction
Урок 2.00:04:12
Setup
Урок 3.00:12:34
Setup Next.js, ESLint, & Typescript
Урок 4.00:05:24
Course App Overview
Урок 5.00:08:32
Setup Chakra UI
Урок 6.00:05:37
Creating Player Layout
Урок 7.00:09:27
Playlist Container Setup
Урок 8.00:08:22
Creating the Sidebar
Урок 9.00:09:36
Adding the Logo
Урок 10.00:13:44
Create a List Nav with LinkBox
Урок 11.00:15:42
Create Playlist Menu
Урок 12.00:15:43
Setup Prisma & PostgreSQL on Heroku
Урок 13.00:03:31
Prisma Schema
Урок 14.00:03:53
Data Modeling
Урок 15.00:11:17
Creating Schema & Migrations with Prisma
Урок 16.00:15:18
Seeding Data
Урок 17.00:02:49
Running the Seed Script
Урок 18.00:03:33
Seeding User Data
Урок 19.00:09:05
Seeding Playlist Data
Урок 20.00:07:14
Seeding Playlist Data Q&A
Урок 21.00:12:07
Serverless API Overview
Урок 22.00:10:52
Signup API Route
Урок 23.00:03:59
Signup API Route Recap & Test
Урок 24.00:11:07
Signin API Route
Урок 25.00:08:59
Fetcher & Auth Mutation
Урок 26.00:15:19
Auth Pages
Урок 27.00:11:36
Sign In & Sign Up
Урок 28.00:15:17
Protected Route Handler
Урок 29.00:12:47
Middleware Edge Functions
Урок 30.00:05:00
Middleware Q&A
Урок 31.00:09:33
Custom Hooks for Fetching Data
Урок 32.00:09:56
Fetch & Render Data into Components
Урок 33.00:16:13
Gradient Background & Image Box
Урок 34.00:06:26
Title & Subtitle UI Layout
Урок 35.00:09:26
Load Artists Data
Урок 36.00:12:01
Artists List UI Layout
Урок 37.00:13:13
Seed User Data
Урок 38.00:18:34
Build Dynamic Playlist Pages
Урок 39.00:06:29
Playlist Page UI
Урок 40.00:13:18
Songs Table UI
Урок 41.00:14:01
Song UI & Time format
Урок 42.00:04:17
Auth Error Handling
Урок 43.00:07:31
Player UI Container
Урок 44.00:06:45
Player State with Easy Peasy
Урок 45.00:14:23
Player Controls UI
Урок 46.00:09:07
Seek Bar UI
Урок 47.00:16:58
Player Controls State
Урок 48.00:12:29
Playing Songs State
Урок 49.00:07:17
Shuffle and Next Song Controls
Урок 50.00:13:55
Seek Bar Controls
Урок 51.00:09:20
requestAnimationFrame & Synching UI
Урок 52.00:11:49
End Song & Repeat Handlers
Урок 53.00:16:03
Deploying with Vercel
Урок 54.00:10:05
Testing & CI
Урок 55.00:02:24
Wrapping Up
Авторы - master.dev (ex FrontendMasters), Scott Moss
Master.dev — это образовательная платформа для разработчиков, которая помогает совершенствовать инженерные навыки: от изучения языков программирования и веб-разработки до работы с базами данных, облачной инфраструктурой, DevOps и искусственным интеллектом. Ранее известная как Frontend Masters, платформа расширила фокус и теперь обучает разработчиков всему спектру современной разработки ПО.
Скотт — генеральный директор и соучредитель Superfilter AI. Он провел годы в качестве венчурного инвестора, инвестируя в стартапы в области искусственного интеллекта, создавая новые функции в качестве инженера в Netflix, а также основав и возглавив стартап по инструментам для разработки. Он дважды основатель YC и любит создавать вещи, которыми одержимы люди. В свободное от работы время Скотт любит играть в баскетбол, а также проводить время со св
the setup steps didn't work because Next updated, in the course is 12.0.7, and I can't create Next app with a specific version, anyone knows how to solve this problem?
Anonymous
That's a good course, teaches a lot about Next.js in combination with Prisma and other stuff. But if you want to use React 18, use redux-toolkit instead of easy-peasy, otherwise it won't work properly.
Too bad I live in Russia and can't pay for it properly...
brocodes Anonymous
Privyet komrade
Mikey
Please update. This is the latest course (built with Next.js) https://frontendmasters.com/courses/fullstack-app-next/
Too bad I live in Russia and can't pay for it properly...
https://frontendmasters.com/courses/fullstack-app-next/
Course was updated