State & Real-time

Zustand v5, TanStack Query, Live Collaboration with WebSocket/CRDT, and list virtualization

Section «State & Real-time» Progress

0%(0/3 steps)

+0 XP0 of 3 solved

State & Real-time

~14 h

ТЗ: Real-time Kanban-доска с WebSockets / SSE и локальным стейтом Zustand

Архитектурный блупринт разработки интерактивной доски задач: плавный Drag-and-Drop, локальный стейт Zustand с оптимистичным откликом, стриминг изменений коллег через SSE и разрешение конфликтов версий.

Главное ощущение — скорость и плавность. Если перетаскиваешь карточку, она не должна возвращаться назад из-за задержки сервера. Если двое двигают одну карточку, должен побеждать последний автор без потери текста.

Zustand v5Server-Sent Events (SSE)@hello-pangea/dnd / dnd-kitOptimistic Mutations+2

Progress: 0 of 1 steps0%

State & Real-time

~12 h

ТЗ: Виртуализированный каталог на 100 000+ позиций с TanStack Virtual и скроллом

Инженерный блупринт для сверхтяжелых датасетов: динамическая виртуализация окон с TanStack Virtual, бесконечная прокрутка TanStack Query, удержание позиции скролла и отладка INP.

Никаких зависаний при прокрутке. Таблица должна рендерить в DOM только видимые строки (15-20 штук) и мгновенно скроллиться на 100 000-ю строку без создания сотен тысяч DOM-узлов.

TanStack Virtual v3TanStack Query v5Dynamic Row HeightsScroll Restoration+1

Progress: 0 of 1 steps0%

State & Real-time

~12 h

ТЗ: Offline-First PWA с синхронизацией фоновых мутаций и IndexedDB

Спецификация для приложений полевых инженеров: кэширование статики через Service Worker, локальная БД в IndexedDB и автоматическая фоновая синхронизация очередей при появлении сети.

Инженер не должен думать о наличии интернета. Нажал "Сохранить акт" — данные мгновенно записаны в локальную память. Как только машина выехала из подвала и поймала 3G/LTE — все данные ушли в базу.

Service WorkerIndexedDB (idb)Background Sync APISerwist / Workbox+1

Progress: 0 of 1 steps0%