LUTO
A recipe book built because the App Store couldn't give me one that fit how I actually cook.
PERSONAL PROJECT
PRODUCT DESIGN + ENGINEERING
Role
Designer & Developer (solo build)
Timeline
1 day
team
Just me
platform
React, Vite, and Tailwind CSS, deployed on Vercel
The Brief
Cooking is one of my biggest hobbies. I love cooking for the people I love, but most of the time, the first attempt at a dish is also the best version of it, and I could never quite recreate that exact taste again. I wanted a way to lock in a recipe the moment I got it right, not just the ingredients, but the exact method, so I could stay consistent every time after that.
I looked for a recipe app built around that specific need and couldn't find one in the App Store that fit. So I built my own.
The UX Process
The main design constraint wasn't really visual, it was context. This app gets used propped on an iPad on the kitchen counter while I'm actively cooking, often with messy hands, so every decision had to work for that moment, not just for browsing on a couch.
The recipe grid is color-coded by category, Mains, Baking, Sides, Desserts, Breakfast, Soups & Stews, each with its own accent color and a scalloped border, so recipes are easy to tell apart at a glance without reading every label.
The recipe form captures everything I'd need to actually rebuild a dish exactly: prep time, cook time, servings, difficulty, ingredients with quantity and unit, numbered method steps, and an optional notes field for tips, substitutions, and storage, so nothing about how I got it right gets lost between attempts.
Clicking into a recipe first opens a quick-preview modal, total time, servings, difficulty, and the first few ingredients, before committing to the full page. That kept browsing fast without hiding the option to go deeper.
The full recipe view is built for cooking, not reading: ingredients are checkboxes that strike through as I add them, and a servings adjuster scales quantities up or down automatically so I'm not doing that math mid-recipe.
For the visual system, I paired Fraunces, a warm serif, for headings and display type with Karla for body text, and used lucide-react for icons, built on a React, Vite, and Tailwind CSS stack that let me move fast in the single day I gave myself. I also gave it a real identity rather than a generic app look, named Lutõ, Filipino for "to cook," with the tagline "Gawa ng pagmamahal," made with love.
What I Had to Work With
One day again, self-imposed, same as Job Logger.
Solo, designing and building at the same time.
No existing product to reference. Since nothing in the App Store fit, I had to define the right feature set myself instead of adapting something that already existed.
A very specific usage context, an iPad on a counter, hands often busy or messy, which shaped almost every interaction decision, from checkbox ingredients to the servings adjuster.
To move fast in one day, everything currently lives in a single file, App.jsx holding the components, seed data, and styles together, a deliberate shortcut rather than a finished architecture.
What Changed
What exists now is a live, working prototype at luto-nine.vercel.app that proves out the actual interface end to end: the color-coded categories, the quick-preview modal, the checkable ingredients, the servings adjuster, all functioning as designed. Recipe data is currently seeded rather than saved, it resets on refresh, so this is a validated interface waiting on persistence, not yet my permanent recipe archive.
What I'd Do Differently
The most immediate gap is persistence. There's no backend yet, so recipe data doesn't survive a refresh, even wiring up something as simple as localStorage would be enough for a personal tool like this. I'd also split the single App.jsx file into proper components, data, and lib folders now that the interface itself is proven out, since everything currently lives in one file.
What I Learned
A couple of options:
Building for one very specific moment, standing at the counter with messy hands, mid-recipe, forces different decisions than building for browsing. Big tap targets, checkable ingredients, and a servings adjuster mattered more here than anything purely visual.
Prototyping the whole interface first, before worrying about persistence or architecture, let me validate the actual UX in a single day. The scaffolding can be productionized later, but getting the interaction design right came first.