Overview

I wanted a dead-simple way to track my daily protein intake and make sure I was actually hitting my goals.

This was one of the first projects where I leaned into LLM-powered editors. I spun up a lightweight React app, configured it as a PWA, and made it usable on any device.

The app does exactly what it should, nothing more. Set your protein goal, log what you eat throughout the day, and see your progress front and center at the top of the screen. No clutter, no distractions. Just numbers that keep you honest.

Technical Details

Architecture

Describe the technical architecture of your project:

• Frontend: React, TypeScript, Tailwind CSS
• Backend: Local storage for offline storage of protein builds and service worker for PWA functionality
• Deployment: Netlify

Future Enhancements

• Tracking more than a single day’s protein intake
• Saving your food items or using AI to get the protein content of your food if you don’t know it
• Adding a way to export your protein intake data for tracking over time

Conclusion

This was one of my first AI-focused projects, and it turned out better than I expected.

I intentionally started small so I could focus on understanding how LLMs behave, how to iterate on prompts, and how to keep a human in the loop to validate outputs. It was a hands-on way to learn what works, what doesn’t, and how to refine results over time.

It wasn’t overly complex, but that was the point. I was able to design and build it the way I wanted while building real experience with AI tooling.