web development
October 1

План разработки User Dashboard Base (Quasar + Node.js + SQLite)

Цель проекта: создать основу для пользовательского кабинета с использованием Quasar Framework на фронтенде и Node.js/TypeScript с SQLite на бэкенде. Реализация включает авторизацию, дашборд, хранение и проверку данных пользователя, а также поддержку мультиязычности.

ОС: Ubuntu 24.01

Стек: 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

Этап 4: База данных (SQLite)

Этап 5: Инициализация Frontend (Quasar)

Этап 6: Система аутентификации (Frontend)

Этап 7: UI компоненты и страницы

Этап 8: Мультиязычность (i18n)

Этап 9: Обработка ошибок и валидация

Этап 10: Тестирование и документация

Этап 11: Деплой и CI/CD