Dapur Piqa
An ordering system for a home bakery: menu to checkout to invoice, plus the kitchen board that runs it.
- Role
- Design, Build, Launch
- Year
- 2026
- Type
- Online ordering & operations
- Stack
- Next.js, React, TypeScript, Tailwind CSS, SQLite
- Live site
- dapur.piqa.my
The problem
Orders arrived as scattered chats. What to bake, what was paid and what was delivered lived in people's heads.
What I built
01
Ordering that fits a small kitchen
Customers pick from the menu, choose delivery or pickup, and pick a preferred date and time slot. The cart stays out of the way until it is needed.
02
Checkout without an account
There is no sign-up step. Customers leave their details, choose a delivery area across KL, PJ and Subang, then confirm payment over WhatsApp. FPX, DuitNow QR and e-wallets are listed as options.
03
The kitchen board
Staff see every order in one place and move it along: pending, confirmed, baking, out for delivery, completed. Paid and unpaid are marked on the same screen, so the question "has this one paid?" has an answer.
04
A catalogue staff can edit
Cakes can be added, edited, hidden or deleted, with photo uploads checked by file content rather than by name. Staff sign in with individual accounts, and a Staff page adds, resets and removes them.
05
Invoices and catering enquiries
Every order has a page with a downloadable PDF invoice. Catering enquiries land in the same board, so they do not get lost in a chat thread.
Details that matter
A logo drawn from code
The mark is a whole banana and a chocolate chip, drawn as SVG rather than dropped in as a file.
Mobile first
Most customers order from a phone, so the layout is designed at 390px wide and widened from there.
A small animated kitchen
An animated backdrop and scroll-driven reveals keep the shopfront feeling warm without slowing it down.
A back-to-top ring
A scroll-progress ring that fills as the page is read, and returns to the top in one tap.
Uploads checked properly
Photos are accepted by their actual file content, not by the extension on the file name.
End-to-end browser tests
The ordering flow is covered by browser tests, so a change to checkout does not quietly break it.
Outcome
- The whole order journey - menu, cart, checkout, invoice - runs online.
- Staff track orders, payment status and catering enquiries in one board.
- The catalogue can be updated by staff without a developer.
- Payments are confirmed over WhatsApp, with FPX, DuitNow QR and e-wallets listed.
Have a process that deserves better?
Tell me how the work runs today, and I'll tell you what I would build first.