Трехзвенное асинхронное веб-приложение на Node.js и MongoDB

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

Согласно практическому заданию по курсу веб-разработки, разработано трехзвенное асинхронное web-приложение на Node.js и MongoDB. Приложение реализует систему управления пользователями с полным циклом CRUD операций, аутентификацией и возможностью загрузки файлов.

Архитектура приложения

1. Клиентская часть: React приложение с TypeScript, Styled Components и Effector для управления состоянием
2. Серверная часть: Node.js сервер на Express.js с REST API
3. База данных: MongoDB для хранения данных пользователей

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

• Регистрация нового пользователя
• Аутентификация пользователя с JWT токенами
• Просмотр и редактирование профиля пользователя
• Удаление пользователя
• Просмотр списка всех пользователей
• Загрузка и отображение аватара пользователя
• Автоматическая маршрутизация в зависимости от статуса аутентификации
• Асинхронные операции с использованием async/await

Технологический стек

Серверная часть

• Node.js + Express.js - серверная платформа и фреймворк
• MongoDB + Mongoose ODM - база данных и ORM
• JWT (JSON Web Tokens) - аутентификация
• Bcryptjs - хеширование паролей
• Multer - обработка загрузки файлов
• CORS - настройка кросс-доменных запросов
• Dotenv - управление переменными окружения

Клиентская часть

• React 18 с TypeScript - пользовательский интерфейс
• Effector - управление состоянием приложения
• Styled Components - стилизация компонентов
• Axios - HTTP клиент для запросов к API
• React Router v6 - маршрутизация
• React DOM - рендеринг приложения

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

Серверная часть (/server)

server/
├── models/
│   └── User.js           # Модель данных пользователя
├── middleware/
│   └── auth.js           # Middleware для аутентификации
├── routes/
│   ├── auth.js           # Маршруты аутентификации
│   ├── users.js          # Маршруты работы с пользователями
│   └── upload.js         # Маршруты загрузки файлов
├── uploads/              # Директория для хранения загруженных файлов
├── .env                  # Переменные окружения
├── package.json          # Зависимости сервера
└── server.js             # Точка входа сервера

Клиентская часть (/client)

client/
├── public/
│   └── index.html        # HTML шаблон
├── src/
│   ├── api/              # API клиент
│   │   └── index.ts
│   ├── store/            # Состояние приложения (Effector)
│   │   └── auth.ts
│   ├── components/       # React компоненты
│   │   ├── Auth/         # Компоненты аутентификации
│   │   │   ├── RegisterForm/
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.ts
│   │   │   └── LoginForm/
│   │   │       ├── index.tsx
│   │   │       └── style.ts
│   │   ├── Profile/      # Компонент профиля
│   │   │   ├── index.tsx
│   │   │   └── style.ts
│   │   ├── Users/        # Список пользователей
│   │   │   ├── index.tsx
│   │   │   └── style.ts
│   │   └── Loader/       # Компонент загрузки
│   │       ├── index.tsx
│   │       └── style.ts
│   ├── App.tsx           # Главный компонент
│   ├── App.styles.ts     # Стили приложения
│   ├── index.tsx         # Точка входа React
│   └── react-app-env.d.ts # Типы TypeScript
└── package.json          # Зависимости клиента

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

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

1. Node.js (версия 14 или выше)
2. MongoDB (локально установленный или удаленный сервер)
3. npm или yarn для управления зависимостями

Установка MongoDB

Для Windows:

1. Скачайте MongoDB Community Edition с официального сайта
2. Установите MongoDB следуя инструкциям установщика
3. Создайте директорию для данных MongoDB: C:\data\db
4. Запустите MongoDB сервис через командную строку:

mongod

Для macOS:

brew tap mongodb/brew
brew install mongodb-community
brew services start mongodb-community

Для Linux (Ubuntu/Debian):

sudo apt-get update
sudo apt-get install mongodb
sudo service mongodb start

Настройка проекта

1. Настройка серверной части

# Перейдите в директорию сервера
cd server

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

# Создайте файл .env со следующим содержимым:
# PORT=3001
# MONGODB_URI=mongodb://localhost:27017/user_management
# JWT_SECRET=your_jwt_secret_key_here

# Создайте директорию для загруженных файлов
mkdir uploads

# Запустите сервер в режиме разработки
npm run dev-server

# Или для production
npm start-server

2. Настройка клиентской части

# Перейдите в директорию клиента
cd client

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

# Запустите клиентское приложение
npm start

Конфигурация

Переменные окружения сервера (.env)

PORT=3001
MONGODB_URI=mongodb://localhost:27017/user_management
JWT_SECRET=your_jwt_secret_key_here

Настройки MongoDB

По умолчанию приложение использует локальную MongoDB на стандартном порту 27017. Для изменения настроек отредактируйте переменную MONGODB_URI в файле .env.

API Endpoints

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

• POST /api/auth/register - Регистрация нового пользователя
• POST /api/auth/login - Аутентификация пользователя

Пользователи

• GET /api/users/profile - Получение профиля текущего пользователя
• PUT /api/users/profile - Обновление профиля пользователя
• DELETE /api/users/profile - Удаление пользователя
• GET /api/users/all - Получение списка всех пользователей

Загрузка файлов

• POST /api/upload/avatar - Загрузка аватара пользователя

Интерфейс пользователя

Приложение имеет следующий пользовательский интерфейс:

Неаутентифицированные пользователи:

• Страница входа - форма для аутентификации
• Страница регистрации - форма создания нового аккаунта

Аутентифицированные пользователи:

• Профиль пользователя - просмотр и редактирование данных профиля
• Список пользователей - таблица со всеми зарегистрированными пользователями

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

Приложение реализует следующие меры безопасности:

1. JWT аутентификация - все защищенные маршруты требуют валидный токен
2. Хеширование паролей - пароли хранятся в хешированном виде с использованием bcrypt
3. Валидация данных - проверка входных данных на сервере
4. Защита от CSRF - использование современных практик безопасности

Модель данных

Модель пользователя включает следующие поля:

{
  username: String,     // Уникальный логин пользователя
  email: String,        // Уникальный email пользователя
  password: String,     // Хешированный пароль
  firstName: String,    // Фамилия
  lastName: String,     // Имя
  age: Number,         // Возраст
  avatar: String,      // URL аватара
  createdAt: Date,     // Дата создания
  updatedAt: Date      // Дата последнего обновления
}

Тестирование

Для тестирования приложения выполните следующие шаги:

1. Запустите MongoDB сервер
2. Запустите серверную часть приложения
3. Запустите клиентскую часть приложения
4. Откройте браузер и перейдите по адресу http://localhost:3000

Тестовые сценарии:

1. Регистрация нового пользователя

   • Перейдите на страницу регистрации
   • Заполните все обязательные поля
   • Нажмите кнопку "Зарегистрироваться"

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

   • Используйте созданные учетные данные
   • Войдите в систему

3. Редактирование профиля

   • Перейдите в профиль
   • Нажмите "Редактировать"
   • Измените данные и сохраните

4. Загрузка аватара

   • В профиле выберите файл изображения
   • Нажмите "Загрузить аватар"

5. Просмотр списка пользователей

   • Перейдите на страницу "Пользователи"

Возможные проблемы и их решение

1. MongoDB не запускается

• Убедитесь, что MongoDB установлен и запущен
• Проверьте, что порт 27017 не занят другим процессом

2. Ошибка подключения к базе данных

• Проверьте правильность строки подключения в .env файле
• Убедитесь, что MongoDB запущен

3. Ошибки CORS

• Проверьте, что клиент обращается к правильному порту сервера (3001)
• Убедитесь, что сервер настроен для обработки CORS запросов

4. Проблемы с загрузкой файлов

• Убедитесь, что существует директория uploads/
• Проверьте права доступа к директории
• Убедитесь, что размер файла не превышает 5MB

Примечания по разработке

Особенности реализации:

• Использование Effector для централизованного управления состоянием
• TypeScript для строгой типизации
• Styled Components для изолированных стилей компонентов
• Асинхронные функции для обработки операций ввода-вывода
• JWT токены для безопасной аутентификации
• Модульная структура компонентов

Архитектурные решения:

• Разделение на клиентскую, серверную части и базу данных
• Использование middleware для аутентификации
• Централизованная обработка ошибок
• Валидация данных как на клиенте, так и на сервере

Лицензия

Проект создан в рамках учебного задания. Все права на исходный код принадлежат автору.