/F64_JS2_Project

Информационный ресурс о фильмах

Primary LanguageJavaScript

КиноКосмос

Узнай о фильмах всё и поделись своим мнением!

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


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

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

В проекте была использована база данных Firebase (Cloud Firestore). Для отображения информации о фильмах использовался Kinopoisk API Unofficial.

Подробное описание

Header (шапка сайта)

Header представлен на всех страницах сайта и включает в себя:

  • Логотип, при клике на который происходит переход на главную страницу;

  • Ссылку на страницу Каталога;

  • Поиск по ключевым словам. При вводе ключевого слова отображается список со ссылками на страницы найденных фильмов;

  • Атрибуты личного кабинета:
    • Кнопка Войти, если пользователь не авторизован. При нажатии, открывается модальное окно входа в личный кабинет;
    • Приветствие авторизованного пользователя, при нажатии на аватарку происходит переход в личный кабинет;
    • Кнопка выхода из личного кабинета (при нажатии на кнопку выхода, в случае, если пользователь находится в личном кабинете, происходит переход на главную страницу).

Для мобильных устройств реализовано бургер-меню.

Авторизация и регистрация

Модальное окно входа в личный кабинет может отображаться на главной странице, в каталоге и на странице фильма. Через него можно перейти на форму регистрации (на отдельной странице). Реализована возможность восстановления пароля.

Главная страница

На главной странице представлены:

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

Личный кабинет

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

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

Каталог

В Каталоге есть поиск по фильтрам. Реализованы фильтры по жанру, стране и категории (фильм, сериал и т.п.). Список фильмов отсортирован по рейтингу от большего к меньшему. Пагинация реализована с помощью скроллинга: найденные фильмы отображаются на странице по 20 штук, при достижении конца страницы, подгружаются следующие 20.

Авторизованный пользователь видит, что фильм у него в Избранном ( :heart: иконка рядом с названием окрашена ), может удалять и добавлять фильмы в Избранное по нажатию на иконку. Для гостя при попытке добавить фильм в Избранное откроется модальное окно авторизации.

Переход на страницу фильма осуществляется при нажатии на его название.

Страница фильма

Страница фильма содержит:

  • Подробное описание фильма или сериала с основными актерами, которые в нем участвовали;
  • Информацию о сезонах сериалов с описанием каждой серии;
  • Возможность добавить фильм в Избранное и удалить из него (для авторизованного пользователя), для гостя при попытке добавить фильм в Избранное откроется модальное окно авторизации;
  • Рецензии пользователей Кинопоиска;
  • Отзывы пользователей, зарегистрированных на нашем сайте;
  • Возможность авторизованному пользователю добавить отзыв, для гостя — предложение сначала авторизоваться.

Технологии и инструменты

JavaScript HTML5 SASS Git GitHub Firebase Vite

Команда проекта

MarinaNatAlinaHelenAnastasiiaNataliiaNika