ThisOne

Inspiration

Fresh-grocery labels are often too broad. Several packs may all say "beef rib," "salmon," "baby spinach," or "apple," while the food inside can still be meaningfully different: one cut may be leaner, one fruit sweeter, one vegetable fresher, or one fish portion better suited to a specific dish.

ThisOne was designed for the real supermarket moment: standing in front of a shelf and wondering, "Which pack should I actually buy?"

What it does

ThisOne compares up to four fresh-food options across Fruit, Veg, Seafood, and Meat. A shopper can upload a shelf photo or separate package photos, then review simple, category-specific visible-cue cards.

Depending on the category, ThisOne surfaces cues such as:

• Fruit: likely variety, ripeness, sweetness, and best use
• Veg: visible part, freshness, texture, and best use
• Seafood: visible part, fat, tenderness, freshness, and best use
• Meat: likely cut, fat, tenderness, freshness, and best use

After comparing, shoppers can either stop there or ask ThisOne to choose. The recommendation flow considers when they plan to eat it, how they want to enjoy it, and preferences such as low sugar, low fat, weight control, high protein, muscle gain, or kid-friendly eating.

How I built it

ThisOne is a responsive single-page web app built with HTML, CSS, and JavaScript. It uses structured demo data and local recommendation logic so judges can test the complete product flow without an API key.

The repository also includes a server-side GPT-5.6 vision integration. When deployed with an OpenAI API key, GPT-5.6 receives up to four compressed grocery photos and returns cautious, structured, photo-supported estimates. The UI turns the result into comparison cards, while local logic combines those cues with the shopper's timing and preferences.

The public demo is intentionally available in demo mode with no account or API key required. It clearly labels demo mode and does not claim that its sample results came from live photo analysis.

How Codex helped

Codex was my primary build partner during OpenAI Build Week. It helped turn a non-technical product idea into a working web app, shape the grocery-comparison flow, refine the English interface, iterate on responsive visual design, implement category-specific comparison logic, and add safeguards such as the four-option limit, photo-size guidance, input handling, prototype disclosure, and QA checks.

Key product decisions included comparing before recommending, showing original option images in the decision flow, avoiding misleading numeric freshness scores, and treating dietary needs as preferences rather than medical advice.

Challenges we ran into

The difficult part was making the interface clear without giving users false certainty. Photos cannot prove food safety or fully identify every cut or variety. We therefore designed the experience around visible-cue estimates, use "Not clear from photo" for uncertain live results, and remind users to check dates, storage, smell, and local food-safety guidance.

What’s next

Next, ThisOne could add retailer-label extraction, confidence-aware photo guidance, configurable dietary profiles, and opt-in price/value comparison.

Built With

• css
• github
• html
• javascript
• openai-codex
• vercel