Olá, bem vindo ao testes de Frontend da Pneufree, RS Pneus e Pneuzão.

O que é este projeto?

Este projeto é um teste de frontend para as empresas Pneufree, RS Pneus e Pneuzão. O objetivo é criar um componente de filtro de pneus, que deve ser responsivo e funcionar em dispositivos móveis.

Começando

Primeiro, você deve dar um fork neste repositório e clonar o seu fork para a sua máquina.

Esse projeto usa Next.js, então você deve ter o Node.js instalado na sua máquina.

Depois de clonar o repositório, você deve instalar as dependências do projeto. Para isso, você pode usar o npm.

npm install

Depois de instalar as dependências, você pode rodar o projeto com o comando:

npm run dev

Abra http://localhost:3000 no seu navegador para ver o resultado.

O que deve ser feito?

Você deve criar um componente de filtro de pneus. O componente tem um campo de busca, onde o usuário pode digitar o nome de um pneu e o componente deve filtrar os pneus que contém o texto digitado no nome.

• O componente deve ser responsivo e funcionar em dispositivos móveis, image abaixo de como deve ser a aparência do componente (para cada resultado).
• Foi feito uma rota imitando uma pequena API que retorna uma lista de pneus.
• Foram escritos 6 testes para o componente, você deve fazer o componente passar em todos os testes.

Resultado esperado:

O que será avaliado?

• Organização do código
• Qualidade do código
• Responsividade
• Funcionamento do componente
• Resultado mais próximo da imagem acima
• Testes

Não modifique o arquivo de testes (products.test.tsx) e o arquivo da api (api/products/route.ts)

Instruções gerais

• O componente Products.tsx é onde os resultados devem serem mostrados.
• Substitua <div>Produtos aqui</div> por um componente que mostre os resultados. Esse componente deve ter o seguinta atributo: data-testid="products
• Você precisa implementar a busca da api que está em /api/products e o filtro dos pneus.
• Você pode usar qualquer biblioteca que desejar. Mas lembre-se de justificar a escolha da biblioteca.
• Tente utilizar tailwindcss para estilizar o componente de resultados.
• Caso não haja resultados, mostre uma mensagem de "Nenhum produto encontrado".

Instruções para rodar os testes

Para rodar os testes, você pode usar o comando:

npm run test

Boa sorte! 🚀