Loja Virtual de Moda

Tecnologias

• React
• TypeScript
• Tailwind CSS
• Radix UI

Contexto

A loja Maison é um protótipo com identidade editorial. Em 19/10/2026 uma auditoria encontrou problemas reais no site publicado, que foram corrigidos e agora são verificados automaticamente.

Decisões

1. 01Rotas diretas retornavam 404

   Abrir ou recarregar /catalogo, /produto/1 ou /carrinho dava 404 na Vercel, porque faltava a regra que devolve o index.html em aplicações de página única. Adicionei um vercel.json com o rewrite.

2. 02Fonte e imagens atrasavam a primeira exibição

   A fonte do Google era importada de forma bloqueante e as imagens do Unsplash vinham em JPEG de 1080 px em todo lugar. Passei a carregar a fonte de forma assíncrona e a gerar srcset em WebP, com tamanhos adequados a cada uso.

3. 03Controles que não faziam nada

   Removi uma busca sem função e ícones de redes sociais com link vazio, e o formulário da newsletter passou a avisar que a inscrição é simulada.

4. 04Acessibilidade e tipagem

   Nomes acessíveis nos controles, contraste corrigido, alvos de toque de 44 px, um único h1 por página e um tsconfig com script de typecheck, que acusou um erro real de importação.

Resultados

Lighthouse mobile, página inicial (antes → depois)

71 / 99 / 100 / 92 → 92 / 100 / 100 / 100

Lighthouse mobile, catálogo (antes → depois)

68 / 98 / 100 / 92 → 94 / 100 / 100 / 100

Testes e2e (acessibilidade, layout e fluxos)

32

Vulnerabilidades em produção (npm audit)

0

Lighthouse: desempenho / acessibilidade / boas práticas / SEO, em modo mobile, medidos localmente em 19/10/2026.

O que ainda falta

• As fotos continuam hospedadas no Unsplash, uma dependência externa.
• Produtos, conta e pedidos são fictícios.