Youscan
Test
La Taskprincipal forintención Internde /esta Juniortarea Front-Endno Developeres Positionmedir @cuánto Youscansabes
Основная задача тестового не узнать как сильно вы знаете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, например). Предусмотрите просмотр списка с избранными фильмами где-то в приложении и удаление из избранного. Также предусмотрите отображение на карточке с фильмом и его странице информации о том, что этот фильм добавлен в избранное.Важно!Вы можете использовать готовые компоненты и/или утилиты. Например,компонентдля ленивой подгрузки илиутилитудля синхронизации с localStorage. Еще, естьготовыебиблиотекикомпонентов, которые помогут ускорить разработкуelección).ВнешнийLaвидpáginaприложенияdebeтожеtenerоценивается.unПопробуйтеcampoпродуматьdeинтерфейсbúsqueda.пользователяAlиingresarегоtexto,взаимодействиеdebenсmostrarseприложениемlas/películasUXcorrespondientes.По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современныйlaJavaScriptlista 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
илиoHerokuHeroku. ПоEnтехнологиямcuanto–aнаtecnologías,своеpuedesусмотрение,elegir,изperoобязательногоReactтолькоesReact.obligatorio.
ПолезныеMateriales материалыútiles
СсылкиDocumentación
с документацией кdel API:
- https://developers.themoviedb.org/3
- https://developers.themoviedb.org/3/movies/get-popular-movies
- https://developers.themoviedb.org/3/search/search-movies
- https://developers.themoviedb.org/3/genres
- https://developers.themoviedb.org/3/movies/get-movie-details
- https://developers.themoviedb.org/3/movies/get-movie-recommendations
МожноRecursos
почитать / посмотреть:
- React Video Course on egghead
- React Video Course on reacttraining
- Redux Video Course Part 1
- Redux Video Course Part 2
ВебинарDocumentaciónпоdeФПReduxДокументацияDocumentaciónRedux(рекомендую читать прям как книгу)Документацияde React(аналогично)- Normalizr
- ImmutableJS
- ImmutableJS -
хороший доклад - ES2015
КучаRecursosполезностейútilesпоsobre ReduxХорошаяArtículoстатья проsobre react-routerПример:Ejemplo: Sound ReduxПример:Ejemplo:АсинхронныеSolicitudesзапросыasíncronasвen ReduxПример:Ejemplo:ПримерEnrutamientoсyроутингом и редаксомRedux
P.S.Por Прошуfavor, неno копипаститьcopies изy примеров,pegues яde этоlos замечу :) Используйте их для вдохновения и рефереренса.ejemplos!