docs

PD Projects Frontend

Фронтенд-часть платформы управления проектами для студентов вузов и школьников.

📋 Описание

Веб-приложение для создания, управления и модерации проектов в учебных заведениях. Платформа позволяет:

• Студентам/школьникам: создавать и управлять проектами, приглашать участников
• Модераторам: одобрять/отклонять проекты
• Администраторам: управлять проектами и пользователями

Фильтрация происходит автоматически в зависимости от роли пользователя:

• Студент вуза видит только проекты вуза
• Школьник видит только проекты школы
• Администратор/сотрудник вуза видит все проекты

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

• ✅ Регистрация и авторизация с выбором типа (студент/школьник)
• ✅ Создание проектов с описанием и ссылками
• ✅ Управление участниками через приглашения
• ✅ История изменений проектов
• ✅ Модерация проектов (для администраторов)
• ✅ Профиль пользователя и редактирование данных
• ✅ Фильтрация проектов по типу учебного заведения

🛠️ Стек технологий

• Vue 3 — UI фреймворк
• TypeScript — типизированный JavaScript
• Vite — сборщик проекта
• Pinia — управление состоянием
• Vue Router — маршрутизация
• Axios — HTTP клиент
• Vuetify 3 — компоненты материального дизайна

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

src/
├── pages/           # Страницы приложения
├── components/      # Переиспользуемые компоненты
├── ui/              # UI-компоненты
├── services/        # API сервисы
├── stores/          # Pinia stores (состояние)
├── router/          # Vue Router конфигурация
├── plugins/         # Плагины (Vuetify)
├── assets/          # Статические файлы (CSS, шрифты, иконки)
└── main.ts          # Точка входа

🚀 Быстрый старт

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

# Запуск dev сервера
npm run dev

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

# Локальный preview после сборки
npm run preview

Подробнее: SETUP.md

📐 Архитектура

• Services — слой API, взаимодействие с бэкендом
• Stores — Pinia хранилище, глобальное состояние
• Components — переиспользуемые UI компоненты
• Pages — полностраничные компоненты (роуты)

Подробнее: ARCHITECTURE.md

📖 Документация

• SETUP.md — установка и конфигурация
• ARCHITECTURE.md — архитектура приложения
• COMPONENTS.md — описание компонентов
• SERVICES.md — API сервисы
• STORES.md — Pinia stores
• CONTRIBUTING.md — гайд для разработчиков

🔗 API

Приложение взаимодействует с бэкенд-сервером:

• Base URL: http://localhost:3000 (локально) или https://pd-projects-backend-production.up.railway.app (продакшен)
• Порт: 3000 (dev), настраивается через VITE_API_BASE_URL в .env

Основные эндпоинты:

• POST /auth/login — вход
• POST /auth/registration — регистрация
• GET /projects — список проектов
• POST /projects — создание проекта
• GET /users/profile — профиль пользователя

Подробнее: SERVICES.md

🔐 Аутентификация

Приложение использует JWT токены, передаваемые в заголовке Authorization: Bearer <token>.

Токен сохраняется в localStorage и автоматически добавляется ко всем запросам через axios-интерцептор.

📱 Роли пользователей

• STUDENT — студент (роль по умолчанию при регистрации)
• ADMIN — администратор платформы
• UNIVERSITY_STAFF — сотрудник вуза (модератор)

🐛 Разработка и отладка

Локальная работа

1. Установи Node.js >= 18
2. Клонируй оба репозитория (фронт и бэк)
3. Запусти бэкенд: npm run start:dev в папке pd-projects-backend
4. Запусти фронт: npm run dev в папке pd-projects-front
5. Открой http://localhost:5173

Консоль браузера

В DevTools (F12) → Console видны логи приложения с префиксом [StoreName]:

• [ProjectsStore] — логи загрузки проектов
• [AuthStore] — логи авторизации

Тестовые учётные записи

После npm run seed на бэкенде:

• Email: student@example.com, Пароль: password123 (студент)
• Email: staff@example.com, Пароль: password123 (сотрудник вуза)
• Email: admin@example.com, Пароль: password123 (администратор)

📝 Лицензия

MIT

🤝 Контрибьютинг

См. CONTRIBUTING.md