Frontend Development · Interactive Demo
Altura 1200
Specialty Coffee
An interactive specialty coffee demo that turns a supplied interface design into eight responsive screens, reusable components and local shopping experiences.
Role
Frontend Development
Type
Interactive Demo
Stack
React · TypeScript · Vite · Tailwind CSS · React Router
Status
Local demo with simulated data
01 — The Challenge
From a visual reference to a working experience.
The starting point was eight mobile screenshots of a designer's Figma proposal. Development translated that reference into navigable screens, typed data and reusable components, defining local interactions and a desktop adaptation along the way. The result reinterprets the supplied design rather than reproducing it pixel by pixel.
02 — The Solution
What the project does.
Browse and build an order
Search the coffee catalog, filter origins, save favorites and manage cart quantities, with calculated totals and a sample discount coupon.
Explore experiences and community
Try simulated experience bookings, local posts, likes and comments, activity filters and a conversation with predefined coffee recommendations.
Eight connected screens
Store, experiences, order, dashboard, community, activity, advice and registration are connected through responsive navigation for mobile, tablet and desktop.
03 — Technical Approach
Reusable interfaces. Typed state. Local interactions.
React and React Router connect the screens, while TypeScript models products and shared state. Cart calculations are separated from presentation, with amounts stored in cents. Tailwind CSS and shared styles support the responsive layout; local SVG illustrations and native CSS motion complete the visual system. Unit tests cover amounts and discounts, with Playwright flows for browser interactions.
04 — Next Steps
Current scope and next steps.
This is a frontend demo without a backend or real payments, accounts, deliveries or bookings. State is held in memory and resets on reload; some interactions also reset when leaving their screen. Next steps include reviewing visual differences with the designer, obtaining final assets and confirming responsive behavior. No public deployment is documented.
Explore the GitHub repository ↗