This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing.
What I Built
I built Paws & Potjie, a fictional South African comfort kitchen for dogs and their humans.
The experience is built around the warmth of a potjie and the feeling of a long Sunday meal. Instead of making a static restaurant page, I wanted the landing page to feel alive.
The main interaction is the Comfort Compass: choose the human's mood and the dog's current energy, and the site deterministically pairs a human comfort dish with a separate dog-side bowl.
The frontend uses:
- React 19
- TypeScript 7
- Vite 8
- Three.js + React Three Fiber/Drei
- Framer Motion
- Adaptive PWA behaviour
- Offline support
- Reduced-motion, Save-Data and WebGL-aware fallbacks
The 3D potjie hero only loads on capable devices. Lower-resource devices receive a lightweight CSS version instead, so immersion does not come at the expense of usability.
Demo
Live browser demo:
https://stackblitz.com/github/RobynAwesome/paws-and-potjie?startScript=stackblitz
Source code:
https://github.com/RobynAwesome/paws-and-potjie
Journey
I wanted the project to feel distinctly South African rather than like another generic restaurant template.
That led to a visual language built around potjie culture, warm maize yellow, veld green, tomato red, cream surfaces, shared meals and dogs being part of the table rather than an afterthought.
The most important technical decision was making the immersive layer adaptive.
The runtime classifies the experience as lite, balanced, or full. A capable device gets the interactive Three.js potjie scene, while constrained devices, Save-Data users, reduced-motion users, or browsers without WebGL keep the lightweight experience.
I'm especially proud that the 3D is not just decoration. Its rendering budget, motion, DPR and fallback behaviour are governed by the user's device and preferences.
The project was built with AI-assisted engineering under my direction, while the concept, product decisions, constraints and final acceptance remained human-directed.
Built in Cape Town, South Africa 🇿🇦
Top comments (0)