Olá, seja bem vindo candidato! Este teste tem o intuito de avaliar o básico de suas habilidades com a biblioteca React. O teste consiste em duas partes:
- A primeira você, candidato, irá desenvolver uma plataforma bem simples, o AiFoodi, no caso, este projeto.
- Uma integração de uma api, que iremos providênciar para você conectar com o frontend.
Bom iremos descrever como vai funcionar este teste em específico, ok? Teremos 3 telas, uma tela de listagem de produtos, uma tela de detalhes do produto, e uma tela de carrinho. Cada tela tem a seguinte funcionalidade
- Tela 1, será uma listagem de produtos, que tem como fonte de dados um arquivo JSON.
- Tela 2, será uma tela de detalhes do produto. Como que eu chego nessa tela? Clicando em um dos itens da listagem na Tela 1.
- Tela 3, será uma listagem de produtos adicionados no seu carrinho. Como que eu chego nessa tela? Clicando no ícone de carrinho no canto superior direito.
- Listagem dos produtos mockados no arquivo JSON.
- Cada produto deve ser um card conforme o protótipo.
- Ao ser clicado, o usuário deverá ser redirecionado para a Tela 2.
- Listagem de detalhes do produto selecionado através da Tela 1.
- Deverá conter todos os dados do item selecionado no JSON, também conforme o protótipo.
- Deverá conter um botão de adicionar ao carrinho, onde o item selecionado deverá ser incluso em uma lista separada.
- Listagem de produtos na lista do carrinho.
- Cada produto deve ser um card conforme o protótipo
- Cada card deverá conter a quantidade de produtos adicionados + o preço unitário.
- Deverá apresentar a soma dos preços, conforme o protótipo.
Este teste tem dois objetivos a ser cumpridos, um obrigatório e outro opcional:
- O primeiro objetivo: Montar o layout da Tela 1, Tela 2 e Tela 3, tendo apenas como funcionalidade, o redirecionamentos entre elas.
Obrigatório - O segundo objetivo: Adicionar as funcionalidades especificadas de cada tela
Opcional
Este teste tem algumas regras técnicas a serem cumpridas, você candidato é Obrigado a seguir:
- React (create-react-app ou nextjs)
- Componentes funcionais por favor
- CSS puro, styled-components, ou outra biblioteca
css-in-js, não utilizar preprocessadores de css (scss, less, ...) - Git
Liberado o uso de outras bibliotecas que não quebrem as regras citadas a cima. Resumindo, React funcional, CSS ou styled-components e Git :D
Link para o protótipo
Alguns objetivos bônus caso se sinta confortável.
- Utilizar os hooks do react
- Alguma biblioteca de animação no React, ou com @keyframes no css
- Nomeclatura em inglês
- Git flow, branches, commits padronizados da sua forma
Boa sorte!!