/project-FD3

Primary LanguageJavaScript

SPA "Streaming Service"

ScreenShot

Как запустить проект?

  1. Создать директорию, в которой будет размещен проект.

  2. С помощью терминала, запущенного из используемой среды разработки, перейти в созданную директорию и выполнить команду git clone https://github.com/ysnitko/project-FD3.git.

  3. В терминале выполнить команду cd project-FD3.

  4. Для загрузки необходимых библиотек, используемых в проекте, в терминале выполните команду npm i.

  5. После загрузки библиотек и зависимостей запускаем сборку проекта, используя команду npm run start.

  6. Проект запустится автоматически в браузере либо будет доступен по адресу http://localhost:3000.

1. Динамичность веб-страниц.

Реализован условный рендер кнопки бокового меню 'Избранное', которая оповещает пользователя о том, что в список избранного добавлены фильмы, а также кнопки добавления и удаления из избранного.

ScreenShot

Текст страницы рендерится на языке в зависимости от выбранной пользователем локализации (доступен английский и русский язык). По умолчанию выбран английский язык. Реализовано при помощи плагина react-i18n.

ScreenShot

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

ScreenShot

При наведении курсора мыши на ссылку с актером реализована всплывающая подсказка с отображением его фотографии (реализовано при помощи инструмента ReactTooltip v5).

ScreenShot

2. Производительность отрисовки.

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

3. Навигация в приложении.

Кнопки 'вперед', 'назад', 'освежить' работают корректно. Роутинг реализован средствами react-routing и описан в файле PageRouter.js. Используется вложенный роутинг (фильмы -> о фильме -> идентификатор фильма, фильмы -> категория -> cтраница). Текущая позиция пользователя в приложении передается в URL.

ScreenShot

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

ScreenShot

4. Кроссбраузерность.

Приложение сохраняет свою функциональность в браузерах Chrome, IE, Opera, Firefox, в браузере Safari наблюдаются различия в стилях таких элементов html как select.

Приложение адаптировано к мобильным устройствам на ОС Android и iOS:

ScreenShot

ScreenShot

ScreenShot

Для демонстрации работы приложения необходимо перейти по ссылке с мобильных устройств.

5. Коммуникации.

Веб-приложение широко использует AJAX для загрузки контента, данных, ресурсов. Основной контент для приложения (фильмы, информация о них) при помощи метода fetch загружается с сервера https://api.tvmaze.com (реализовано в компонентах MovieList, About). В момент запроса данных отображается индикатор загрузки.

ScreenShot

6. Модель данных.

Для управления состоянием приложения используется модель данных redux. Основная логика работы с redux расположена в папке redux. Результирующий reducer приведен в файле index.js и посредством использования метода combineReducers собирает вложенные редьюсеры в единый объект.

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

Для автоматической сборки приложения в терминале необходимо выполнить команду npm run build. Приложение развернуто на сервисе Netlify, который интегрирован с github репозиторием. Любые изменения в функционале приложения после его сборки будут обновлены в резвернутом проекте.