Digital product · Online menu and ordering
Batata com Granulado
Digital menu and ordering app for a stuffed-potato and dessert delivery brand, built with SvelteKit and Svelte 5. Customers browse the menu, customize each item and send a complete, priced order through WhatsApp.
- Period
- 2026
- Role
- Development
Context
Food orders get complicated quickly: combos with swaps, items that require a flavor, paid add-ons, notes and delivery or pickup. The app makes that kind of order simple to build on a phone, and it arrives structured and correctly priced.
Approach
The menu as typed data
Products, categories, add-ons and combos live in a typed catalog. A combo is described as fixed parts plus swappable slots, each with its default item and the options allowed in its place.
Combo customization with fair pricing
Swapping an item inside a combo adds only the price difference between the chosen option and the default one; choosing something cheaper never turns into a discount.
A single reactive cart
One store built with Svelte 5 runes ($state and $derived) holds the cart lines, quantities, subtotal, delivery fee and total. Adding an item with the same configuration merges it into the existing line instead of duplicating it.
A guided product sheet
Required flavors are validated before adding, moving focus to the missing choice; add-ons and a 120-character note are optional. If the sheet is closed before adding, the configuration is kept as a draft.
Feedback at every step
Cards confirm when an item is added, changes are announced to screen readers, emptying the cart asks for confirmation and the checkout confirms when the order has been sent.
Checkout through WhatsApp
Delivery or pickup, name and address validation and payment method. The order is serialized into a structured WhatsApp message with items, combo contents, swaps, add-ons, notes and totals.
Quality
- Responsive images: product photos in 360, 720 and full-size versions through srcset, a hero banner served at three widths with high fetch priority, and lazy loading below the fold.
- Self-hosted WOFF2 font subsets (latin and latin-ext), preloaded in the document head.
- Product sheets built on the native dialog element and adapted to the on-screen keyboard with the VisualViewport API, keeping focused fields in view.
- Animations respect prefers-reduced-motion.
Stack
- SvelteKit
- Svelte 5
- TypeScript
- Vite
