MyMealPal

MyMealPal lets anyone easily create, edit, and download fun, emoji-filled weekly meal plans—no login needed. Stay healthy, plan meals, follow doctor’s advice, and eat better, effortlessly.

Comment

🧠 Inspiration

MyMealPal was inspired by a personal experience. My younger brother is glucose-intolerant, and managing his meals at home has always been difficult — from forgetting what meals are safe for him, to not having a consistent meal plan. I realized many others face similar struggles: patients following a doctor’s recommendation, fitness lovers tracking macros, or even students trying to eat better. I wanted to create something fun, simple, and practical that could help people plan and enjoy their meals more easily.

🍽️ What it does

MyMealPal is a playful, mobile-first web app that lets anyone generate, edit, and download a beautiful weekly meal timetable — no login required.

Key Features:

  • Pick a food style: “High-protein”, “Fast Food”, “Vegetarian”, "Diabetic-Friendly", “Student Meals”
  • Auto-generates a full 7-day meal plan (Breakfast, Lunch, Dinner)
  • Editable meal names and day labels (e.g. “Travel Day”)
  • Download meal plan as a styled poster-like image
  • Optional in-browser meal reminders via Notification API
  • Works fully in-browser and offline (no database)

🛠️ How we built it

  • Frontend: HTML, TailwindCSS, Vanilla JavaScript
  • Image Export: html2canvas, dom-to-image
  • Browser APIs: Local Storage, Notification API
  • Development: Bolt, which made fast, backend-free deployment possible
  • Deployment: Netlify comboed with Bolt

All logic runs on the client side. The app uses DOM manipulation for real-time edits, emoji rendering, and visual updates. It is fully responsive and optimized for mobile-first usage.

🚧 Challenges we ran into

  • Making the editable timetable responsive and clean across all devices
  • Ensuring exported images match the on-screen layout exactly
  • Handling emoji compatibility and font styling in downloads
  • Managing all logic client-side without backend support
  • Creating smooth user experience with in-browser notifications and no pop-up fatigue

🏆 Accomplishments that we're proud of

  • Built a polished, real-world useful tool in a short timeframe
  • Fully offline-capable and works without any login or data storage
  • Personalized user experience with food styles and editable meals
  • Clean UI/UX that feels joyful, not boring — with emojis, colors, and animation

📚 What we learned

  • Deep integration of browser APIs (Notification, localStorage)
  • Exporting styled HTML to downloadable high-resolution images
  • Managing dynamic content updates in vanilla JavaScript
  • Leveraging Bolt to build and ship a full frontend app with zero backend

🚀 What's next for MyMealPal

  • Add calorie/macronutrient tracking and nutritional info per meal
  • Allow users to save multiple plans in-browser
  • Add AI-powered meal suggestions and recipe links
  • Shareable public links or QR codes for sending plans to friends/family
  • Theme customization: fonts, layout, emojis, dark mode improvements
  • Collaborate with dietitians for expert-curated meal packs

Built With

Share this project:

Updates