Spoon & Fork
Shipped Product
AI-Assisted Workflow
Figma
Spoon & Fork
Spoon & Fork
Shipped Product
AI-Assisted Workflow
Figma
i built a meal planner, by a college student, for college students.
my goal for this project wasn't to build a revolutionary design. it was to learn how to build by myself — to identify a problem space and create a product that filled the gap.
Don't just read this page: try it yourself here!
Timeline: June-August 2026
Tools: Figma, Claude, HTML, CSS, Vercel, Supabase, Github
i built a meal planner, by a college student, for college students.
my goal for this project wasn't to build a revolutionary design. it was to learn how to build by myself — to identify a problem space and create a product that filled the gap.
Don't just read this page: try it yourself here!
Timeline: June-August 2026
Tools: Figma, Claude, HTML, CSS, Vercel, Supabase, Github
key features
key features
plan meals ahead of time by dragging-and-dropping meal cards onto a calendar
search what recipes use the ingredients in your kitchen, allowing you to waste less food
add and edit your favorite recipes whenever needed
plan meals ahead of time by dragging-and-dropping meal cards onto a calendar
search what recipes use the ingredients in your kitchen, allowing you to waste less food
add and edit your favorite recipes whenever needed
challenge
challenge
Young adults often struggle with cooking, and a big part of that is matching the ingredients they buy to the meals they actually make.
What do you do when you have a bunch of random ingredients, and no idea what to make with them?
How do you keep track of which ingredients you need, so you don't get the wrong things?
Young adults often struggle with cooking, and a big part of that is matching the ingredients they buy to the meals they actually make.
What do you do when you have a bunch of random ingredients, and no idea what to make with them?
How do you keep track of which ingredients you need, so you don't get the wrong things?
user research
user research
from a survey of college students (n=17):
100% want to buy ingredients based on meal planning
Only 52% create a grocery list
29% do not meal plan before buying ingredients
from a survey of college students (n=17):
100% want to buy ingredients based on meal planning
Only 52% create a grocery list
29% do not meal plan before buying ingredients
sketches and notes
sketches and notes
i plotted out the entire user flow before ever opening my laptop
i plotted out the entire user flow before ever opening my laptop
early iterations: start with function first!
early iterations: start with function first!
the earliest iteration: practically nothing on the page!
the earliest iteration: practically nothing on the page!
<< crafting the UI of the meal card
<< crafting the UI of the meal card
i worked on different features to make the product user-friendly:
write two ingredients in the search bar to find meals that use both.
i worked on different features to make the product user-friendly:
write two ingredients in the search bar to find meals that use both.
building the calendar:
users can pick between 3/5/7 day views
displays each date + day of the week
easy drag-and-drop functionality
building the calendar:
users can pick between 3/5/7 day views
displays each date + day of the week
easy drag-and-drop functionality
early iteration (<< left)
shipped version (right >>)
early iteration (<< left)
shipped version (right >>)
users can add their own meals, and edit meals as needed, too.
users can add their own meals, and edit meals as needed, too.
an evolution from the first logo to the final one!
an evolution from the first logo to the final one!
how i used AI while designing
how i used AI while designing
i wrote the PRD, detailing each feature and its behavior
AI helped me build the code files in VSCode
i tested and evaluated the web app
AI edited the code based on changes i decided to make
i didn't have experience working with databases
AI walked me through connecting to Supabase
i designed the UI, including the dynamic motion design
AI helped me implement it in VSCode
in summary, each aspect of the product was my idea alone. AI helped me bring those ideas to life and use unfamiliar tools.
i wrote the PRD, detailing each feature and its behavior
AI helped me build the code files in VSCode
i tested and evaluated the web app
AI edited the code based on changes i decided to make
i didn't have experience working with databases
AI walked me through connecting to Supabase
i designed the UI, including the dynamic motion design
AI helped me implement it in VSCode
in summary, each aspect of the product was my idea alone. AI helped me bring those ideas to life and use unfamiliar tools.
what i got out of this
what i got out of this
did i get a perfect meal planner? no.
my goal for this project wasn't to build a revolutionary design. it was to learn how to build by myself — to identify a problem space and create a product that filled the gap.
i learned to envision exactly how i wanted the end product to look, act, and feel, and the why behind each decision.
did i get a perfect meal planner? no.
my goal for this project wasn't to build a revolutionary design. it was to learn how to build by myself — to identify a problem space and create a product that filled the gap.
i learned to envision exactly how i wanted the end product to look, act, and feel, and the why behind each decision.
final UI: coming soon!
final UI: coming soon!
i'm constantly updating, even though this product is shipped. final designs will be added here soon. feel free to try it out!
i'm constantly updating, even though this product is shipped. final designs will be added here soon. feel free to try it out!