CleanScan – Project Story

🌟 Inspiration

Late-night grocery runs became 45-minute label-decoding marathons for my daughter’s allergies (and my own post-mold-toxicity diet).
I craved a single-tap scanner that vets ingredients, flags allergens, and suggests cleaner swaps.


📚 What I Learned

  • Glossy packaging kills OCR—lighting tweaks and adaptive thresholding are essential.
  • Ingredient aliasing (“rapeseed” vs “canola”) requires a robust synonym map.
  • Micro-UX touches—flash toggle, auto-crop—boost scan success and user trust.

🛠️ How I Built It

Layer Tech & Flow
Front-end React + Vite PWA wrapped with Capacitor for live camera feed.
OCR → Parse Tesseract.js extracts text → OpenAI o4-mini parses & scores ingredients.
Data & Auth Supabase stores profiles, allergy lists, and CleanScore history (RLS enforced).
Rules Engine Flags seed oils, synthetic dyes, and user-specific allergens; ranks “CleanScore.”
CI / Hosting Netlify continuous deployment with preview branches.

⚠️ Challenges

Issue Fix
Glare wrecking OCR Adaptive threshold & quick user prompt to tilt the pack.
Latency > 4 s on budget phones Batched OpenAI calls + local caching of common additives.
Privacy vs. aggregate analytics Anonymised ingredient hashes for trend dashboards.

🚀 What’s Next

Crowd-sourced database – community-verified CleanScores and recipe suggestions.

CleanScan is evolving into a pocket nutritionist that makes clean eating effortless—one snap at a time.

Built With

Share this project:

Updates