Frontend Hub - Платформа разработчиков

Описание проекта

Frontend Hub - это веб-платформа для разработчиков, которая предоставляет возможности аутентификации пользователей и управления проектами. Проект представляет собой полноценное веб-приложение с клиент-серверной архитектурой.

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

Training_Lyanov_Ahmed/
├── client/                 # Фронтенд приложения (React + TypeScript + Vite)
├── server/                 # Бэкенд приложения (Node.js + Express + MongoDB)
├── technical/              # Техническая документация
└── README.md               # Документация проекта

Функциональные возможности

Аутентификация пользователей

• Регистрация новых пользователей с именем, фамилией, email и паролем
• Вход в систему с проверкой учетных данных
• Получение профиля текущего пользователя
• Защита маршрутов с использованием JWT-токенов

Управление проектами

• Создание новых проектов с названием, описанием и статусом
• Просмотр списка всех проектов
• Просмотр собственных проектов
• Редактирование проектов
• Удаление проектов
• Пагинация для списков проектов

Технологии

Фронтенд (client/)

• React 19.2.0 - основной фреймворк для построения пользовательского интерфейса
• TypeScript 5.9.3 - строгая типизация
• Vite 7.2.4 - сборщик проекта
• Redux Toolkit - управление состоянием приложения
• React Router DOM 7.9.6 - маршрутизация
• Tailwind CSS 4.1.17 - стилизация
• Ant Design 6.0.0 - UI-компоненты
• Axios 1.13.2 - HTTP-запросы к API
• React Hook Form + Zod - валидация форм

Бэкенд (server/)

• Node.js - серверная платформа
• Express 5.1.0 - веб-фреймворк
• MongoDB - база данных
• Mongoose 8.20.1 - ODM для MongoDB
• JWT - токены аутентификации
• bcrypt 6.0.0 - хеширование паролей
• express-validator 7.3.1 - валидация данных
• CORS - политики безопасности

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

Предварительные требования

• Node.js (версия 18 или выше)
• npm или yarn
• MongoDB (локально или облачный Atlas)

Установка бэкенда

1. Перейдите в директорию сервера:

cd server

2. Установите зависимости:

npm install

3. Создайте файл .env на основе .env.example:

cp .env.example .env

4. Настройте переменные окружения в файле .env:

PORT=5000
CLUSTER_MONGODB_CONNECT=ваша_ссылка_на_mongodb
JWT_SECRET=ваш_секретный_ключ
JWT_EXPIRES_IN=24h

5. Запустите сервер в режиме разработки:

npm run dev

Установка фронтенда

1. Перейдите в директорию клиента:

cd client

2. Установите зависимости:

npm install

3. Создайте файл .env при необходимости (обычно не требуется для локальной разработки)

4. Запустите приложение в режиме разработки:

npm run dev

Приложение будет доступно по адресу http://localhost:5173

API Endpoints

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

• POST /auth/registration - регистрация пользователя
• POST /auth/login - вход в систему
• GET /auth/profile - получить профиль текущего пользователя (требует JWT-токен)

Проекты

• POST /projects/create - создать проект (требует JWT-токен)
• GET /projects/list - получить список всех проектов (требует JWT-токен)
• PUT /projects/:id - обновить проект (требует JWT-токен)
• DELETE /projects/:id - удалить проект (требует JWT-токен)
• GET /projects/myprojects - получить список собственных проектов (требует JWT-токен)

Структура базы данных

Коллекция пользователей (users)

• _id - уникальный идентификатор
• name - имя пользователя (обязательно)
• surname - фамилия пользователя (обязательно)
• email - email пользователя (уникальный, обязательно)
• password - зашифрованный пароль (обязательно)
• role - роль пользователя (по умолчанию "user")
• createdAt, updatedAt - даты создания и обновления

Коллекция проектов (projects)

• _id - уникальный идентификатор
• title - название проекта (обязательно, до 100 символов)
• description - описание проекта (обязательно, до 500 символов)
• status - статус проекта (active, completed, archived, on_hold, по умолчанию active)
• createdBy - ссылка на пользователя-создателя
• createdAt, updatedAt - даты создания и обновления

Архитектура фронтенда

Компоненты

• Header - шапка приложения
• Aside - боковая панель навигации
• ProtectedRoute - защищенный маршрут
• Компоненты аутентификации, проектов и других разделов

Страницы/Представления

• HomePage - главная страница
• AuthPage - страница аутентификации
• ProjectsPage - страница управления проектами
• ProjectPage - страница отдельного проекта

Хранилище (Redux)

• auth - состояние аутентификации (пользователь, токен)
• Асинхронные действия для API-запросов

Разработка

Скрипты для фронтенда

• npm run dev - запуск в режиме разработки
• npm run build - сборка для продакшена
• npm run lint - проверка кода
• npm run preview - предпросмотр сборки

Скрипты для бэкенда

• npm run dev - запуск в режиме разработки с nodemon
• npm start - запуск в продакшене
• npm test - запуск тестов (пока без реализации)

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

• Пароли хешируются с помощью bcrypt
• Аутентификация через JWT-токены
• Валидация вводимых данных на сервере
• CORS политики для ограничения доступа

Дополнительные особенности

• Валидация форм с использованием Zod
• Пагинация для списков проектов
• Защита маршрутов с автоматической проверкой аутентификации
• Адаптивный дизайн с использованием Tailwind CSS
• Интеграция с Ant Design для UI-компонентов

Возможные улучшения

• Добавление тестов (unit и e2e)
• Поддержка ролей и разрешений
• Интеграция с облачным хранилищем файлов
• Уведомления и чат для проектов
• История изменений проектов
• Добавление участников в проекты