Giter Club home page Giter Club logo

front-end-challenge's Introduction

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;

front-end-challenge's People

Contributors

elvishp2006 avatar gvieiraleao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

front-end-challenge's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.