Frontend-часть дипломного проекта Я.Практикум

Сервис с поиском фильмов по запросу

Сайт позволяет регистрироваться, искать и сохранять понравившиеся фильмы, просматривать их youtube-трейлер.

---

Функциональность:

Node.js

• База данных фильмов со стороннего API
• Все данные о пользователе, сохраненных фильмах и введенных данных в поле поиска сохраняются и хранятся на сервере, использовано собственное API
• Добавление/удаление фильмов в избранное

React, JS

• Реализован фильтр для подбора короткометражных фильмов
• Переход к показу youtube-трейлера фильма при нажатии на постер
• Возможность поиска фильмов как на русском, так и английском языках
• "Живая" валидация всех форм/полей ввода с использованием регулярных выражений
• Возможность редактирования своего профиля (имени и e-mail)
• Запоминание состояния авторизации пользователя
• Подгрузка дополнительных фильмов при нажатии на кнопку "Ещё"
• Использование собственных хуков
• Утилитарные функции, константы, функции обращения к серверу вынесены в отдельный файл
• Бургерное меню для мобильной и планшетной версии
• Защищённые роуты для невозможности посещения сайта неавторизованным пользователям
• Запоминание состояния полей ввода, фильтра короткометражек и найденных фильмов

CSS

• Полноценый респонсив для всех популярных разрешений экрана
• Для создания сеток используется flex и grid
• При загрузке данных отображается прелоадер
• Приложение свёрстано по БЭМ, соблюдается семантичность

---

Используемые технологии:

Node.js 19
React 18
JS
HTML 5
CSS 3

Верстка сайта производилась по подготовленному макету

Для реализации данной части диплома был использован макет dark-2

---

Сайт можно найти по следующему адресу:

https://giga-movies.nomoreparties.co/

Либо установите проект на свой компьютер для ознакомления:

• скачайте репозиторий

• npm i — установите зависимости

• npm run start — запустите приложение