sergeykardashev/movies-back

Бэк дипломного проекта Movies-explorer. Кардашев Сергей

Кинопоиск на минималках (backend)

Русский | English

Учебный проект. Цель - объединение разрозненных знаний в одном цельном проекте и закрепление навыков создания приложений на React и Express

Макет в Figma

Содержание

• Функции
• Что сделано
• Планы по доработке
• Стэк технологий
• Установка

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

• Кинопоиск на минималках (backend) - вы тут
• Кинопоиск на минималках (frontend)

Функции

Сервис похож на кинопоиск. Пользователь регистрируется, авторизуется, ищет фильмы по базе, добавляет и избранное. По избранному тоже есть поиск. Есть фильтр по короткометражкам.

Что сделано

• Настроил инфраструктуру и создал сервер на Express;
• Подключил базу данных MongoDB, создал схемы и модели ресурсов API;
• Реализовал логирование, аутентификацию и авторизацию на сервере;
• Задеплоил бэкенд на Яндекс Облако;
• Сверстал компоненты на React, портировал разметку в JSX формат;
• Описал логику и сверстал страницы регистрации, логина, редактирования профиля, сохраненных фильмов;
• Реализовал асинхронные запросы к API;
• Проработал авторизованные и неавторизованные состояния, сохранение фильмов в профиле;
• Реализовал фильтрацию фильмов на стороне клиента;
• Тестировал АПИ в Postman;
• Аутентифицировал при помощи токенов JWT;

Планы по доработке

• Перевод проекта на TypeScript для повышения надежности;
• Перевод на Redux и SCSS для упрощения поддержки и расширения;
• Изменение логики и UI для консистентного UX.

Стэк технологий

• HTML
• CSS
• БЭМ
• JavaScript
• WebPack (CRA)
• React
• Node.js
• Express
• MongoDB
• JWT
• GitHub
• VM
• Ubuntu
• Nginx
• SSL
• Postman

В работе применены:

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

Установка

• Требуется Node.js версии v18.16.0
• Склонируйте репозиторий git clone [email protected]:SergeyKardashev/movies-back.git
• Установите зависимости npm install
• Запустите сервер npm run start

Этапы работы

• Бэкэнд — 1 неделя;
• Perfect Pixel верстка на JSX и CS, — 2.5 недели;
• Функциональность и JS — 2 недели;

Результаты

Закрепил навыки создания приложений на React, Express с MongoDB

IMDB on a Budget

This is my graduation project for the Web Faculty at Yandex Practicum! 🎉

The goal is to polish skills in building applications with React and Express.

Figma layout

Table of Contents

• Project Structure
• Key Features
• Stack
• Installation
• Milestones
• Roadmap

Project Structure

• IMDB on a Budget (backend) - you are here
• IMDB on a Budget (frontend)

About

A dynamic service that allows you to search for movies on demand and save them in your personal account.

What has been done

Here's a sneak peek into what went behind the scenes:

• Laid the groundwork with robust infrastructure and brought an Express server to life.
• Established a connection to the database, sculpted API schemas, and resource models to ensure seamless data flow.
• Fortified the server with sophisticated logging, bulletproof authentication, and authorization mechanisms.
• Deployed the backend magic on Yandex Cloud, ensuring reliability and scalability.
• Breathed life into the frontend with React, transforming static markup into interactive experiences.
• Crafted the user journey with meticulous attention to registration, login, profile customization, and managing saved movies.
• Mastered asynchronous magic with requests to the API, making the app responsive.
• Delved into the nuances of user experience, fine-tuning the app to distinguish between authorized and unauthorized states and enabling users to curate their movie collections.
• Implemented client-side filtering to swiftly navigate through the ocean of movies.

Project milestones

Backend — 1 week; JSX and CSS coding, Perfect Pixel work — 2.5 weeks; Functionality and JS — 2 weeks;

Stack

• HTML
• CSS
• BEM
• JavaScript
• WebPack (CRA)
• React
• Node.js
• Express
• MongoDB
• JWT
• GitHub
• VM
• Ubuntu
• Nginx
• SSL
• Postman
• API

Installation

• Required Node.js v18.16.0
• Clone the repository git clone [email protected]:SergeyKardashev/movies-back.git
• Install the dependencies npm install
• Launch the server npm run start

Result

Solidified skills in building applications with React, Express, and MongoDB.

movies-back's Issues

🗄️ Валидатор на уровне модели

Ответы добавить прямо в модели minLength: [2, 'Минимум 2 символа'].

Чтобы валидировать данные на уровне схемы независимо от наличия валидатора запросов.

• 2 модели
• протестировать

🗄️ Создать отдельные роутеры

• index
• users
• movies
• wrong request

🗄️ настроить rate limiter

🗄️ добавить ловца неотловленных ошибок.

🗄️ Добавить мидлвэр auth

• создать auth мидлвер в папку middlewares
• проверить наличие заголовка authorization у запроса
• проверить начинается ли заголовок с Bearer
• верифицировать подпись токена
• отдать пейлоуд в заголовок запроса в поле user ****

🗄️ Добавить кастомный обработчик ошибок

Добавить централизованный обработчик ошибок. СВОЙ.

• написать мидлвэр обработчик ошибок
• подключить мидлвэр обработчик ошибок
• переделать функции чтоб не выбрасывали ошибку, а отправляли в мидлвер

🗄️ Дописать выбрасывание ошибок при неудачном обращении к БД на orFail.

Везде, кроме методов create.

🗄️ исправить удаление фильма - не удаляет.

🔧Создать инфраструктуру

🗄️ вынести generateToken из login в утилиты

🗄️ Создать приложение на минималках

• Создать ветку

• Создать express-сервер в точке входа.

• Настроить порт, слушающий прогу, из end:

  • В консоль выводить номер порта.

• Настроить хот релоуд

• Настроить скрипты запуска в конфиге:

  • dev запускает в режиме разработки с хот-релоадом,
  • start — в продакшн-режиме без хот-релоада.

• Поставить мОнгуса и подключиться к MongoDB

  • Поставить мОнгуса
  • Создать БД /bitfilmsdb
  • в точке входа импортировать Монгуса
  • подключиться к БД

• Подключить мидвэру парсер обработки json

• Создать первые обработчики роутов с заглушками

  • роут / для get запросов
  • тестировать браузером
  • роут /post для postзапросов
  • тестировать постманом

• Создать модель users, импортировать и протестировать

  • Создать схему и модель юзера
    • поля
      • поле email со свойствами…
        • обязательное поле,
        • уникальное
        • должно валидироваться на соответствие схеме емейла.
      • поле password - ****хеш пароля.
        • Обязательное поле-
        • строка.
        • Нужно чтобы база данных не возвращала это поле.
      • поле name — имя пользователя, например: Александр или Мария.
        • Это обязательное поле
        • строка
        • от 2 до 30 символов.
  • Экспортировать модель
  • Импортировать модель в точку входа
  • Тестировать модель методом post

• Создать модель movies, импортировать и протестировать

  • Создать схему и модель юзера
    • поле country.
      • Обязательное поле
      • строка.
    • director
      • Обязательное поле
      • строка.
    • duration
      • Обязательное поле
      • число.
    • year
      • Обязательное поле
      • строка!!!!!
    • description
      • Обязательное поле
      • строка.
    • image — ссылка на постер к фильму.
      • Обязательное поле-
      • строка.
      • Запишите её URL-адресом (мб проверять на урльность)
    • trailerLink
      • Обязательное поле-
      • строка.
      • Запишите её URL-адресом.
    • thumbnail — миниатюрное изображение постера к фильму.
      • Обязательное поле-
      • строка.
      • Запишите её URL-адресом.
    • owner — _id пользователя, который сохранил фильм.
      • Обязательное поле.
    • movieId — id фильма, который содержится в ответе сервиса MoviesExplorer.
      • Обязательное поле
      • в формате number.
    • nameRU — название фильма на русском языке.
      • Обязательное поле-
      • строка.
    • nameEN — название фильма на английском языке.
      • Обязательное поле-
      • строка.
  • Экспортировать модель
  • Импортировать модель в точку входа
  • Тестировать модель методом post

• Слить ветку фичи в левел

🗄️ Добавить кастомные ошибки

• Написать кастомные ошибки. Пригодятся статусы:

• 400,

• 401,

• 403,

• 404,

• 409,

• 500.

• Внести статусы в переменные.

• 400,

• 401,

• 403,

• 404,

• 409,

• 500.

🗄️ Добавить краш-тестовый роут и мидлвер

🗄️ Добавить логирование в два файла

• request.log;
• error.log.
• Логи в формате JSON.
• Файлы логов не должны добавляться в репозиторий.

🗄️ Роуты и колбэки юзера и киношек

• создать роуты и контроллеры юзера и киношек
  • создать контроллер юзеров
  • создать контроллер киношек
  • В API создать 5 роутов, защищенных авторизацией: если клиент не прислал JWT - доступ к роутам закрыт.

    #  GET /users/me возвращает информацию о пользователе (email и имя)
    #   PATCH /users/me обновляет информацию о пользователе (email и имя)
    #  GET /movies возвращает все сохранённые текущим пользователем фильмы
    # POST /movies создаёт фильм с переданными в теле
    # country, director, duration, year, description, image, trailer, nameRU, nameEN и thumbnail, movieId
    # DELETE /movies/_id удаляет сохранённый фильм по id

  • каждому роуту написать заглушку
  • протестировать все роуты с заглушками
  • на запрос возвращать объект
• Создать обработчик getUser
• Создать обработчик updateUser
• Создать обработчик getMovies
• Создать обработчик createMovie
• Создать обработчик deleteMovie
• Тестировать, что юзер не может удалять фильмы других юзеров.

🗄️ исправить ручку getMovies

Чтоб отдавала не все фильмы, а только фильмы юзера

🗄️ joy + celebrate

Валидатор тела и параметров запроса.
Чтобы невалидированные данные не шли в контроллер.
Клиенту при этом вернуть ошибку.

• Подключить
• Подключить
• Настроить для каждого роута
• протестировать

🗄️ Установить helmet, CORS

🗄️ перенести значения в .env

🗄️ Роуты и контроллеры регистрации и логина

• POST /signup создаёт пользователя с переданными в теле email, password и name
• POST /signin проверяет переданные в теле почту и пароль и возвращает JWT
• Эти два роута не нужно защищать авторизацией.
• сначала user._id записать в запросы мидлвэрой
• затем вместо временного решения написать постоянное, где user._id беру из токена, а токен из хранилища
• пароль хэшировать bcrypt

• На странице регистрации идет запрос на роут /signup. Если запрос прошёл успешно, то автоматически производится вход и редирект на страницу /movies.

взято в [критериях](https://code.s3.yandex.net/web-developer/static/new-program/web-diploma-criteria-2.0/index.html) в блоке Работа принимается, если соблюдены критерии работоспособности

если сохранять JWT в куках, понадобится доп роут POST /signout. Удалит JWT из куков.

• потребуется парсер кук