Echo: Slack-подобный чат на трёх стеках

Кому это: ты идёшь по серии 07 · Браузер и Frontend или уже прошёл её. Echo собирается там по кусочку в каждом уроке; этот воркшоп, его финальная сборка. Здесь зафиксирован полный объём проекта, пять капстоун-задач, которых нет ни в одном отдельном уроке, и критерии, по которым проект считается сданным.

Зачем это: одна вещь, читать про RTK Query, другая, довести продукт до ссылки, которую не стыдно показать на собеседовании. Echo задуман как такой продукт: Slack-подобный чат с каналами, живыми сообщениями, поиском и presence, причём в трёх параллельных реализациях. На вопрос интервьюера про сравнение стейт-менеджеров у тебя будет не мнение, а свой код в трёх вкладках.

Что в итоге: задеплоенный чат и монорепо из четырёх воркспейсов:

echo/
├─ apps/
│  ├─ echo-react-rtk/      // React + Redux Toolkit + RTK Query
│  ├─ echo-react-reatom/   // React + Reatom
│  └─ echo-vue-pinia/      // Vue 3 + Pinia
├─ backend/                // Fastify + WebSocket + SSE
└─ packages/
   └─ shared-api/          // общие типы Channel/Message/User и событий

Фиче-сет одинаковый во всех трёх: список каналов, лента сообщений, отправка с optimistic update, поиск, presence через WebSocket, бесконечный скролл, вход и защищённые маршруты.

---

Карта: что приносит каждый урок

Echo растёт по серии, и большая часть пути уже расписана в уроках. Эта таблица, твой план сборки и одновременно чек-лист «ничего не пропустил»:

Уроки	Вклад в Echo
01	монорепо, Vite, каркас echo-react-rtk
02	vanilla-chat.html: тот же чат на голом DOM, для контраста
03	сетевой слой: fetch, WS и SSE руками, localStorage и IndexedDB
04-06	React-страница, разбор на компоненты, хуки и refs
07	контексты темы и пользователя, ErrorBoundary, ленивый поиск
08	Vitest + RTL + MSW, тесты ленты, ввода и AuthGuard
09-11	карта state, формы на RHF + zod, RTK slices, RTK Query, WS-listener
12	вторая реализация: echo-react-reatom
13	третья реализация: echo-vue-pinia
14-15	FSD-рефактор, разбор рендер-стратегий
16-17	бюджет бандла, code splitting, Playwright E2E, Lighthouse CI
18	RUM-метрики, error-трекинг, опционально Module Federation

Дальше пять капстоун-модулей. Они собирают урочные кусочки в продукт и закрывают то, что в уроках давалось мимоходом: целостный роутинг, настоящую авторизацию, устойчивый realtime, честное сравнение стеков и выкат.

---

Модуль 1 · Роутинг как каркас приложения

В уроках маршруты появлялись по необходимости. Теперь зафиксируем полную карту URL и сделаем роутер владельцем состояния навигации:

Маршрут	Что показывает	Доступ
/	редирект на последний открытый канал	только вошедшим
/:channel	лента сообщений канала	только вошедшим
/search	поиск по сообщениям, ленивый чанк	только вошедшим
/login	вход и регистрация	только гостям

Требования к реализации:

• Data-роутер: данные канала начинают грузиться на навигации, а не после рендера спиннера.
• Активный канал живёт в URL, а не в store: F5 и шаринг ссылки возвращают человека в тот же канал. Это прямое применение правила «router state это тоже state» из урока про карту состояний.
• Поисковый запрос лежит в ?q=...: поиск можно переслать ссылкой.
• /search подгружается лениво, и в network видно отдельный чанк (приём из урока про бандлеры).
• Защита маршрутов оформлена слоем роутера (guard или layout-маршрут с редиректом), а не россыпью if в компонентах.