Você deverá criar um projeto ReactJS, usando o Vite, estruturado em componentes. Você deve usar o script abaixo para implementar a base de dados de produtos, bem como a função que busca os produtos por preço:
https://gist.github.com/acenelio/fa7d03cb660b35cd9986623f1f07aeb3
O corpo da tela deve ser um componente (na imagem abaixo: ListingBody) que possui dois filhos: o card de filtro, e o card de listagem. Você DEVE implementar um evento para fazer o componente de filtro notificar os parâmetros de filtragem dos produtos:
No cabeçalho DEVE aparecer o número de produtos listados. Esse número DEVE observar e reagir às mudanças na listagem. Para isto, mantenha um estado global utilizando a Context API.
Checklist:
- O projeto deve conter os componentes principais (pode haver outros conforme você quiser):
- Cabeçalho
- Corpo da tela de listagem
- Card de filtro
- Card de listagem
- A lista de produtos deve ser passada como Prop para o card de listagem.
- O card de filtro deve emitir um evento onFilter(min, max). Este evento serve para comunicar os preços mínimo e máximo sempre que o formulário for submetido.
- Context API utilizada para manter o estado global do número de produtos mostrados na tela. Sempre que for feita uma nova filtragem e o número de produtos listados mudar, o número deve ser atualizado no cabeçalho.
Criar conforme design Figma abaixo:
Me envie uma mensagem no WhatsApp
Este projeto foi desenvolvido durante o curso Formação Desenvolvedor Moderno da escola DevSuperior, sobe orientação do tutor Nelio Alves.