A social cooking app that turns everyday cooking into play
Instead of just following recipes, you step into your own Kitchen World to cook, earn coins, and fill your collection. Every screen was designed in Figma and rebuilt for the web.
PAN PLAY treats cooking as something you play with every day, not a task to study. The more you cook, the more your character grows, your coins add up, and your collection fills in. It's a social cooking app built on game mechanics.
There are plenty of recipe apps, but most are tools you search once and close. Add achievement, collecting, and other people to cooking, and it turns into a place you want to reopen every day.
Beginners, home cooks, and people cooking for one. It's for anyone who wants to cook well but finds no fun or feedback doing it alone.
A PWA that opens with no install. It runs as a real service with Google sign-in and live Firebase data.
I designed the colors, icons, components, and all five tab screens in Figma, then translated that design into web code.
Three systems that turn a plain cooking log into a game. Each one feeds the next and gives you a reason to come back.
Your own kitchen to step into and play. It's where your character lives and friends drop in, and where every cook starts.
Enter · Character · Live presenceYou earn coins as you cook and join classes. Spend them in the shop on skins and items to dress up your character.
Earn · Shop · CustomizeEvery dish you make is logged in your collection. Filling out all 40 and earning badges keeps you cooking.
40 dishes · BadgesThree people with different skills and goals. Their needs and sticking points set the direction for every screen.
Simple, foolproof recipes, and something to answer "what do I cook tonight" for him.
Delivery and convenience-store food every day. Cooking never lasts more than a few days.
To record her baking and get reactions from people who share the hobby.
Working alone, she gets no feedback and loses interest fast.
To run classes with his own recipes and sell recipe books.
His content is scattered across a blog and group chats, so managing it and getting paid is a hassle.
Five screens, from Home through Library, Classes, Collection, and My Kitchen. Each tab is shown as a mockup redrawn in pure CSS.
Open the app and your character's Kitchen World greets you. Your coin balance, today's classes, and one tap on "Enter" get the cooking started.
A recipe archive you scan by category and pick by rating. Free and coin-priced recipes sit side by side, and the My Recipes tab lets you build your own recipe book to share or sell.
Cooking Rooms where you cook together, and Talking Rooms where you just chat. Live and scheduled rooms are listed with head counts, and anyone can open one.
Every dish you make gets logged. A progress bar toward 40 slots and the question marks on locked ones pull you to the next dish, with a target badge as the reward.
A profile that gathers your character, level, and coin balance. Spend saved coins in the shop on skins and items to customize your character.
Seven color variables, 25 icons, and a type scale. The icons below aren't images. They're rendered straight from the real SVG paths in the Figma file.
After sign-in, the flow branches three ways from Home. Whichever path you take, coins and your collection lead back to Home.
This isn't a mockup. It's the running app. The frame on the right embeds PAN PLAY as-is.
A working service with Google sign-in and Firestore data. You can browse it as a guest too.