UI Kit и мессенджер на React + Effector + Next.js

Курс по проектированию переиспользуемого UI Kit и построению на его основе мессенджера в архитектуре FSD с Next.js App Router, контрактом OpenAPI + Zod и стейт-менеджером Effector.

Целевая аудитория: Middle React-разработчики, фуллстек-инженеры, желающие освоить архитектуру UI-систем, Effector и грамотное разделение слоёв (UI Kit / приложение / API / будущий Go-бэкенд).

Результат: публикация @myorg/ui-kit как взрослой npm-библиотеки (exports-карта, sideEffects, size-limit, changesets), Next.js-приложение мессенджера с Route Handlers как прослойкой API, контракт OpenAPI → Zod → MSW → автогенерация Go-хендлеров, PWA + Core Web Vitals-метрики в норме, формализованное ревью-покрытие.

Стек: React, TypeScript, Vite (UI Kit), Next.js App Router (API + страницы + PWA), Effector, FSD, OpenAPI, Zod, Storybook, MSW, Playwright, Vitest, axe-core, next-pwa, size-limit, changesets.

Принципы:

• Компоненты UI Kit нейтральны: без бизнес-логики, без стейт-менеджеров, без fetch.
• Слои: UI Kit (Vite) ↔ приложение (FSD в Next.js) ↔ API (Route Handlers) ↔ будущий Go-бэкенд (через OpenAPI-генерацию).
• Storybook — каноническая галерея и документация; страница-демо в Next.js — для интеграционного превью.
• Контракт OpenAPI — единый источник правды для фронтенда, Next.js API и Go-хендлеров.
• Тесты — отдельный слой: unit (Vitest), store (effector/testing), контракт (MSW), e2e (Playwright), visual/a11y (Chromatic/axe).
• Core Web Vitals и PWA — не «упоминание», а измеримые артефакты (Lighthouse CI, size-limit, coverage).
• Антипаттерны в каждом модуле — явные, проверяются линтером где возможно.

Где живёт этот UI Kit

Курс строит две вещи: npm-библиотеку компонентов и приложение-мессенджер на её основе. В реальной команде их место — единый FSD-каркас (app → widgets → features → entities → shared), где UI Kit лежит в слое shared и не знает про бизнес-логику, а фичи и виджеты собираются над ним. Именно так устроен боевой шаблон FSD-фронтенда у команды; живые примеры в этом репозитории:

• ui-kit/boilerplate/ — тренировочный монорепо этого курса (UI Kit + Next.js-приложение, npm run verify зелёный);
• трек «Мессенджер на Go + React» — то же разделение слоёв на боевом стеке: список диалогов и чат с realtime.

Правило одно в обоих случаях: компоненты нейтральны, слои импортируют только вниз, контракт живёт в shared/api.

Измеримые KPI (студент умеет после курса измеримо):

• Собрать UI Kit как scoped npm-пакет с exports, size-limit на каждый компонент, sideEffects.
• Написать контракт-проверенный API-эндпоинт за < 30 мин (OpenAPI + Zod + Route Handler).
• Объяснить модель Effector (store/event/effect/sample/attach) и протестировать стор через effector/testing.
• Получить LCP < 2.5s и CLS < 0.1 на странице-галерее (Lighthouse-отчёт как артефакт).
• Пройти ревью по формализованному чек-листу и зафиксировать процент соответствия.