Tecnologias

• React.js
• json-server
• Tailwind CSS
• Yarn

Pré-requisitos

Node.js >= 18.3

Como rodar

git clone https://github.com/johnn1sbo3s/RD.git
./install.sh   # instala dependências
yarn dev       # sobe front e back

Frontend: localhost:3000

Backend: localhost:3001

Scripts disponíveis

• yarn start - inicia a aplicação React em modo de desenvolvimento
• yarn dev - sobe frontend e backend simultaneamente
• yarn start:frontend - inicia apenas o frontend
• yarn start:backend - inicia apenas o backend

Sistema de recomendação

1. O usuário seleciona as preferências, funcionalidades e o tipo de recomendação
2. Cada produto recebe um score, que soma quantas preferências selecionadas batem com as do produto e quantas funcionalidades selecionadas batem com as dele
3. Produtos com score 0 são descartados

SingleProduct: retorna o produto com maior score, e em caso de empate, retorna o último da lista. MultipleProducts: retorna todos os produtos com score > 0, na ordem original do catálogo. Nenhum match: retorna array vazio.

O score é simples de propósito, onde cada match vale 1 e não usei pesos. Fiz assim pra deixar a lógica transparente e fácil de testar. Caso no futuro precise de pesos diferentes pra preferências vs. funcionalidades, basta ajustar o método getProductScore.

Decisões de design

Optei por redesenhar a tela, pra tornar a navegação mais simples e agradável.

Defini três estados visuais para a geração das recomendações:

1. Inicial: "Ainda não há uma recomendação"
2. Loading: skeleton (800ms com setTimeout pra simular uma chamada de API)
3. Resultado vazio: "Nenhum produto encontrado"

Testes

cd frontend && yarn test

Os testes cobrem os principais casos da lógica de recomendação e da integração do formulário.

Autor

Desenvolvido por João Paulo Castro