/front-end-challenge

Desafio para candidatos a front-end.

Desafio - Front-end Developer

Este desafio tem como objetivo te avaliar como desenvolvedor Front-end: JavaScript, HTML, CSS e lógica de programação.

O Desafio

Queremos montar uma versão do blog da Apiki apenas para Devs, e queremos que essa seja uma solução headless, esta nova versão terá as seguintes páginas:

  • Página inicial: Listará as últimas postagens do blog com a categoria Desenvolvimento;
  • Interna: Exibirá o conteúdo da postagem;

Requesitos

Diferencial

  • Utilizar alguma metodologia para a organização de seu CSS (BEMCSS, OOCSS, SMACSS... o que preferir :D);
  • Escolha uma lib para criação de interfaces de usuário (React ou Angular);

Página inicial

Para montar esta página você precisará consumir do seguinte endpoint: https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518, ele já te retornará as últimas 10 postagens cadastradas, cada item do array deve representar uma card contendo:

  • Imagem destacada: Você encontrará um atributo chamado _embedded, dentro deste atributo você encontrará o wp:featuredmedia;
  • Título;
  • Link para a postagem: O link deverá conter o atributo slug;

Ao final da listagem deve haver um botão nomeado Carregar mais..., Quando o usuário clicar neste botão você deverá fazer uma nova requisição para o mesmo endpoint informando o parâmetro page, este parâmetro deve receber o número da próxima página, exemplo: https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518&page=2. Você deve estar se perguntando, "como sei se haverá uma próxima página?", isso é simples, no Header de resposta desta requisição virá 2 atributos necessários para essa façanha X-WP-Total que diz a quantidade total de postagens que essa categoria possui, e o parâmetro X-WP-TotalPages que te informará qual o total de páginas de postagens que essa categoria possui.

Interna

Para montar esta página você precisará consumir do seguinte endpoint: https://blog.apiki.com/wp-json/wp/v2/posts?_embed&slug=wordpress-escolha-site-pequenas-empresas, lembre-se de substituir o slug dado como exemplo pelo slug definido no Link para a postagem da Página inicial, o layout deve conter os seguintes elementos:

  • Imagem destacada;
  • Título;
  • Conteúdo;

Seja criativo, construa um layout pensando no usuário final, e sinta-se a vontade para incrementar o layout com outros atributos disponíveis no JSON retornado.

Critérios de avaliação

  • Organização do código;
  • Responsividade;
  • Reaproveitamento de código;
  • SEO;

Como submeter seu projeto

  1. Efetue o fork deste repositório e crie um branch com o seu nome e sobrenome. (exemplo: fulano-dasilva);
  2. Após finalizar o desafio, crie um Pull Request;
  3. Aguarde algum contribuidor realizar o code review;