OS
О проекте
OS — веб-приложение для управления проектами и задачами с канбан-доской, календарём и системой команд. Приложение построено на React с кастомной дизайн-системой на базе radix-ui.
Что я сделал
- С нуля спроектировал интерфейс и дизайн приложения
- Разработал дизайн-систему и UI-kit
- Подготовил в Figma мокапы с дизайн-токенами, готовыми к связке с React-приложением
- Разработал кастомную дизайн-систему на основе radix-ui компонентов
- Сверстал компоненты и интерфейсы приложения с фронтенд-логикой
- Реализовал drag-and-drop для канбан-досок
- Спроектировал систему управления командами и ролями
- Разработал недельный календарь для планирования времени
- Продумал адаптивный дизайн для мобильных устройств
- Тесно взаимодействовал с владельцем продукта, фронтенд- и бэкенд-разработчиками, девопсами
Канбан-доска
Основной интерфейс приложения — канбан-доска с проектами. Колонки со статусами (Backlog, Ready to go, Blocked, Active) позволяют визуально отслеживать прогресс.
Темизация
Приложение поддерживает светлую и тёмную темы. Переключение происходит мгновенно благодаря CSS-переменным и дизайн-токенам.
Календарь
Раздел Focus Time отображает задачи и события в недельном календаре. Удобно планировать время и видеть загруженность по дням.
Управление командой
Раздел Teams позволяет управлять командами, участниками и ролями. Табличный интерфейс с вкладками Teams, Persons, Roles.
Rich-text редактор заметок
Встроенный rich-text редактор для описаний и заметок. Поддерживает форматирование, списки и выделение текста. Использована библиотека BlockNote.
Токенизация
Для проекта разработана система дизайн-токенов в Figma Variables: цвета, размеры, темы и типографика. Токены синхронизированы с кодом.
Мобильная адаптация
Интерфейс адаптирован для мобильных устройств. Боковое меню сворачивается в бургер, канбан-доска становится горизонтально прокручиваемой.
Результаты
- Полностью спроектированный и реализованный интерфейс приложения
- Готовая дизайн-система с токенами, синхронизированными между Figma и кодом
- Переиспользуемые компоненты на базе radix-ui
- Поддержка светлой и тёмной темы
- Адаптивная вёрстка для десктопа и мобильных устройств
