Ir al contenido principal

Youscan

Test

La Taskprincipal forintención Internde /esta Juniortarea Front-Endno Developeres Positionmedir @cuánto Youscan

sabes

Основная задача тестового не узнать как сильно вы знаетеde React, аsino посмотретьevaluar насколькоtu хорошоcapacidad выpara сможетеaprender разобратьсяnuevas сtecnologías новымиen технологиямиun вtiempo относительноrelativamente короткийcorto. срок.Idealmente, Вdeberías идеале,dedicarle наno негоmás нужно потратить не болееde 3 дней.días. АSin такembargo, -si делайтеnecesitas сколькоmás делается,tiempo, покаsigue мыtrabajando неhasta закроемque вакансиюla ;)vacante se cierre.

Описание

Desarrolla

Нужноuna написатьaplicación одностраничноеde приложенияuna дляsola просмотраpágina фильмовpara сver помощьюpelículas utilizando The Movie Database API.

При

Requisitos

открытии

Lista приложения,de долженpelículas отображатьсяpopulares:

список
    популярных
  • Al фильмовabrir сla пагинациейaplicación, илиdebe динамическойmostrarse подгрузкойuna lista de películas populares con paginación o carga dinámica (наa выбор).tu Также на странице должно быть поле для поиска. Когда ты вводишь туда какой-то текст, должны отобразиться фильмы которые ему соответствуют. Для каждого фильма в списке должен отображаться список жанров (названий жанров, не айдишек), к которым он принадлежит.

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

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

    Важно!

    1. Вы можете использовать готовые компоненты и/или утилиты. Например, компонент для ленивой подгрузки или утилиту для синхронизации с localStorage. Еще, есть готовые библиотеки компонентов, которые помогут ускорить разработкуelección).
    2. ВнешнийLa видpágina приложенияdebe тожеtener оценивается.un Попробуйтеcampo продуматьde интерфейсbúsqueda. пользователяAl иingresar егоtexto, взаимодействиеdeben сmostrarse приложениемlas /películas UXcorrespondientes.
    3. ПоCada желанию,película можетеen покрытьla кодlista необходимымdebe наборомmostrar тестовlos nombres de los géneros a los que pertenece (no los IDs).

Detalle de la película:

  • Al hacer clic en una tarjeta de película, debe mostrarse una página con información detallada y una lista de películas recomendadas o similares (pueden ser ambas).

Favoritos:

  • Permitir agregar películas a favoritos tanto desde la lista como desde la página de detalles.
  • ИспользуйтеGuardar современныйla JavaScriptlista de favoritos localmente (por ejemplo, en localStorage).
  • ДобавьтеIncluir кuna решениюvista инструкцииpara поver запускуy проектаeliminar иpelículas краткоеde описание решенияfavoritos.
  • ВыложитеMostrar куда-тоen рабочееla приложение,tarjeta например,de наla película y en su página de detalles si la película está en favoritos.

Importante

  • Puedes usar componentes y/o utilidades ya existentes, como componentes de carga diferida o utilidades para sincronizar con localStorage.
  • También hay bibliotecas de componentes listas para usar que pueden ayudar a acelerar el desarrollo.
  • La apariencia de la aplicación también será evaluada. Intenta diseñar una buena interfaz de usuario y experiencia de usuario (UX).
  • Opcionalmente, puedes cubrir el código con un conjunto necesario de pruebas.
  • Usa JavaScript moderno.
  • Añade instrucciones para ejecutar el proyecto y una breve descripción de la solución.
  • Publica la aplicación en algún sitio, por ejemplo, GitHub Pages илиo HerokuHeroku.
  • ПоEn технологиямcuanto a наtecnologías, своеpuedes усмотрение,elegir, изpero обязательногоReact толькоes React.obligatorio.

 

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

Ссылки

Documentación с документацией кdel API:

Можно

Recursos почитать / посмотреть:

adicionales:

P.S.Por Прошуfavor, неno копипаститьcopies изy примеров,pegues яde этоlos замечу :) Используйте их для вдохновения и рефереренса.ejemplos!