План разработки User Dashboard Base (Quasar + Node.js + SQLite)
Цель проекта: создать основу для пользовательского кабинета с использованием Quasar Framework на фронтенде и Node.js/TypeScript с SQLite на бэкенде. Реализация включает авторизацию, дашборд, хранение и проверку данных пользователя, а также поддержку мультиязычности.
Стек: pnpm, CamelCase, Quasar Framework (https://quasar.dev/), Nodejs, Typescript, SQLlite, git.
План разработки
Этап 1: Инициализация и настройка репозитория
1. Создание репозитория на GitHub
2. Настройка `.gitignore`, `README.md`
3. Инициализация монорепозитория с pnpm workspaces
4. Настройка структуры папок:
project-root/
├── backend/
├── frontend/
├── shared/
└── docs/
Этап 2: Настройка Backend (Node.js + TypeScript)
1. Инициализация Node.js проекта с TypeScript
2. Установка и настройка:
- Express.js
- SQLite3 + TypeORM/Prisma
- JWT для аутентификации
- Cors, helmet, rate-limiter
- Валидация (joi/zod)
3. Создание базовой структуры:
- Routes
- Controllers
- Services
- Middleware
- Database models
Этап 3: Создание API endpoints
1. Auth endpoints:
- POST `/api/auth/login`
- POST `/api/auth/refresh`
- POST `/api/auth/logout`
- GET `/api/auth/verify`
2. User endpoints:
- GET `/api/user/profile`
- PUT `/api/user/profile`
3. Middleware для проверки JWT
Этап 4: База данных (SQLite)
1. Создание схемы БД:
- Таблица `users` (id, email, password_hash, role, first_name, last_name, created_at, updated_at)
- Таблица `sessions` (id, user_id, token, expires_at, created_at)
2. Миграции и сидеры
3. Индексы для оптимизации
Этап 5: Инициализация Frontend (Quasar)
1. Создание Quasar проекта с TypeScript
2. Настройка:
- Vue Router
- Pinia (state management)
- Axios для API запросов
- i18n для мультиязычности
3. Настройка линтера и форматтера
Этап 6: Система аутентификации (Frontend)
1. Создание auth store (Pinia)
2. Interceptors для axios
3. Guards для роутера
4. Автоматическая проверка токена каждую минуту
5. Refresh token логика
Этап 7: UI компоненты и страницы
1. Layout компоненты:
- AuthLayout
- DashboardLayout
2. Страницы:
- Login page с формой
- Dashboard page
- 404 page
3. Компоненты:
- LoginForm
- UserMenu
- LanguageSelector
Этап 8: Мультиязычность (i18n)
1. Настройка i18n в Quasar
2. Создание языковых файлов:
- `en.json`
- `ru.json`
- `sr.json` (сербский)
3. Интеграция с компонентами
4. Сохранение выбранного языка
Этап 9: Обработка ошибок и валидация
1. Глобальная обработка ошибок (Frontend)
2. Валидация форм
3. Toast/notify для уведомлений
4. Loading states
Этап 10: Тестирование и документация
1. Unit тесты для критических функций
2. API документация (Swagger/OpenAPI)
3. README с инструкциями по установке
4. Комментарии в коде
Этап 11: Деплой и CI/CD
1. Настройка GitHub Actions
2. Скрипты для production сборки
3. Environment variables
4. Systemd сервисы для Ubuntu
Git Flow стратегия
- `main` - стабильная версия
- `develop` - разработка
- `feature/*` - новые функции
- Каждый этап = отдельная feature ветка
- Pull Request после каждого этапа
Соглашения по коммитам
feat: добавление новой функциональности
fix: исправление багов
docs: обновление документации
style: форматирование кода
refactor: рефакторинг
test: добавление тестов
chore: обновление зависимостей
Статьи с реализацией разработки
Этап 1: Инициализация и настройка репозитория
Этап 2: Настройка Backend (Node.js + TypeScript)
Этап 3: Создание API endpoints
Этап 5: Инициализация Frontend (Quasar)
Этап 6: Система аутентификации (Frontend)
Этап 7: UI компоненты и страницы
Этап 8: Мультиязычность (i18n)
Этап 9: Обработка ошибок и валидация