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

Общая концепция

Movies Explorer представляет собой клиент-серверное приложение, построенное по архитектуре SPA (Single Page Application). Система состоит из двух основных компонентов:

• Frontend (клиентская часть)
• Backend (серверная часть)

Frontend

Файловая структура

movies-explorer-frontend/
├── assets/               # Активы проекта (изображения, шрифты, общие стили)
├── components/           # Переиспользуемые компоненты интерфейса
│   ├── buttons/
│   ├── forms/
│   ├── inputs/
│   └── ...
├── context/              # Глобальные данные приложения
├── hooks/                # Кастомные хуки
├── pages/                # Компоненты страниц
│   ├── Main/
│   ├── Profile/
│   ├── SignIn/
│   └── SignUp/
├── routes/               # Маршрутизация
├── utils/                # Вспомогательные утилиты
├── .gitignore
├── craco.config.js
├── package.json
└── README.md

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

• React.js
• React Router
• JavaScript
• CSS
• HTML
• БЭМ-методология

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

1. Авторизация:

   • Регистрация пользователя
   • Вход в систему
   • Получение токена
   • Выход из системы

2. Работа с фильмами:

   • Поиск фильмов
   • Добавление в избранное
   • Управление избранным
   • Получение информации о фильме

3. Управление профилем:

   • Редактирование данных
   • Загрузка аватара
   • Смена пароля

Backend

Файловая структура

movies-explorer-api/
├── config/               # Конфигурационные файлы
├── controllers/          # Контроллеры API
├── models/               # Модели данных
├── routes/               # Роуты API
├── middlewares/          # Мидлвары
├── utils/                # Утилиты
├── .env.example          # Пример конфигурационного файла
├── package.json
└── server.js             # Точка входа

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

• Node.js
• Express.js
• MongoDB
• JWT для аутентификации
• Celebrate для валидации

Взаимодействие компонентов

• REST API для взаимодействия фронтенда и бэкенда
• JSON как формат обмена данными
• HTTP-методы для CRUD-операций
• JWT-токены для аутентификации

Дополнительные компоненты

• Валидация данных:

  • На стороне клиента
  • На стороне сервера

• Обработка ошибок:

  • Глобальная обработка ошибок
  • Специфичные ошибки для каждого эндпоинта

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

  • Защита от CSRF
  • Валидация входных данных
  • Хеширование паролей