🍳 YperCook

A simple cooking assistant for the stove. Pick a dish — or just start with four empty burners — set a timer per burner, and let YperCook tell you what to cook where and for how long. When a timer finishes, the burner blinks and an alarm sounds.

Everything runs in the browser. No account, no server, no tracking.

Features

• Graphical stove — your four burners shown as a 2×2 grid. Burner size is visible at a glance (the flame circle scales), so the largest pit reads as the largest.
• Quick timers — open the app and immediately set a time per burner. Tap the time to enter minutes and seconds freely (with a numeric keypad on mobile and quick presets for 5/10/15/20 min).
• Dishes — choose a recipe and its preparations are placed automatically on the best-fitting burner by type (frying → largest, boiling → next, sauce → smallest). Comes with a few sample dishes.
• Per-burner timers — start, pause, resume and reset each burner independently. The flame ring shows progress as it counts down.
• Alarm + notification — when a timer reaches zero, the burner blinks, a beep plays (generated with the Web Audio API), and a browser notification fires if the tab is in the background.
• Drag to swap — drag one burner onto another to swap their preparations or times. Works with mouse and touch.
• Customisable stove layout — set the size of each burner position and save it as your stove.
• Create & edit dishes — add your own dishes, or edit the samples. Your dishes and edits are stored locally in the browser.

Tech

• React 18 + Vite 5
• No backend — state is kept in React and persisted to localStorage
• Audio via the Web Audio API; alerts via the Notifications API

Getting started

npm install
npm run dev      # start the dev server (http://localhost:5173)

Build for production:

npm run build    # outputs to dist/
npm run preview  # preview the production build locally

Requires Node.js 18+.

Data & privacy

All data stays on your device. The app uses localStorage for:

Key	Contents
ypercook.recipes.v3	Your own dishes
ypercook.overrides.v3	Edits you made to the sample dishes
ypercook.layout.v1	Your stove layout (burner size per position)

The sample dishes themselves live in the code (src/recipes.js); storage only holds your additions and changes. Data is per browser and per device — it does not sync. Clearing site data removes it.

Project structure

src/
  App.jsx            App state, overlays, wiring
  Stove.jsx          The 2×2 stove and individual burners
  useBurnerTimers.js Timer logic (accurate via end-timestamps)
  TimePicker.jsx     Free time entry (dialog / bottom sheet)
  Menu.jsx           Slide-over menu (dishes, layout)
  RecipeForm.jsx     Create / edit a dish
  LayoutSettings.jsx Configure burner sizes
  recipes.js         Sample dishes + localStorage helpers
  stoveLayout.js     Positions, sizes, burner types, auto-assignment
  alarm.js           Web Audio beep + browser notifications
  format.js          Time formatting

License

MIT