Desafio: Mini Catálogo de Produtos

Você deve criar uma aplicação React que exiba um catálogo de produtos consumidos de uma API externa. O sistema deve ser organizado em componentes e utilizar rotas para estruturar o layout principal.

Entrega

Deve ser entregue o link do repositório na tarefa do Teams. Só serão aceitos comandos que estão no material disponibilizado pelo professor ou utilizados em sala de aula. Caso seja identificado uso de IA, o trabalho será analisado e caso necessário, zerado.

Requisitos

1. Componentização
   • Divida a interface em componentes, prezando pelas boas práticas de quando criar ou não um componente e o uso de props e children.
   • Espera-se que seja criado, no mínimo:
     • um layout principal (contendo cabeçalho, navegação e <Outlet />),
     • uma página inicial (Home) com no mínimo 3 seções de produtos (ex.: Eletrônicos, Roupas, Joias),
     • Cada seção com um banner com o nome da seção e um subtítulo “Produtos em destaque”
     • um card para exibir informações de um produto com no mínimo: título, preço, imagem.
     • Bônus (+1,0 pt): Exibir avaliação com ícone de estrela ao lado utilizando biblioteca de ícones ou emoji.
   • Você pode criar outros componentes conforme achar necessário (ex.: Footer, Navbar, Section).
2. Rotas
   • Usar React Router com Outlet, Children e Link para estruturar um layout principal.
   • Rotas obrigatórias:
     • / → Página inicial, com as 3 seções de produtos.
     • /perfil → Página simples com texto descritivo sobre a página.
     • /carrinho → Página simples com texto descritivo sobre a página.
   • Bônus (+1,0 pt): Criar rota dinâmica /produto/:id para exibir os detalhes de um produto específico.
3. Fetch de API + .env

   • Criar um arquivo .env contendo:

     VITE_API_URL=URL DA API
     

   • Importar a variável de ambiente no componente que será responsável por buscar os produtos.

   • Usar useState e useEffect para armazenar e carregar os produtos.

Será utilizada a API: http://fakestoreapi.com/.

Endpoints úteis:

• Listar todos os produtos: https://fakestoreapi.com/products/
• Listar produtos de uma categoria: https://fakestoreapi.com/products/category/nome-categoria