Header

joaomarr · Jun 25, 2022 · e5cc714 · e5cc714
commit e5cc714
Show file tree

Hide file tree

Showing 24 changed files with 3,855 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+# Dependency directories
+node_modules/
+
+# Next.js build output
+.next
diff --git a/README.md b/README.md
@@ -0,0 +1,47 @@
+# 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
+- Utilizar os dados da API do nosso blog: https://blog.apiki.com/wp-json/wp/v2/;
+
+## 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);
+1. Após finalizar o desafio, crie um Pull Request;
+1. Aguarde algum contribuidor realizar o code review;
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>