Vitrine streetwear · Front-end
Fates
Vitrine de streetwear da marca fictícia Fates, com catálogo, pedidos simulados e um minijogo que conta sua origem.
Desafio
Apresentar produtos e simular o fluxo de pedido sem acoplar a interface ao formato da API.
Como resolvi
Organizei o front-end em camadas, injetei os casos de uso em Server Components e criei um modo demo com os mesmos contratos da API.
A vitrine funciona em modo demo com os mesmos contratos dos casos de uso usados pela integração com a API: é possível percorrer catálogo, produto, carrinho e checkout simulado sem backend. Os pedidos do mock não são persistidos e não existe pagamento.
A página Sobre conta a origem fictícia da marca em uma história interativa. O ollie e a escolha do primeiro adesivo alteram cenas e falas; há alternativa em texto para quem não usa o canvas.
A separação entre domínio, aplicação, infraestrutura e apresentação ajuda a testar regras sem renderizar a interface. Vitest cobre unidades e integrações; Cypress percorre os fluxos no navegador.
Um minijogo conta a origem da marca
A origem fictícia da Fates começa numa pista em Aracaju. O visitante tenta um ollie, atravessa um cenário em pixel art e escolhe onde colar o primeiro adesivo da marca. Falas e desfecho respondem às escolhas; há controles de toque, áudio e versão em texto.
Jogar o minijogo