About the Project
Track
Software Engineering
Team Members:
Sofia Rivas Argueta, Ruby Lin, Morgan Pascoe, & Crystal Zhu
Inspiration
Grocery aisles are noisy, and most people can’t parse a Nutrition Facts panel quickly. We wanted a tool that gives plain-language clarity in under 10 seconds and teaches as it guides.
What We Built
Scan & Grade
Camera, UPC, or text search → fetches product data → renders a Nutrition Facts card with %DV, ingredient tap-for-meaning tooltips, and an AI-derived score (NutritionLabel.jsx).
Daily Challenge
A Wordle-style guessing game using the same nutrition data to keep label literacy fun and sticky (GamePage.jsx).
Stack
- React + Vite frontend
- Tailwind-style utility classes
- ZXing (
@zxing/browser) for barcode scanning - Lightweight Node + Express API (
localhost:4000) for product lookups and scoring
How We Built It
- Designed a two-path UX in
App.jsx: Home hero → Scan & Grade or Daily Challenge - Implemented barcode scanning with
@zxing/browser, falling back to manual entry - Normalized nutrient data, mapped values to DV tables, and calculated a score
- Rendered a responsive, print-like Nutrition Facts label UI
- Added ingredient tooltips via on-demand fetch
- Built a mini game loop with hints, streaks, confetti, and a results modal
What We Learned
UX
Clear calls to action and immediate feedback (loading states, confetti) dramatically improve perceived speed.
Data
Nutrition datasets are inconsistent, so unit normalization (g, mg, µg) is critical.
Engagement
Light gamification, like hints, keeps users exploring labels they’d otherwise ignore.
Math
To score fairly across products, we converted nutrients to a per-100g basis:
$$\text{per100g} = \frac{\text{amount per serving}}{\text{serving size (g)}} \times 100$$
Challenges
- Handling camera permissions and unreliable barcode detection across devices
- Dealing with missing or inconsistently named nutrient fields (for example, “Energy” vs “Calories”)
- Keeping the UI readable while fitting full label details on mobile
- Building an informative score, balancing clarity with liability
Next Steps
- Expand data coverage and cache responses to reduce latency
Log in or sign up for Devpost to join the conversation.