avito.tech
Тестовое
Debes заданиеdesarrollar наuna позициюinterfaz стажёра-фронтендераpara
Нужноel разработать интерфейс для сайтаsitio Hacker News, состоящийque изconste двухde страниц.2 páginas.
ПродуктовыеRequisitos требованияdel producto
ГлавнаяPágina страницаprincipal
ПоказываетMuestraпоследниеlas últimas 100новостейnoticiasвenвидеformaсписка,deотсортированногоlista,поordenadasдате,porсамыеfecha,свежиеconсверху.las más recientes en la parte superior.КаждаяCadaновостьnoticiaсодержит:debe contener:названиеTítuloрейтингPuntuaciónникNombreавтораdel autorдатуFechaпубликацииde publicación
ПоAlкликуhacerнаclicновостьenпроисходитunaпереходnoticia,наseстраницуdebeновостиredirigir a la página de detalles de la noticia.СписокLaновостейlistaдолженdeавтоматическиnoticiasобновлятьсяdebeразactualizarseвautomáticamenteминутуcadaбезminutoучастияsinпользователяintervención del usuario.НаLaстраницеpáginaдолжнаdebeбытьtenerкнопкаunдляbotónпринудительногоparaобновленияactualizarспискаmanualmenteновостейla lista de noticias.
СтраницаPágina новости
de detalles de la noticia
ДолжнаDebeсодержать:contener:ссылкуEnlaceнаaновостьla noticiaзаголовокTítuloновостиde la noticiaдатуFechaавтораAutorсчётчикContadorколичестваdeкомментариевcomentariosсписокListaкомментариевdeвcomentariosвидеenдереваforma de árbol- Los comentarios raíz se cargan inmediatamente al entrar en la página, los comentarios anidados se cargan al hacer clic en el comentario raíz.
КорневыеLaкомментарииpáginaподгружаютсяdebeсразуtenerжеunприbotónвходеparaнаactualizarстраницу,manualmenteвложенныеla-listaпоdeклику на корневойcomentarios.НаLaстраницеpáginaдолжнаdebeбытьtenerкнопкаunдляbotónпринудительногоparaобновленияregresarспискаaкомментариевla Наlistaстраницеdeдолжна быть кнопка для возврата к списку новостейnoticias.
ТехническиеRequisitos требованияtécnicos
ПриложениеLaразработаноaplicaciónсdebeиспользованиемdesarrollarse utilizando ReactиyReduxRedux.ИспользованSe debe usar laофициальныйAPI oficial de Hacker News.ВызовыLas llamadas a la API de Hacker NewsAPIyиelобработкаmanejoданныхdeотlosнегоdatosпроизводятсяseнапрямуюdebenсrealizarфронтендаdirectamente desde el front-end (кромеexceptoслучая,siеслиrealizasвыlaсделаетеtareaопциональноеopcionalзадание проsobre Node.JS)js).РоутингElвыполненenrutamientoсdebeиспользованиемhacerse con React Routerv5v5.ФреймворкEl framework de UIлюбойpuedeнаserвашеcualquieraусмотрениеde tu elección (какporпримерejemplo, Ant Designилиo Semantic UI).- También
Можноseиpuedeнаhacerчистомconcss,CSSглавное,puro,чтобыloбылоimportanteкрасивоes
ПакетныйGestorменеджерde paquetes:yarn
.ПриложениеLaдолжноaplicaciónзапускатьсяdebeпоejecutarseадресуen la direcciónlocalhost:3000
командойcon el comandoyarn start
.ПриAlпереходахnavegarпоentreссылкамenlaces,страницаlaнеpáginaперезагружаетсяno debe recargarse.ИсходныйElкодcódigoрешенияfuenteдолженdeбытьlaвыложенsoluciónсdebeвашегоsubirseаккаунтаaнаtu cuenta de Github conсunReadmearchivoфайломREADME.md
сconинструкциейinstruccionesпоparaзапускуla ejecución.
Tareas opcionales
- Uso de TypeScript.
- Backend para hosting de estáticos y API para encapsular solicitudes externas en Node.js.
- Cobertura del código con pruebas unitarias.
ОпциональныеDesglose задания
de - la
ИспользованиеtareaTypeScriptБэкенд для хостинга статики и API для инкапсуляции внешних запросов на Node.JSПокрытие кода юнит-тестами
Разбор тествого заданияtécnica
ПримерUn решенияejemplo тестовогоde заданияsolución можноde найтиla вtarea папкеtécnica se puede encontrar en la carpeta SolutionExample
. РешениеLa представленноsolución наse основногоpresenta одногоbasada изen решенныхuna тестовыхde заданийlas tareas técnicas resueltas.
РешениеLa состоитsolución изconsta двухde частей.dos Вpartes. первойLa реализованаprimera клиентскаяimplementa частьla вместеparte сdel опицональнымиcliente заданиями.junto Втораяcon состоитlas изtareas сервернойopcionales. части.La Каждаяsegunda частьconsta содержитde свойla parte del servidor. Cada parte contiene su propio README.md
поcon запускуinstrucciones para la ejecución.