Task Manager Frontend

🎯 О проекте

Task Manager — это современная система управления задачами, разработанная с упором на производительность, масштабируемость и строгую типизацию.

Проект решает две главные задачи:

1. Продуктовая: Предоставление пользователям интуитивного интерфейса для трекинга задач, управления статусами и совместной работы.
2. Инженерная: Создание эталонной архитектуры на базе Nuxt 4, которая позволяет команде разработчиков безопасно масштабировать функционал, избегая проблемы "спагетти-кода" (Spaghetti Code) и сильной связности (Tight Coupling).

Ключевые возможности

• 🔐 Безопасность: Полный цикл аутентификации (JWT, Cookies, Auto-refresh) и защита роутов.
• ⚡️ Реактивность: Мгновенный отклик интерфейса благодаря оптимистичным обновлениям.
• 🧩 Модульность: Каждая фича (например, "Создание задачи") изолирована, что позволяет легко менять или удалять функционал без регрессии.
• 🛡 Надежность: Единый слой обработки ошибок API — пользователь всегда получает понятную обратную связь, а разработчик — типизированные логи.

---

⚡️ Технический стек

• Runtime & PM: Bun (v1.0+)
• Framework: Nuxt 4 (compatibilityVersion: 5)
• Architecture: Granular Vertical Slice Architecture
• HTTP Client: Custom Typed Wrapper (over ofetch)
• State: Pinia + Persistence
• UI: Nuxt UI Pro + Tailwind CSS
• Validation: Zod

---

📡 HTTP Client & API Wrapper

В проекте реализован мощный архитектурный слой для работы с сетью: app/shared/services/api. Это не просто fetch, а типизированная надстройка, которая стандартизирует все запросы.

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

1. Строгая типизация ответов (<T>): Вы всегда знаете, что вернет сервер.
2. Автоматическая авторизация: Токен (access) автоматически подставляется в заголовки из кук.
3. Гибкая конфигурация (RequestConfig): Полный контроль над query-параметрами, body и опциями ofetch.
4. Нормализация ошибок: Преобразование любых ответов (RFC 7807, plain text, network error) в единый интерфейс ApiError.

Примеры использования

Обертка экспортирует методы api.get, api.post, api.put, api.delete, api.patch.

// 1. Простой GET запрос с типизацией ответа
const _user = await api.get<UserProfile>('/users/me')

// 2. POST запрос с типизированным Body и Query
// <Response, Body, Query>
const _task = await api.post<TaskDto, CreateTaskDto>('/tasks', {
  title: 'Fix bugs'
}, {
  query: { priority: 'high' }
})

// 3. Обработка ошибок (try/catch не обязателен для типизации, но нужен для логики)
try {
  await api.delete('/tasks/1')
}
catch (e) {
  const error = e as ApiError // { message: string, details: ..., status: number }
  console.error(error.message) // "Task not found"
}

Структура API слоя

• fetch.ts: Ядро. Содержит performRequest и интерцепторы (onRequest, onResponseError).
• fetch.type.ts: Глобальные типы (ApiError, BackendErrorDetail, RequestConfig).
• *.repo.ts: Репозитории сущностей, использующие api (например, auth.repo.ts).

---

🏗 Архитектура приложения (VSA)

Мы следуем принципу: "Зависимости только сверху вниз".

Иерархия слоев (app/components/)

1. 01.kit (UI Atoms)
   • Базовые компоненты без бизнес-логики (kit-button, kit-input).
2. 02.shared (Widgets)
   • Глобальные виджеты (theme-toggle, lang-switcher).
3. 03.domain (Entities)
   • Бизнес-сущности и их логика (task-card, user-avatar).
4. 04.features (Use Cases)
   • Конкретные сценарии использования (auth-login-form, task-create-modal).
   • Здесь происходит связывание UI и Store.
5. 05.modules (Pages Composition)
   • Сборка страницы из фич и виджетов.
6. 06.layouts (App Shell)
   • Глобальные шаблоны (default, auth).

---

🚀 Запуск и разработка

Проект использует Bun для максимальной производительности.

Установка

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

Настройка окружения

Создайте .env файл:

VITE_API_URL=https://api.your-backend.com

Скрипты

# Запуск dev-сервера
bun dev

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

# Проверка типов
bun run typecheck

---

📝 Code Style & Conventions

• Импорты: Используйте алиас ~ (напр. ~/shared/services/api).
• Composables: Вся логика выносится из .vue в use[Name].ts.
• Типы: Никаких any. Если тип неизвестен — используйте unknown + валидацию.
• Формы: Используем u-form + zod схемы во всех формах.