🍏
Diet Dice
A web-based meal decision tool designed to reduce everyday decision fatigue through playful "dice roll" interactions and behavioral logic.

🟣
Overview
Diet Dice is a web-based meal decision tool designed to reduce everyday decision fatigue. It blends behavioral logic, clean aesthetics, and a playful "dice roll" interaction to help users choose meals that align with their dietary goals—quickly, intuitively, and delightfully.
🌱
Why I Built This
I wanted to solve a universal problem:
"What should I eat today?"
For people trying to lose weight or build consistency, this small question creates real friction. Diet Dice turns that moment into a simple, supportive interaction.
🧩
What I Built
- •A responsive, aesthetic, React + Tailwind interface focused on clarity and low cognitive load
- •A "decision dice" system that combines randomness with user preferences to make meal selection feel effortless
- •Configurable user inputs (meal type, dietary constraints, health goals) with validation and real-time feedback
- •Persistent user preference handling through client-side state
- •Fully deployed and hosted using AWS Amplify, enabling CI/CD, scalable hosting, and seamless frontend updates
⚙️
Technical Deep Dive
Frontend
React (CRA) with modern hooks-based architecture
UI/UX
Tailwind CSS, responsive layout, minimal and clean interaction patterns
State Management
React hooks for preference storage and decision logic
Decision Engine
Randomized "dice roll" weighted by user-selected categories
Deployment
- •AWS Amplify for hosting, automatic build & deploy pipelines
- •Domain, SSL, and versioned releases managed through Amplify
- •Future-ready Architecture: Prepared for integration with AI-based nutrition recommendations (SageMaker / OpenAI API)
🌈
Impact
- •Reduces cognitive overload around daily food choices
- •Makes healthy decision-making feel fun, not restrictive
- •Offers a small, elegant experience that fits into real life
- •Designed with behavioral insights to support habit-building and user consistency
👩🏻💻
My Role
Product Designer & Frontend Developer
- •Led UI/UX, component design, interaction flow, and accessibility polish
- •Implemented decision logic, validation, and state architecture
- •Configured end-to-end deployment on AWS Amplify
- •Applied psychology-informed UX patterns to improve user engagement
✨
Highlights
- •Behavior-driven decision model
- •Clean, aesthetic interface designed for usability and delight
- •Scalable and production-ready deployment via AWS Amplify
- •Built with a perspective focused on real-world change and user empathy