├── .gitignore └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependency directories 2 | node_modules/ 3 | 4 | # Next.js build output 5 | .next 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Desafio - Front-end Developer 2 | Este desafio tem como objetivo te avaliar como desenvolvedor Front-end: JavaScript, HTML, CSS e lógica de programação. 3 | 4 | ## O Desafio 5 | 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: 6 | 7 | - Página inicial: Listará as últimas postagens do blog com a categoria **Desenvolvimento**; 8 | - Interna: Exibirá o conteúdo da postagem; 9 | 10 | 11 | ## Requesitos 12 | - Utilizar os dados da API do nosso blog: https://blog.apiki.com/wp-json/wp/v2/; 13 | 14 | ## Diferencial 15 | - Utilizar alguma metodologia para a organização de seu CSS (BEMCSS, OOCSS, SMACSS... o que preferir :D); 16 | - Escolha uma lib para criação de interfaces de usuário (React ou Angular); 17 | 18 | ### Página inicial 19 | 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: 20 | 21 | - Imagem destacada: Você encontrará um atributo chamado `_embedded`, dentro deste atributo você encontrará o `wp:featuredmedia`; 22 | - Título; 23 | - Link para a postagem: O link deverá conter o atributo `slug`; 24 | 25 | 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. 26 | 27 | ### Interna 28 | 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: 29 | 30 | - Imagem destacada; 31 | - Título; 32 | - Conteúdo; 33 | 34 | 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. 35 | 36 | ## Critérios de avaliação 37 | 38 | - Organização do código; 39 | - Responsividade; 40 | - Reaproveitamento de código; 41 | - SEO; 42 | 43 | ## Como submeter seu projeto 44 | 45 | 1. Efetue o fork deste repositório e crie um branch com o seu nome e sobrenome. (exemplo: fulano-dasilva); 46 | 1. Após finalizar o desafio, crie um Pull Request; 47 | 1. Aguarde algum contribuidor realizar o code review; 48 | --------------------------------------------------------------------------------