Учебный проект "Что посмотреть" от HTML Академии в рамках курса по React.

Запуск:

• установить зависимости;
• npm run start запускает webpack dev server в режиме development;
• npm run build собирает продакш версию проекта;
• npm run test запускает тесты;

Технологии:

React + Redux, сборка на Webpack.

 

Описание и ТЗ:

Приложение состоит из нескольких страниц: Main (/), Sign In (/login), MyList (/mylist), Film (/films/:id), Add review (/films/:id/review), Player (/player/:id).

Страницы MyList, Add review доступны только авторизованным пользователям. Если пользователь не авторизован, то при переходе к этим страницам выполняется перенаправление на страницу Sign In.

Если пользователь не авторизован, то при попытке перехода к приватной странице выполняется перенаправление на страницу «Sign In» (/login).

В правом углу шапки отображается аватар пользователя (если пользователь авторизован) или ссылка «Sign In» (если пользователь не авторизован). Клик по аватарке пользователя выполняет переход на страницу MyList (/mylist).

Обращение к несуществующей странице (например, через адресную строку) перенаправляется на страницу «404».

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

При смене жанра или получении информации о фильмах с сервера, в списке фильмов отображается не больше 8 фильмов. Показ дополнительных фильмов выполняется нажатием на кнопку «Show more».

При клике по карточке фильма (на изображение или заголовок) выполняется переход на страницу «Film» (/films/:id). При наведении и удержании курсора мыши на изображении фильма, вместо изображения начинает воспроизводится видео-превью фильма.

Страница с детальным описанием фильма доступна по адресу /films/:id. Страница доступна всем пользователям. Блок «More like this» показывает похожие фильмы. В блоке отображается до 4-х карточек схожих фильмов. Похожие фильмы определяются по жанру.

Добавление нового отзыва выполняется по кнопке «Add review». Кнопка должна отображаться только для авторизованных пользователей.

Страница MyList содержит информацию о фильмах, добавленных в список «К просмотру». Добавление в список «К просмотру» осуществляется при нажатии на кнопку «+ MyList»

Страница «Sign in» доступна по адресу /login. Для входа в сервис пользователь вводит логин (email) и пароль. У сервиса отсутствует возможность регистрации, логин и пароль могут быть любыми, но не пустыми.

При нажатии на кнопку «Play» отрисовывается плеер и начинается показ выбранного фильма.

Проект покрыт тестами на Jest.