▣
Интерактивная доска для команды
Совместное рисование и заметки на Canvas через WebSocket
← ко всем проектам
◆ разбор кейса
Система управления задачами с аналитикой
SPA для команд: роли, канбан, графики продуктивности в реальном времени
ReactRedux ToolkitFirebase AuthFirestoreChart.jsCSS Modules
01 Задача
Небольшой команде нужен был трекер задач без перегруженности Jira: доска, роли (админ / менеджер / исполнитель), дедлайны и наглядная аналитика по загрузке людей за период.
02 Сложности
Главная сложность — синхронизация состояния между вкладками и пользователями: два человека одновременно перетаскивают одну карточку. Плюс права доступа: исполнитель не должен видеть чужие отчёты. И производительность — на 500+ задачах доска начинала подтормаживать.
03 Решение
Подписался на снапшоты Firestore и завёл нормализованное хранилище в Redux, чтобы обновлялась только изменившаяся карточка. Написал кастомные хуки useBoardSync и useRole, права продублировал в Security Rules — проверка на клиенте это удобство, на сервере это безопасность. Тяжёлые списки увёл в виртуализацию, графики считаю в useMemo.
04 Результат
Доска обновляется у всех участников мгновенно, конфликтов перетаскивания нет, рендер на 500 задачах уложился в 16 мс на кадр. Аналитика показывает загрузку по людям и срыв дедлайнов за выбранный период.
★ Чему меня научил этот проект
Этот проект научил меня реальному времени и авторизации: я понял, почему правила доступа нельзя держать только на фронтенде, и как проектировать структуру данных под запросы, а не под удобство чтения кода.
Обсуждение
Комментарии к проекту
Другие проекты
⚡
E-commerce платформа с рекомендациями
Каталог, корзина, оплата и блок «вам может понравиться»
◈
Сайт-портфолио с системой комментариев
Тот самый сайт, который вы сейчас читаете
Комментарии доступны зарегистрированным пользователям.