Tuck In is a six-screen ritual for turning overlooked fridge ingredients into a plan for tomorrow's lunch. Choose any three illustrated ingredients, carry the trio forward, add one gentle direction, and reveal the packed result. The interactive runtime is public and intentionally small: no accounts, storage, recipe database, or external food API.
Live: tuck-in-app.vercel.app
Choose three cards on the fridge shelf, continue through the board and lunchbox reveal, then restart the ritual. The complete loop runs in the browser without sign-in.
Leftovers rarely fail because of a missing recipe. They get forgotten when making one more decision feels like too much. Tuck In makes that decision finite, visual, and easy to carry into tomorrow.
The original six-screen visual artifact was created in Flowstep. This React and Vite runtime provides the session-only selection state needed to carry three choices across screens. The two artifacts are linked separately so their roles stay clear.
| Fridge shelf | Three-pick board |
|---|---|
|
 |
| Lunchbox reveal |
|---|
 |
- Three-choice rule: Select exactly three of six illustrated ingredients.
- Visible progress: The counter shows the selection moving from zero to three.
- Carry-forward state: The selected trio reappears in shelf order on later screens.
- Gentle constraint: A single direction turns the trio into an achievable next step.
- Lunchbox payoff: The same choices resolve into tomorrow's packed meal.
- Clean restart: Reset returns the ritual to the first screen with no selected cards.
Browser
|
v
React application
|
+--> selection rules
| |
| v
| chosen trio in session state
|
+--> six-screen ritual
|
v
board, constraint, lunchbox, restart
The runtime keeps selection state in the client. The Flowstep design source provides the visual system and original screen artifact. No user data leaves the browser.
| Layer | Technology |
|---|---|
| Visual design source | Flowstep |
| Interactive runtime | React 19 and Vite |
| Language | TypeScript |
| Tests | Vitest and Testing Library |
| Hosting | Vercel |
The test suite covers selection limits, carry-forward behavior, navigation, restart behavior, and the six-screen journey.
npm test
# Result: 9 passing tests- Open Tuck In.
- Select three ingredients from the fridge shelf.
- Continue to the board and confirm the same three cards appear.
- Follow the constraint and open the lunchbox reveal.
- Restart to clear the selection.
git clone https://github.com/dmustapha/tuck-in.git
cd tuck-in
npm install
npm run devOpen the local URL printed by Vite.
src/
app/ # Screens, selection logic, and test coverage
main.tsx # Application entry point
public/ # Product assets
docs/images/ # Repository screenshots
Built for the Flowstep Challenge.
MIT