Paws & Potjie — Comfort Food for the Whole Pack 🐾🫕

Kholofelo Robyn Rababalela — Mon, 17 Aug 2026 07:00:11 +0000

This is a submission for the DEV Weekend Challenge: Dog Days Edition.

I built Paws & Potjie, a South African comfort-food experience designed around dogs and their humans sharing the same social ritual — while keeping their food, interaction logic, and needs deliberately separate.🇿🇦🎢💯

Paws & Potjie — A South African Comfort Kitchen for the Whole Pack 🐾🫕

Kholofelo Robyn Rababalela — Mon, 17 Aug 2026 06:50:59 +0000

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 🇿🇦

DEV Community: Kholofelo Robyn Rababalela

Paws & Potjie — Comfort Food for the Whole Pack 🐾🫕

Paws & Potjie — A South African Comfort Kitchen for the Whole Pack 🐾🫕

What I Built

Demo

Journey