soures
8/7/2017 - 11:17 AM

Intern / Junior Front-End Developer Position @ Youscan : Test Task

Intern / Junior Front-End Developer Position @ Youscan : Test Task

test-task.md
content_copyfile_download
  • Rendered
  • Source

Test Task for Intern / Junior Front-End Developer Position @ Youscan

Основная задача тестового не узнать как сильно вы знаете React, а посмотреть насколько хорошо вы сможете разобраться с новыми технологиями в относительно короткий срок. В идеале, на него нужно потратить не более 3 дней. А так - делайте сколько делается, пока мы не закроем вакансию ;)

Описание

Нужно написать одностраничное приложения для просмотра фильмов с помощью The Movie Database API.

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

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

Также реализуйте возможность добавлять фильмы в избранное как со списка, так и на странице с отдельным фильмом. Список таких фильмов сохраняйте локально (localStorage, например). Предусмотрите просмотр списка с избранными фильмами где-то в приложении и удаление из избранного. Также предусмотрите отображение на карточке с фильмом и его странице информации о том, что этот фильм добавлен в избранное.

Технологии

При реализации задания необходимо использовать следующие технологии:

  1. React
  2. Redux
  3. React-router

Также, будет плюсом:

  1. Normalizr
  2. Reselect
  3. ImmutableJS

Важно!

  1. Вы можете использовать готовые компоненты и/или утилиты. Например, компонент для ленивой подгрузки или утилиту для синхронизации с localStorage. Еще, есть готовые библиотеки компонентов, которые помогут ускорить разработку.
  2. Внешний вид приложения тоже оценивается. Попробуйте продумать интерфейс пользователя и его взаимодействие с приложением / UX
  3. По желанию, можете покрыть код необходимым набором тестов
  4. Используйте ES2015 в этом задании
  5. Добавьте к решению инструкции по запуску проекта и краткое описание решения
  6. Выложите куда-то рабочее приложение, например, на GitHub Pages или Heroku

Полезные материалы

Ссылки с документацией к API:

Советую почитать / посмотреть:

P.S. Прошу не копипастить из примеров, я это замечу :) Используйте их для вдохновения и рефереренса.