PantryLoop

Watch the demo

Watch the 4 minutes 20 seconds narrated application walkthrough. The video page includes native playback controls and a full transcript, requires no login, and links back to the live app and public source.

Inspiration

Checking the pantry before shopping is easy advice to forget. The EPA recommends looking at existing food, planning meals and listing required quantities before buying groceries. PantryLoop makes that small routine concrete: what should be used soon, which meals it can support, and what is actually missing.

Source: https://www.epa.gov/recycle/preventing-wasted-food-home#planning

What it does

PantryLoop is a browser-based kitchen workspace with an editable pantry, a recipe book and a dated meal planner. It allocates each ingredient only once across planned meals, prioritizing pantry lots near user-entered use-before targets. A transparent recipe matcher explains available-ingredient coverage and which approaching-target ingredients a recipe uses.

The shopping list shows the exact remaining deficits. When the cook marks a meal cooked, PantryLoop deducts the recorded quantities once and creates a reversible journal entry. Undo restores the exact quantities. Data stays in the browser, with JSON backup and import, grocery CSV export and a printable plan.

How it was built

React, TypeScript and Vite power the interface. A pure TypeScript allocation engine separates reservations from stock-changing cooking transactions. Zod validates versioned browser state and imported files, including cooking-history invariants. Vitest and React Testing Library exercise the engine and user workflows; Playwright checks desktop and mobile flows in a real browser.

The visual system uses warm stone surfaces, a plum accent, locally bundled typography and an original editorial produce still life generated with OpenAI's image-generation tool. There are no required paid services, remote inference calls, user accounts or API keys.

Technical challenges

The central challenge was preventing one ingredient from being promised to multiple meals. Planning projects temporary reservations, while cooking makes a separate recorded state change. Undo uses the exact consumption record rather than recomputing a potentially changed recipe.

Another challenge was honest unit handling. Grams and kilograms convert, as do milliliters and liters. Pieces and cups do not magically become grams. Mismatches remain visible instead of silently producing inaccurate groceries.

Accomplishments

The implemented product supports complete pantry-to-plan-to-cooking workflows, with a responsive interface and portable data. Automated validation and real browser testing cover stock edits, persistent cooking/undo, shortfalls, CSV export, custom recipes, keyboard dismissal and print output. Verification: 41 unit/integration tests and 12 desktop/mobile browser tests pass; the dependency audit reports zero vulnerabilities.

Learning and next steps

The project demonstrates pure functions, immutable state updates, reservation accounting, input validation, accessible native controls and transaction history. The source repository includes a concise architecture walkthrough and runnable exercises for reviewing those concepts.

Future evaluation could test whether cooks find the planner useful over several weeks and measure actual changes in purchases or discarded ingredients. This version reports logged use only. It does not claim food waste prevented, avoided emissions, money saved, nutritional adequacy or food safety.

AI and asset disclosure

Created with substantial OpenAI Codex assistance for design, implementation, testing, sample content, documentation, original SVG artwork and generated imagery. The running application uses deterministic logic and does not call an AI model. Plus Jakarta Sans and Lucide icons are credited in the repository. Sample pantry quantities and recipes are explicitly illustrative and editable.

Team and timing

One human entrant, working solo. The original application was created beginning September 5, 2026 for NextStep Hacks 2026, Earth Forward.

Demo format

The demo is a narrated walkthrough of actual application screenshots, clearly labelled with synthetic narration. Sample data is illustrative. It does not depict an uninterrupted live screen recording.

Built With

• openai-codex
• openai-image-generation
• playwright
• plus-jakarta-sans
• react
• typescript
• vite
• vitest
• zod