Task Manager - React + TypeScript

Современное React приложение для управления задачами с полной типобезопасностью, оптимистичными обновлениями и атомарными операциями.

🚀 Технологии

• React 18 - современный UI фреймворк
• TypeScript - строгая типизация
• Material-UI (MUI) - компонентная библиотека
• React Query (TanStack Query) - управление состоянием и кэшированием
• Jest + React Testing Library - тестирование
• Vite - быстрая сборка

🏗️ Архитектура

Структура проекта

src/
├── components/          # UI компоненты
├── store/              # React Query store
│   ├── mutations/      # Мутации (создание, обновление, удаление)
│   ├── queries/        # Запросы данных
│   ├── slices/         # Слайсы состояния
│   └── hooks/          # Кастомные хуки
├── services/           # Бизнес-логика
│   ├── LocalStorageService.ts
│   └── OutboxService.ts
├── types/              # Система типизации
│   ├── guards.ts       # Runtime type guards
│   ├── entities.ts     # Основные сущности
│   ├── api.ts          # API типы
│   ├── store.ts        # Store типы
│   └── components.ts   # Компонентные типы
├── utils/              # Утилиты
├── helpers/            # Хелперы
└── api/                # API слой

Ключевые особенности

• 🔒 Типобезопасность - централизованная типизация с runtime type guards
• ⚡ Оптимистичные обновления - мгновенные изменения UI с автоматическим откатом
• 🔄 Атомарные операции - outbox pattern для консистентности данных
• 🎯 Индивидуальные состояния загрузки - блокировка UI во время операций

🛠️ Установка и запуск

# Установка зависимостей
npm install

# Запуск в режиме разработки
npm run dev

# Сборка для продакшена
npm run build

# Запуск тестов
npm test

# Проверка типов
npm run type-check

📋 Функциональность

Основные возможности

• ✅ Создание задач с валидацией
• ✅ Редактирование задач inline
• ✅ Удаление задач с подтверждением
• ✅ Переключение статуса (активная/завершенная)
• ✅ Фильтрация по статусу
• ✅ Автосохранение в localStorage

UI/UX особенности

• 🎨 Material Design интерфейс
• ⚡ Мгновенная обратная связь
• 🔄 Визуальные индикаторы состояния
• 📱 Адаптивный дизайн
• ♿ Доступность (accessibility)

🧪 Тестирование

# Запуск всех тестов
npm test

# Запуск тестов в watch режиме
npm run test:watch

# Покрытие кода тестами
npm run test:coverage

Структура тестов

• API тесты - проверка бизнес-логики
• Компонентные тесты - проверка UI поведения
• Интеграционные тесты - проверка взаимодействия компонентов

📦 Структура данных

Task (Задача)

interface Task {
  id: string;
  text: string;
  status: 'active' | 'completed';
}

🚀 Производительность и масштабируемость

• Оптимистичные обновления - мгновенный UI
• Модульная архитектура для легкого расширения
• Эффективное кэширование React Query
• Паттерн outbox для надежной синхронизации
• Централизованная типизация для консистентности

🔒 Безопасность

• Валидация данных на всех уровнях
• Type guards для runtime проверок
• Безопасный парсинг JSON
• Обработка ошибок с graceful degradation

🤝 Вклад в проект

1. Fork репозитория
2. Создайте feature branch (git checkout -b feature/amazing-feature)
3. Commit изменения (git commit -m 'Add amazing feature')
4. Push в branch (git push origin feature/amazing-feature)
5. Откройте Pull Request

📄 Лицензия

MIT License - см. файл LICENSE для деталей.