What Should I Eat Today? Project Report
1. The Concept
What Should I Eat Today? is a mobile-style food picker app that helps users quickly decide what to eat based on meal time. Instead of showing a plain random text result, the app creates a more visual experience with breakfast, lunch, and evening categories, matching food photos, favorites, ratings, and custom food input.
2. The Stack
The Stack: Pure HTML, CSS, and JavaScript in a browser-ready app. The project uses local image assets and browser localStorage for saved favorites, star ratings, and custom food items.
The AI Assist: AI helped plan the product direction, apply Sakurai-style UI/UX rules, generate matching food images, build the interface, refine the visual style, and prepare project documentation.
3. The 1 Day Sprint:
Morning (Hours 1–3): Defined the app concept, target user, meal categories, and interaction loop. The first focus was making the core picker work: choose a meal time, pick a food, show a result, retry, and save favorites.
Afternoon (Hours 4–6): Improved the visual direction from a simple web card into a mobile app/game-style interface. The UI was rebuilt around image assets, portrait layout, food cards, bottom navigation, modal input, and localStorage persistence.
The Finish Line (Hour 7-8): Generated and matched food photos for every menu item, checked asset paths, fixed popup button layout, polished the app flow, and wrote the README and project report.
4. The Roadblocks
Roadblocks: The biggest challenge was finding the right visual direction. Early versions looked too plain, too dark, or not appetizing enough. Another issue was making generated food photos match each food name correctly. The project also had to follow strict UI rules, so major UI elements needed to behave like game/app assets instead of normal web buttons.
5. Key Takeaways
Small food picker apps still need strong visual feedback. A random result is more convincing when the image, meal category, and text all match.
Design direction matters as much as functionality. The same app can feel unusable, playful, or professional depending on color, spacing, and image quality.
Generated images need QA. Contact sheets helped verify that each food image matched the correct menu item before using it in the app.
My final thought: What Should I Eat Today? became stronger when it stopped feeling like a basic web page and started feeling like a small, visual mobile food experience.