PixelStore – Atividade Prática: Integração com API

Contextualização

Você foi contratado como Desenvolvedor Front-End de uma loja virtual de tecnologia chamada PixelStore.
O time de Design já entregou toda a estrutura HTML e o CSS da loja. Os dados ainda estão estáticos (mockados).

Sua missão é integrar o site a uma API RESTful pública para que os produtos, preços e categorias
sejam exibidos de forma dinâmica e real.

---

API

Base URL: https://dummyjson.com/products
Documentação: https://dummyjson.com/docs/products

Endpoints que você vai usar

Método	Endpoint	Descrição
GET	/products?limit=0	Retorna todos os produtos
GET	/products/{id}	Retorna um produto pelo ID
GET	/products/category/{category}	Retorna produtos de uma categoria

Estrutura de um produto

{
  "id": 1,
  "title": "Essence Mascara Lash Princess",
  "description": "The Essence Mascara...",
  "price": 9.99,
  "discountPercentage": 7.17,
  "rating": 4.94,
  "stock": 5,
  "category": "beauty",
  "thumbnail": "https://cdn.dummyjson.com/..."
}

⚠️ Atenção: os preços estão em dólar (USD). Converta para Real usando a taxa 1 USD = 5.70 BRL.

---

Estrutura do Projeto

pixelstore/
├── index.html      → Página inicial (Home)
├── catalogo.html   → Catálogo completo por categoria
├── produto.html    → Detalhes de um produto
├── style.css       → Estilos (não mexa aqui)
└── app.js          → ← Você vai trabalhar aqui

---

Desafios

🏠 Página Inicial (index.html) — função carregarDestaques()

Busque todos os produtos da API, ordene do menor para o maior preço e exiba os 6 primeiros
como cards no grid #destaques-grid.

---

📋 Catálogo (catalogo.html) — função carregarCatalogo()

Busque todos os produtos e agrupe-os por categoria. Para cada categoria, monte um bloco com:

• Título dinâmico com o nome da categoria e a quantidade de itens — ex: Smartphones – 5 itens
• Select (<select>) para reordenar os produtos por preço (menor → maior / maior → menor)
  • O select deve reagir ao evento change e reordenar os cards sem nova requisição à API
• Grid de cards dos produtos daquela categoria

Insira todos os blocos dentro de #catalogo-wrapper.

---

🔍 Detalhe do Produto (produto.html) — função carregarDetalhe()

1. Leia o ?id= da URL usando URLSearchParams
2. Busque o produto pelo ID na API
3. Renderize no #detalhe-produto:
   • Imagem (thumbnail), categoria (badge), título, rating com estrelas, preço, descrição, estoque e desconto
4. Busque outros produtos da mesma categoria
5. Filtre até 3 produtos diferentes do atual (com id diferente)
6. Renderize os cards em #relacionados-grid
7. Se não houver relacionados, oculte a seção #relacionados-sec

---

Funções que você deve implementar no app.js

O arquivo já contém a assinatura e a documentação de cada função. Implemente:

Função	Página	Descrição
formatarPreco(valorUSD)	todas	Converte USD → BRL formatado
getIdDaURL()	produto.html	Lê o ?id= da URL
gerarCardHTML(produto)	todas	Gera o HTML de um card
carregarDestaques()	index.html	6 mais baratos ordenados
carregarCatalogo()	catalogo.html	Produtos agrupados por categoria
carregarDetalhe()	produto.html	Detalhes + produtos relacionados

---

Critérios de Avaliação

Critério	Descrição
✅ Fetch API	Consumo correto dos endpoints com fetch e async/await
✅ Ordenação	Lógica correta de ordenação de arrays por preço
✅ Agrupamento	Agrupamento dos produtos por categoria no catálogo
✅ DOM dinâmico	Geração de HTML e inserção correta nos elementos-alvo
✅ Evento change	Select funcionando e reordenando sem nova requisição
✅ Relacionados	Filtragem correta de até 3 produtos da mesma categoria
✅ Formatação	Preços convertidos e formatados em BRL
✅ ES6+	Uso de arrow functions, template strings, destructuring
✅ Organização	Código indentado, funções separadas, sem lógica no HTML

---

Dicas Técnicas

// Buscar todos os produtos
const res = await fetch('https://dummyjson.com/products?limit=0');
const data = await res.json();
const produtos = data.products;

// Ordenar por preço (menor → maior)
produtos.sort((a, b) => a.price - b.price);

// Agrupar por categoria
const grupos = produtos.reduce((acc, produto) => {
  if (!acc[produto.category]) acc[produto.category] = [];
  acc[produto.category].push(produto);
  return acc;
}, {});

// Ler ?id= da URL
const params = new URLSearchParams(window.location.search);
const id = params.get('id');

// Formatar preço
const emReais = valorUSD * 5.70;
emReais.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });

---

Entrega

• Arquivo app.js implementado, indentado e com comentários explicando sua lógica
• As três páginas devem funcionar corretamente no navegador
• Não altere o style.css nem a estrutura do HTML