Awesome
Desafio Frontend Barato Coletivo 2019
Oi! Quer fazer parte do nosso time Barato Coletivo? Se você deseja participar do nosso processo seletivo, siga as instruções desse desafio e nos mande sua resolução em um pull request nesse repositório do Github.
Sobre o Barato
Somos uma empresa a 10 anos no mercado. O maior e-commerce de serviços e oportunidades do nordeste. Nosso grande desafio é continuar crescendo e acompanhando o mercado cada vez mais competitivo.
Nossa stack:
- App: Ionic1, Ionic 4 / React Native
- Site: Laravel / Zend Framework / Code Igniter
- Outras tecnologias utilizadas: Linux / Nodejs / Vuejs / MySQL / Postgresql / Docker / AWS
Vagas disponíveis
- Desenvolvedor Estágio Frontend (Limite para envio do desafio: 29/07/2019)
- Desenvolvedor CLT Frontend (Jr/Pleno) (Limite para envio do desafio: 29/07/2019)
Conhecimentos necessários para Frontend Pleno
Nesse desafio você deve ser capaz de consumir uma API REST e criar um design responsivo e usual para exibir as informações. Também será necessário desenvolver algumas lógicas de busca / filtro e listagens. Esses são os conhecimentos básicos que desejamos que você tenha para fazer parte do time Frontend.
O desafio
Você será responsável por criar a nova tela inicial das nossas ofertas. Para isso, vai consumir uma API rest que retorna uma lista de ofertas e irá desenvolver um frontend legal com a listagem inicial das ofertas, agrupadas por categoria em blocos ou listas. Cada oferta na API possui o campo categoria, mas elas não vem organizadas. Você terá de organizar as ofertas por categoria na lista.
Tela inicial
Agrupe as ofertas por categoria, você precisa exibir um card com pelo menos a Imagem, Titulo, Preço e um botão de Comprar que deve redirecionar para uma outra URL. Faça o possível para agrupar as ofertas por categoria. Fique a vontade para implementar melhorias nessa página (Como sliders, passadores, uma busca, filtros, etc).
Tela de oferta
Ao clicar numa oferta você deve implementar uma nova tela para exibir as informações da oferta, ou seja a página da oferta. Exibir os detalhes e um slide com as imagens. Essa tela deve ter um botão Pagar. Esse botão vai para uma nova tela, a de checkout
Sugestão de melhorias: Slide nas imagens.
Tela de Checkout
Após a tela da oferta, ao clicar em pagar o site deve redirecionar para a página de pagamento. Nessa página deve ser mostrado um resumo do pedido (Oferta que ele comprou) e um formulário de cartão de crédito. Esse formulário não precisa ter ação, apenas marcação dos inputs.
Requisitos do projeto
- Os dados da API devem ser requisitados em tempo real do servidor (Usando axios, fetch ou sua biblioteca de preferëncia)
- Design precisa ser responsivo
- Atentar para criar um design limpo e organizado.
- Você pode usar a Lib de UI que preferir (Bootstrap, Foundation, Material, etc) fique a vontade.
Diferenciais
- Mobile First
- Código limpo, organizado e documentado (quando necessário)
- Carrinho de compras (Poder ir para a tela de pagamento com mais de uma oferta)
- Em conformidade com o padrão PWA
Métodos da API
| Método | URL GET |
|---|---|
| Listar ofertas | https://playground.barato.com.br/desafio-front/api/offers |
| Listar oferta | https://playground.barato.com.br/desafio-front/api/offer/{id} |
Parâmetros da API
| Parâmetro | Valor |
|---|---|
| {id} | ID da oferta (Obtido pelo campo id no método de Listar ofertas |
MOCKUP DAS TELAS
Veja o mockup e use como base para as telas. Lembre-se: O design precisa ser responsivo.
| Tela inicial | Tela da oferta | Tela de pagamento |
|---|---|---|
 |  |  |
Como nos enviar a resolução
Adicione um Pull request com sua solução para o problema ou compacte um ZIP do seu código e envie para:
joaoneto[a]baratocoletivo.com.br
Não esqueça de criar um README com instruções de como fazer seu código funcionar.
Você também pode enviar um link público da solução para meu email (Seja Heroku, GCloud, Aws ou o provedor de sua preferência, desde que o código fonte não esteja criptografado) (Codepen também vale)