๐Ÿฅ—/NutriTracz

Responsive Calorie Tracking to Simplify Daily Nutrition

NutriTracz is a responsive calorie tracking web application designed to simplify daily nutrition tracking through a clean, lightweight, and distraction-free experience without subscription barriers.

RoleProduct Designer โ€ข AI-Assisted Builder
DurationPersonal Project (2026)
PlatformWeb App / Mobile
FocusNutrition โ€ข Responsive UX โ€ข Firebase
Dashboard Mockup
Dashboard Mockup
[01 / 06]

Solving My Own Problem

I wanted a simple way to track my daily calories without relying on complex fitness applications filled with unnecessary features.

Unable to find an experience that matched my needs, I decided to build one myself.

Although I had no programming experience, I used AI as my development partner to transform the idea into a working product.

Before AI
Sketch
๐Ÿ“
Notebook
โž”
Wireframe
๐Ÿ“
Layout
โž”
Dashboard
๐Ÿ“Š
Final
โž”
Mockup
๐Ÿ“ฑ
Mobile
After AI
Idea
๐Ÿ’ก
Concept
โž”
Develop
๐Ÿค–
AI Builder
โž”
Prototype
โšก
Live App
Every product begins with solving a real problem.
Project Insight
"The best products often begin by solving your own problem."
[02 / 06]

Turning Ideas into a Working Product

Rather than writing code manually, I translated product ideas into prompts.

AI generated the implementation while I focused on product decisions, testing, validation and continuous iteration until the experience matched my vision.

Development Workflow Flowchart
๐Ÿ’กIdea
โ–ผ
๐Ÿ“Wireframe
โ–ผ
โœ๏ธPrompt Eng.
โ–ผ
๐Ÿค–AI Code
โ–ผ
๐ŸงชTesting
โ–ผ
๐Ÿ”„Iteration
โ–ผ
๐Ÿš€Live Product
Technology Stack
โš™๏ธGoogle AI Studio

Generated application logic.

๐Ÿ‘ฝAntigravity

Translated interface ideas into working components.

๐Ÿ”ฅFirebase

Authentication and database.

๐Ÿ’ปGitHub

Version control.

โšกNetlify

Deployment.

๐Ÿ’ฌChatGPT

Prompt engineering.

โœจGemini

Debugging and problem solving.

Design Principle
"AI accelerated development, but product thinking remained the foundation of every decision."
[03 / 06]

From Prompts to Product

Every feature started with a prompt, evolved through testing, and was refined until it felt intuitive.

01. FeatureAuthentication

Secure Google Sign-In authentication via Firebase.

Authentication
02. FeatureDashboard

Centralized overview of calories remaining, macros, and profile info.

Dashboard
03. FeatureMeal Logging

Quick-entry dialog to search, add, and save daily food entries.

Meal Logging
04. FeatureMacro Tracking

Real-time breakdowns of carbs, proteins, and fats against target goals.

Macro Tracking
05. FeatureBMI Calculator

Dynamic health metrics calculation based on height and weight inputs.

BMI Calculator
06. FeatureWeekly Analytics

Beautiful weekly bar charts tracking calorie trend history.

Weekly Analytics
UI Evolution Cycle
Step 1: The Prompt
"Create a clean dashboard header showing calories remaining out of 2000, with a circular progress indicator."
Prompt snippet
Step 2: Generated Code
2000 kcal
HTML
Generated interface
Step 3: Refined UI
1,450 left
72%
Final polished interface
Key Learning
"The first AI-generated solution was rarely the final solution. Continuous iteration produced the best experience."
[04 / 06]

Testing Beyond My Own Assumptions

Instead of relying only on my own perspective, I shared NutriTracz with more than 15 early users.

Their feedback helped uncover usability issues, validate design decisions and improve the overall experience.

User Validation Cycle
๐Ÿ‘ฅ15+ Early Users
โ–ผ
๐Ÿ“Collected Feedback
โ–ผ
๐Ÿ“ŠPrioritized Improvements
โ–ผ
โœ๏ธUpdated Designs
โ–ผ
โœจImproved Experience
Feedback Loops
Feedback
"I wanted quicker meal entry."
โ–ผ
Improvement

Added simplified logging.

Feedback
"The dashboard felt crowded."
โ–ผ
Improvement

Improved visual hierarchy.

Feedback
"I wanted weekly progress."
โ–ผ
Improvement

Added analytics dashboard.

Research Finding
"Real users always reveal opportunities that designers cannot predict alone."
[05 / 06]

Tools Behind the Product

Rather than relying on traditional coding alone, this project combined multiple AI-powered tools across design, development and deployment.

AI Tool Ecosystem
NutriTraczCore ProductGoogle AIStudioCode GenerationChatGPTProblem SolvingFirebaseBackend & AuthGitHubVersion ControlNetlifyDeploymentGeminiResearch & CopyAntigravityAI Coding Agent
๐Ÿค–Google AI StudioCode Generation
๐Ÿ’ฌChatGPTProblem Solving
โœจGeminiResearch & Copy
๐Ÿ”ฅFirebaseBackend & Auth
๐Ÿ™GitHubVersion Control
๐Ÿš€NetlifyDeployment
โšกAntigravityAI Coding Agent
Project Insight
"The right combination of tools allowed me to focus on solving problems instead of learning an entire programming language first."
[06 / 06]

What's Next for NutriTracz

The current version solves manual calorie tracking.

The next evolution focuses on removing manual input entirely through AI-powered food recognition.

AI Recognition Flow โ€” Concept
๐Ÿฝ๏ธ
Capture
AI Camera
๐Ÿ“ธ
Capture FoodUser photographs a meal
01
๐Ÿง 
AI Detects Food ItemsModel identifies each ingredient
02
๐Ÿ“
Estimate Portion SizeVisual AI estimates weight & volume
03
๐Ÿ”ข
Calculate CaloriesNutrition values computed instantly
04
โš–๏ธ
Estimate Protein, Carbs & FatFull macro breakdown generated
05
๐Ÿ’พ
Save AutomaticallyEntry added to daily log
06
๐Ÿ”ญ
Future Features
๐Ÿค–
AI Food RecognitionPoint and log โ€” no typing
๐Ÿ“ท
Barcode ScannerPackaged food in seconds
๐Ÿ’ก
Smart Meal SuggestionsContext-aware recommendations
๐Ÿ“Š
Personalized Nutrition InsightsTrends tailored to your goals
๐ŸŽ
Apple Health IntegrationUnified health ecosystem
โŒš
Wearable SyncAuto-log via smartwatch activity
Product Vision
"The long-term goal is simple: let users focus on eating while AI handles the tracking."