[Project Showcase] NutraFlux – A Professional, Local-First implementation of Calorie Counter App

[johnnylemonny]

Hi @florinpop17 and the App Ideas community!

I’ve recently completed a production-grade implementation of the Calorie Counter App from the Advanced tier.

I wanted to share NutraFlux, a project where I focused on pushing the original requirements into a professional & local-first territory, using the latest frontend stack.

🔗 Project Links

• Live Demo: https://johnnylemonny.github.io/NutraFlux/
• GitHub Repository: https://github.com/johnnylemonny/NutraFlux

✨ Features Implemented (Beyond User Stories)

• ✅ Full User Stories Coverage: Daily calorie/macro tracking, meal categorization, and persistent storage.
• ⚡ Nutra-Speed Search: Instant, wildcard-supported food lookup using a compressed local catalog (zero API latency).
• 🧬 React 19 & Tailwind 4: Built with the latest stable versions for maximum performance and modern CSS features (OKLCH, backdrop-filters).
• 🛡️ Privacy-First (Local-Storage): 100% of the data stays in the browser. No cloud syncing, no cookies, no tracking.
• 🌓 States-of-the-Art UI: A "Glassmorphism" design system with adaptive Dark/Light modes and smooth transitions.
• 📱 PWA Ready: Fully responsive and installable on mobile devices with high-res branding assets.

🛠️ Technical Details

• CI/CD: Automated hybrid linting pipeline (Native ESLint + Super-Linter for infra).
• Quality: Strict TypeScript, Lighthouse scores > 95, and WCAG 2.1 AA accessibility compliance.
• License: AGPL-3.0 to protect the open-source nature of the project.

💡 What I Learned

During this project, I realized that the biggest challenge wasn't just tracking calories but doing it with zero friction. By moving the food database entirely to the client-side, I achieved an "instant-feeling" UX that is often missing in commercial tracking apps.

Thank you for this great project idea! I hope this implementation inspires others to take these challenges to the next level.