Все проекты

CinemaGuide

Интерактивный каталог фильмов на базе kinopoisk-APIПользователям этого приложения доступны поиск фильмов и возможность добавить их в избранное, чтобы не забыть посмотреть интересные картины.

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

Главная страница приложения — удобный дашборд, на котором пользователи могут выбрать случайный фильм и посмотреть список топовых фильмов по IMDb-рейтингу.,

На отдельной странице пользователь может просмотреть список существующих киножанров, выбрать один из них и перейти на страницу с фильмами, которые к нему относятся.,

Структура страницы фильмов по жанру: карточки с фильмами, отфильтрованными по жанру;по умолчанию первые 10 фильмов, отсортированные по рейтингу. При скролле подгружаются следующие 10 фильмов (пока не закончится список).,

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

Функция добавления фильма в избранное доступна только для авторизованных пользователей. Вызов формы авторизации происходит при нажатии на кнопку «Войти» в шапке сайта или попытке добавить фильм в избранное (если пользователь ещё не авторизован). Кроме того, после авторизации пользователю становится доступна страница аккаунта с личной информацией и списком фильмов, которые он добавил в избранное.,

Пользователю также доступна функция поиска фильма по названию, которой можно воспользоваться, нажав на поле поиска в разделе навигации.,

Верстка Responsive (Desktop, Tablet, Mobile).,

Прелоадеры для ситуаций, требующих асинхронных действий: авторизация, загрузка списка фильмов, загрузка фильма и другое выполнены в стиле Skeleton.

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

  • Перед сборкой и запуском проекта необходимо установить зависимости командой: npm i
  • Запуск проекта локально в Dev режиме: npm run dev
  • Сборка продакшн (готовый проект для размещения на хостинге): npm run build