Staj
Overview
Staj is a portfolio platform where chefs document their work and share public project pages with clients. I was the only designer and engineer, and I took it from early Figma concepts to a working React and Supabase app. This case study covers the dish view, because most of a chef’s archive’s value to clients comes from how easily they can explore individual dishes.
- Duration
- Sep to Oct 2026
- My Role
- Product designer and builder
- Team
- Just me
- Tools
- Figma, React, Supabase, Gemini, Claude Code, Playwright
A Body Of Work Stuck In A Camera Roll
Staj originated as a tool built for a chef friend to document their culinary creations, eventually evolving into a platform for chefs to share public portfolios with friends, family, other chefs, and even clients.
Chefs document their dishes in their camera roll and share them through texts and social feeds. There’s no single place to keep a body of work, or to show it to clients.
“I want to show coworkers, friends, family, and even potential clients what I’ve been making. The easiest way for me to do that is probably through my phone, since I haven’t even opened my laptop up in a couple months.”
A Home For Every Dish
Staj gives chefs one place to log what they cook, keep it as a growing archive, and share it with clients through a public page. Each dish keeps its photo and story together, so a chef’s body of work is always ready to show.
Key Flows
The chef adds a photo and a line of notes, and AI fills in the recipe card: the details, a summary and tags they can edit before saving it to the gallery.
The chef pulls the sheet open for the recipe. Pulling further turns the photo into a thumbnail beside the name.
A swipe brings the next photo in under the chef’s finger while the text softens. A swipe that stops short of a third of the way settles back.
On their own dishes, a chef taps Edit beside Share to reopen the recipe card, pre-filled.
A chef’s public page uses the same sheet and swipe. Its header follows the sheet’s rules: as the page scrolls, the chef’s picture and name travel into a bar at the top, the way the dish name collapses.
Building Staj’s Design System
I wanted the dishes to speak for themselves. A chef’s plate is already the most beautiful thing on the screen, so I built the design system to stay out of its way. I chose a quiet palette of cool grey, beige and off-black, with brighter colors saved for small moments. I dropped illustration and let photography do the work.
Where Chefs And Clients Get Stuck
These are the pain points across the journey, before Staj existed.
Viewing a dish is the focus of this case study; finding dishes and following up are assumptions still to test.
Opening A Dish
A Recipe Card In A Box
Initially, dish details were displayed in a modal-based, two-panel card, which forced users into a high-friction navigation flow. Redesigning this pattern removed the constant context-switching and created a seamless browsing experience.
To see the next dish, you closed the modal, found the next card in the gallery and opened it.
The sheet stays open: swipe and the next dish comes in under your finger.
Chefs Couldn’t Browse A Body Of Work
A chef shows their range by moving through dishes, not by opening one. The early versions got in the way three times:
One dish at a time
To see the next dish you closed the modal and found the next card.
The card cut itself off
When the sheet arrived in Sep 2026, the card peeking up under the photo showed the description, cut off mid-sentence.
The background went milky
A 55% wash of the page color and a 20px blur sat over the gallery and washed out the food.
How might we make browsing dishes feel effortless for chefs and the clients they share them with?
Each Rebuild Answered A Problem
The dish view was rebuilt three times, each time to fix what the last version got in the way of.
Step Between Dishes
Reaching the next dish no longer means closing the modal: you step by arrow, swipe or key, and the name cross-dissolves in place.
Pull-Up Sheet
The view becomes a pull-up sheet with three rests, and the swipe follows your finger, so browsing feels attached to your hand.
Photo Flight
The photo flies from its card into the sheet and back home, so it’s always clear which dish you opened.
Reflection
Designing across the stack
Staj was my first project where I designed for both the front end and the back end. I followed the data a chef enters from input, to storage, to display, and saw firsthand how the same dish has to work for the chef who made it and for the client viewing it.
Building fast, iterating faster
This was the fastest I’ve ever designed. Using LLMs, I could prototype tools I couldn’t have built before. That speed let me try more formats and experiments, keeping the ones that best matched how chefs think.