Deeper Look - Food Scanner

Food scanners often give everyone the same opaque score. Deeper Look instead evaluates each dimension separately and gives a personalized, transparent recommendation.

Comment

Inspiration

Food scanners often reduce a complex product to one score, as though every user had the same needs. But someone avoiding an allergen, following a specific diet, limiting ultra-processed food, or prioritizing environmental values should not necessarily receive the same recommendation.

I built Deeper Look to offer a more personal and transparent approach. Instead of deciding what matters for the user, it evaluates each dimension separately, adapts the result to their preferences, and explains the reasoning behind it.

The name comes from the idea of looking deeper into a product’s composition rather than stopping at a single score or front-of-package claim. The logo follows the same concept: a Mandelbrot-inspired fruit represents the complexity hidden inside everyday products, while the letters H/E/P/U refer to the original evaluation model—Health, Environment, Processing, and User preferences. “Health” was later renamed “Nutrition” to describe the evaluated dimension more precisely, but the logo retains the original H.

What it does

Deeper Look lets users scan a barcode, import an image, search for a product, or browse available products.

Before evaluating anything, the app lets each user define what matters to them. Their profile can include:

  • specific diets and dietary restrictions;
  • allergens and intolerances;
  • ingredients or additives they want to avoid;
  • nutritional goals and preferred nutrient levels;
  • environmental and ethical values such as animal welfare, fair trade, local production, organic products, and responsible packaging.

Each criterion can be ignored, treated as a preference, or made a strict requirement. Two people examining the same product can therefore receive different recommendations based on their actual priorities.

Deeper Look evaluates several dimensions independently:

  • nutrition;
  • ingredients, allergens, and additives;
  • level of processing;
  • environmental information;
  • compatibility with the user’s profile.

Rather than hiding everything behind a universal score, the app shows which criteria matched, which did not, and which could not be evaluated because information was missing.

Users can inspect the complete product data, including ingredients, nutritional values, additives, processing information, labels, images, and environmental details. The app also includes history, favorites, multilingual support, and tools for reporting or improving incomplete information.

How we built it

Deeper Look is built with Kotlin Multiplatform and Compose Multiplatform, sharing most of its logic and interface across Android, iOS, and the web. Product information comes primarily from Open Food Facts, while a custom evaluation engine compares the available evidence with the user’s preferences and requirements.

The Android and iOS application existed before Build Week. During the event, I used Codex and GPT-5.6 to turn the existing shared application into a functional browser product and installable Progressive Web App.

The Build Week work included:

  • activating the shared Compose application for Kotlin/Wasm and JavaScript;
  • adding browser-specific navigation, preferences, storage, and platform adapters;
  • implementing persistent browser storage using Room and SQLite through OPFS;
  • connecting the production web bundle to the existing Cloudflare deployment workflow;
  • implementing camera and gallery barcode scanning with BarcodeDetector and ZXing fallbacks;
  • mapping barcode bounds correctly through cropped, mirrored, and rotated camera previews;
  • adapting Open Food Facts and OpenPrices requests to browser CORS and security restrictions;
  • adding API-host failover and startup recovery for unavailable services or stale cached Wasm files;
  • making the interface responsive across mobile, tablet, and desktop layouts;
  • adding an installable PWA manifest, service worker, store links, and web-specific onboarding;
  • implementing browser-compatible feedback screenshots and annotations;
  • adding explicit, consent-gated analytics without exposing native Firebase configuration to the web target;
  • preserving Android and iOS compilation and behavior throughout the migration.

Codex worked directly with the existing codebase to implement features, inspect failures, apply fixes, and iterate from real compiler and runtime output.

I used GPT-5.6 to plan the web architecture, investigate Kotlin/Wasm and browser-specific constraints, diagnose cross-platform failures, and review changes that could affect the existing Android and iOS applications.

Challenges we ran into

The largest challenge was that sharing code does not make every platform behave identically.

Camera preview, barcode detection, orientation, image cropping, mirroring, lifecycle behavior, navigation, safe areas, browser security policies, and persistent storage all required platform-specific handling.

Browser scanning was particularly difficult. The implementation had to combine a smooth native video preview with Compose-based controls and overlays, map detected barcode coordinates into a cropped reticle, reject detections outside the scan area, handle rotated still images, and preserve the detected frame when a result was found.

Network behavior also differed substantially from the native applications. Browser restrictions prevented some headers, API failures could appear as CORS errors, content-security policies could block taxonomy downloads, and a stale service worker could attempt to load an outdated Wasm filename. The web version therefore needed host failover, explicit CSP configuration, and recovery logic for stale cached assets.

Another challenge was adding web-specific behavior without fragmenting the product. Store prompts, ratings, analytics configuration, insets, navigation rails, and some preference controls had to differ by platform while the main application remained shared.

Finally, public product databases can contain incomplete or inconsistent information. Deeper Look must communicate that uncertainty rather than presenting every conclusion as equally reliable.

Accomplishments that we're proud of

Deeper Look is now a real Android, iOS, and web product built from one shared multiplatform codebase.

The Build Week result is not a promotional mock-up or a simplified landing page. It is a functional browser application in which users can complete onboarding, configure detailed preferences, search or browse products, scan barcodes with a compatible camera, receive personalized recommendations, inspect the analysis, save local data, and submit annotated feedback.

The web application is also installable as a PWA and connected to a repeatable production deployment workflow.

I am particularly proud that this was accomplished without replacing the existing native applications or maintaining a separate web implementation. The work extended a mature product to a third platform while continuing to compile and function on Android and iOS.

The app also supports seven languages and preserves its central principle: recommendations may be personalized, but the evidence should remain visible to the user.

What we learned

I learned that effective AI-assisted development depends on giving the model concrete context: the actual repository, focused objectives, compiler output, browser logs, screenshots, and observable failures.

Codex was most useful inside an iterative build-test-correct workflow rather than as a one-shot generator. Many of the hardest issues required several rounds of implementation, direct testing, diagnosis, and refinement.

GPT-5.6 was particularly valuable when the problem involved architecture or interactions between several systems—for example Compose rendering, native browser video, barcode-coordinate transformations, Wasm caching, CSP rules, and the requirement to preserve native behavior.

I also learned that cross-platform development is not about forcing every platform to behave identically. It is about identifying which behavior should be shared, isolating the differences cleanly, and ensuring those differences do not fragment the product.

Finally, bringing Deeper Look to the browser reinforced the value of accessibility: someone can now try the actual product immediately through a URL without first installing a native application.

What's next for Deeper Look - Food Scanner

The next steps are to continue improving browser barcode scanning, strengthen the handling of incomplete product data, and refine the experience across larger screens and different browser environments.

A major planned feature is meal composition. Users will be able to combine several products and evaluate the meal as a whole rather than considering every item in isolation.

I also plan to support more ways of identifying products, including OCR and image-based recognition, and to make it easier for users to contribute corrections when information is incomplete.

The broader goal remains the same: help people look deeper into product composition and understand how individual products—and eventually complete meals—fit their own priorities.

Built With

Share this project:

Updates