Streetwear showcase ยท Front-end
Fates
A streetwear showcase for the fictional Fates brand, with a catalog, simulated orders, and a mini-game about its origins.
Challenge
Present products and simulate an order flow without coupling the interface to the API response shape.
My approach
I separated the front-end into layers, injected use cases into Server Components, and built a demo mode using the same API contracts.
The showcase runs in demo mode using the same use-case contracts as the API integration, so visitors can explore the catalog, product, cart, and simulated checkout without a backend. Mock orders are not persisted and there is no payment.
The About page tells the fictional brand's origin as an interactive story. The ollie and first sticker placement change scenes and dialogue; a text alternative is available outside the canvas.
Separating domain, application, infrastructure, and presentation makes rules testable without rendering the UI. Vitest covers units and integration; Cypress covers browser flows.
A mini-game tells the brand's origin
The fictional Fates brand begins at a skate spot in Aracaju. Visitors try an ollie, move through a pixel-art scene, and choose where to place its first sticker. Dialogue and ending change with those choices; touch controls, audio, and a text version are available.
Play the mini-game