The most challenging and time-consuming part of this whole exercise was scoping the project, and establishing clear logic behind each design decision rather than vibe-coding for the sake of it. Because AI agents made it so easy to implement new features, I often got carried away into adding more functionality before validating existing features.

To keep myself in check, I prioritized the PRD first and maintained a priority list of potential new features on the side. Eventually, I became more critical about deciding what to put on the screen based on its value and usability in the bigger picture.

Finding a user's go-to dish meant grouping similar names like focaccia sandwich and focaccia pizza into something sensible like Focaccia even when they did not log the exact same dish names.

1. Initially, I used the Claude Sonnet API for comparing dishes, but that was often slow and there was a risk of request timeout.

2. So I added a keyword-similarity check as fallback for when the model was slow or failed, so the experience stayed fast and dependable.

Vibe-coding is cool until things break in code and it becomes difficult to pin-point the exact problem:

1. For small targeted fixes, I used the CSS Inspector in Cursor. 

2. For more complex issues, I worked around them with natural language and patience: screenshotting the error, describing it to Cursor, testing the fix, and consistently using version control via GitHub to roll back any catastrophic changes.

At first, I jumped directly from the Claude PRD to Cursor without finalizing a strong visual foundation. 

There were a few design guidelines in the PRD such as using a dark theme but the site hierarchy was missing which resulted in a flat, single screen output with an influx of gradients and emojis. So I decided to stop there, open Figma Make and restructure my approach, setting up clear design guidelines. Ultimately, I decided to go for a light-themed app so the food photos would pop more!

Image attached shows Cursor's initial output.