From Figma to Live Product

I was curious what it would feel like to come back to coding, how much I'd actually understand, and whether the design engineer role I was chasing was real for me or just aspirational. That curiosity is what started this project.

The problem itself came from somewhere ordinary: anyone living in a tier-1 city, working full-time, no time to cook, and even thinking about what to make becomes its own small tax on the day. I'd been collecting recipes the way most people do now, screenshots, saved tweets, half-written notes scattered across apps with no home.

This solves the "what do I even cook" problem for anyone who needs it. For me, it's also something quieter: a place collecting memories, recipes handed down, dictated in a hurry, half-remembered from someone's kitchen.

A fully functional recipe book, live database, search and category filters, animated interactions, a paper-textured modal, designed and built solo in two weeks on Next.js, TypeScript, Tailwind, and Supabase.

Design thinking transfers straight into engineering decisions. Which fields belong in the database, where logic should live, what a modal should feel like opening, these are design questions. They just happen to require code to answer them.

The fidelity gap between a Figma file and a working product closes a little with every build. This one closed it a lot.

1. AI isn't good at the bare bones. It can accelerate you, but it can't build the foundation for you.
2. A small movement in Figma is often 40 lines of code in disguise.
3. Vibe coding isn't enough. You need to understand what's actually happening under the hood.
4. Learn the bare bone logic and concepts first. The rest builds on that.
5. Writing React taught me things reading about React never could.
6. It's not that easy. And that's exactly why it was worth doing.