🍏

Diet Dice

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

Diet Dice Project Cover
🟣

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