I built a macro tracker powered by AI + attitude. 🏋️
Plan your macros in the morning. Check in once at night. Let Milo cheer you on or let Evil Vilo roast you.
🚀 Live demo: https://web-production-5c594.up.railway.app/
📦 GitHub: https://github.com/Amulya631/MacroDay
The Problem
Most nutrition apps are reactive.
You eat something, you log it, you feel guilty later. The friction of logging every meal throughout the day is exactly why people abandon these apps within a week — and the people who care most about macros (gym-goers chasing protein and fiber targets) are the ones who need a simple system, not a data-entry job.
Old Way ❌MacroDay ✦ Log every meal, all daySet an intention in the morningReact to what you already ateMake smarter decisions all dayGuilt at 10pm when you're 40g short Confirm at night — no surprises
The Solution: Planning-First, Not Logging-First
Two touchpoints a day:
Morning — Tell MacroDay what you're planning to eat. Get instant AI-powered macro analysis across all five macros (calories, protein, fiber, carbs, and fats). Add snacks to close gaps and watch the rings update live.
Night. Confirm what you actually ate. Followed your plan? Quick tick-box list. Day went sideways? Enter your actual meals.
You set an intention in the morning, which means better decisions all day, not just guilt at the end.
Features
🎯 5 animated SVG macro rings — real-time visual feedback for all five macros
🧠 AI-powered analysis — Claude Haiku reads your meal descriptions and calculates macros, gaps, and smart snack suggestions
⚡ Live snack updates — add a suggested snack and all five rings update instantly
🎙️ Voice input — mic button on every meal field (Chrome, Web Speech API)
🕐 Time-aware routing — the right screen for the time of day, automatically
📋 Night check-in — Path A (tick-box) or Path B (full re-entry), with edge case handling
📊 End-of-day summary — actual vs. target macro rings with celebration or encouragement
🔄 Day rollover — history written to localStorage, today resets automatically
😇😈 Milo vs. Evil Vilo — choose your mascot. One is warm and proud of you. The other will not be kind about your fiber intake.
The Mascot System (a first-class feature)
The mascot is not an afterthought. At profile setup, you pick your flavor. Both characters appear on every emotional moment — morning results, skipped meals, end-of-day summary, sleep screen.
Milo (Good) 😇
"Great job planning ahead your protein is solid, and you've got room for a great snack tonight!"
Evil Vilo 😈
"Embarrassing. You logged 'some chicken' and expect me to calculate your macros? Try again."
Both are built from the same data — just radically different personalities. Vilo is a ragebait villain who will genuinely not be kind about your fiber intake.
Tech Stack
LayerTechNotesBackendPython · FastAPIServes frontend + APIFrontendVanilla HTML/CSS/JSNo framework neededAIClaude Haiku (claude-haiku-4-5-20251001)Single endpointStorageBrowser localStorageZero infraVoiceWeb Speech APIChrome onlyDeploymentRailway1 Procfile, 1 env var
Single-service architecture — FastAPI serves both the static frontend and the /api/analyze endpoint from the same origin. No CORS complexity, no separate frontend deployment.
How the AI Works
All macro analysis runs through a single endpoint:
POST /api/analyze
The request includes:
Meal descriptions (free text — "200g chicken breast, 150g rice")
Daily macro targets from the user's profile
Mode ("morning" or "night")
Mascot preference ("milo" or "vilo")
Claude returns structured JSON:
json{
"macros": {
"calories": 1480,
"protein": 112,
"fiber": 18,
"carbs": 160,
"fats": 38
},
"gaps": {
"calories": 520,
"protein": 38,
"fiber": 7
},
"feedback": "Your protein is on track but fiber is noticeably short...",
"snack_suggestions": [
"Greek yogurt (200g) — +15g protein, +0g fiber"
],
"affirmation": "Solid plan. Don't blow it at dinner.",
"needs_clarification": false
}
Key Architecture Decisions
- One endpoint, three modes Rather than separate routes for morning analysis, night analysis, and snack recalculation, everything goes through POST /api/analyze with a mode field.
One fetch wrapper on the frontend
Prompt logic lives in one place
Easier to tune Vilo's tone without hunting across multiple handlers
- Vague input detection at the prompt level When a user types "some chicken", the app doesn't try to parse or validate before sending. Instead, the Claude prompt instructs the model to return needs_clarification: true if it can't calculate macros with reasonable confidence. This is more robust than regex—Claude catches edge cases a rule-based validator would miss. "Food from the gym" is vague. "Leftover pasta" is ambiguous but probably workable.
- SVG rings over CSS conic gradients stroke-dasharray / stroke-dashoffset on SVG circles gives precise control over fill percentage and animates cleanly with CSS transitions. Conic-gradient is simpler to write but harder to animate and has inconsistent cross-browser rendering for partial fills. The SVG approach adds ~10 lines per ring but is rock-solid on every browser.
- localStorage over a backend database For a personal-use demo with no auth requirement, localStorage is the right call. Zero infrastructure, zero latency, works offline, resets cleanly. The data model is designed so that migrating to a real database later is straightforward—each key (macroday_profile, macroday_today, macroday_history) maps directly to what would be a user-scoped database record.
Project Structure
MacroDay/
├── main.py # FastAPI app — serves frontend + API
├── requirements.txt
├── Procfile # Railway deployment config
├── static/
│ ├── index.html # Single-page app (all screens)
│ ├── style.css # Health/wellness UI styling
│ ├── app.js # Routing, profile, night check-in logic
│ └── analyze.js # API calls, ring rendering, snack logic
├── assets/
│ ├── Milo_Good.png
│ └── Vilo_Evil.png
└── docs/
├── scope.md
├── prd.md
└── spec.md
Running Locally
bash# 1. Clone
git clone https://github.com/Amulya631/MacroDay.git
cd MacroDay
2. Install
pip install -r requirements.txt
3. Set your API key
echo "ANTHROPIC_API_KEY=your-key-here" > .env
4. Start
uvicorn main:app --reload
5. Open http://localhost:8000 in Chrome
Get an Anthropic API key at console.anthropic.com.
What's Next (v2 Ideas)
📸 Photo macro analysis—photograph a meal, AI estimates macros from the image
🔔 Push notifications — morning reminder at 8am, night reminder at 8pm
📈 Multi-day insights—"You've been low on fiber all week."
💪 Post-workout mode — dedicated high-protein suggestion flow
Try It
🚀 Live demo: https://web-production-5c594.up.railway.app/
⭐ GitHub: https://github.com/Amulya631/MacroDay
🛠️ Built with: Claude Code · Anthropic
If you're a gym-goer who's ever abandoned a nutrition app because it felt like a second job — this one's for you. Give it a try, star the repo, or open an issue if you have ideas.