Фронтенд мессенджера: React, PWA, WebSocket

ReactTypeScriptVitePWAWeb PushWebSocket

Курс 2 трека «Serverless-мессенджер на Yandex Cloud».

Фронтенд чата на React + TypeScript + Vite: UI мессенджера, превращение в PWA с офлайн-режимом, Web Push уведомления и деплой статики в Yandex Object Storage.

Стек и канон платформы

Основной стек курса — Zustand + TanStack Query: серверный стейт в Query, клиентский в Zustand. Канон платформы по стейт-менеджменту — Effector (ui-track, модуль 3); в модуле 9 этого курса разобрано, когда команда дорастает до него и как мигрировать.

UI Kit здесь строится как практический минимум для приложения (модуль 11); полная дисциплина — публикация npm-пакета, size-limit, Storybook-галерея, измеримые KPI — в курсе «UI Kit и мессенджер».

Чему вы научитесь:

⚛️ Строить UI мессенджера на React + TypeScript + Vite
📲 Превращать приложение в PWA (кэширование, офлайн)
🔔 Настраивать Web Push уведомления
🚀 Деплоить статику в Yandex Object Storage

Для кого: frontend-разработчики; логичное продолжение курса по бэкенду.

Prerequisites: курс 1 трека (архитектура и бэкенд) — желательно, но не строго обязателен.

Программа курса

Фронтенд мессенджера: React, PWA, WebSocket

Стек и канон платформы

Программа курса

Модуль 1: Frontend (React + TS + Vite)

Модуль 2: Архитектура — FSD + Clean Architecture

Модуль 3: Инфраструктура — API и WebSocket клиенты

Модуль 4: Состояние — Zustand + TanStack Query

Модуль 5: Превращение в PWA

Модуль 6: Push-уведомления

Модуль 7: Тестирование (Vitest + RTL + MSW)

Модуль 8: Деплой в Yandex Object Storage

Модуль 9: Effector — когда команда и фичи выходят на масштаб

Модуль 10: Производительность — Core Web Vitals

Модуль 11: UI Kit и дизайн-токены