Building CalorieScan: Real-Time AI Nutrition Analysis

Tracking macros is tedious. CalorieScan was built to remove the friction from dieting by utilizing artificial intelligence to instantly analyze food items and return highly accurate nutritional breakdowns.

/02 Data Fetching & State Synchronization

The core functionality relies on piping user inputs through a specialized nutrition AI model. Because these API calls can take 1-3 seconds, I built a skeleton-loading UI state that mirrors the final data structure. This prevents layout shift when the data finally arrives, keeping the user experience smooth.

/04 Mobile-First Utility

A tool like this is primarily used standing in a kitchen or a grocery store aisle. Therefore, the UI was engineered strictly mobile-first. Large, thumb-friendly touch targets, high-contrast typography for readability in bright lighting, and a bottom-sheet navigation pattern make the app feel native to iOS and Android, despite being web-based.

“Utility apps must respect the user's context. If it takes more than 3 taps to get a result, they will close the tab.