Menu page
Available items with image and price. Items marked unavailable are hidden and cannot be ordered.
PROJECT 03 · ORDERING WEBSITE
D'Rolls
Pancake Roll.
D'Rolls is an ordering website for a pancake roll business, built with Laravel 11 and Tailwind CSS for the Creative Product and Entrepreneurship (PKK) subject at SMK Negeri 4 Padalarang. Our team of four ran the pancake roll business together: two members handled the kitchen, one handled logistics, and I built the website. Visitors browse the menu, fill a cart, and check out through WhatsApp with the order message prepared for them.
FRESHLY MADE · SMALL BATCH
A little
something sweet.
something sweet.
PANCAKE ROLL / MENU ↗
01 / CONTEXT
A simple store for a real seller.
A small food seller takes orders by chat. The site lets customers see the menu and prepare an order themselves, so the seller receives one clear message instead of piecing the order together.
02 / FEATURES
From the menu
to WhatsApp.
Session cart
Add items, change quantities with plus and minus, remove one item, or clear the cart. The navbar shows the item count.
Selective checkout
Choose which cart items to order and see the total update immediately.
WhatsApp message
Checkout opens wa.me with the items, quantities, and total already written.
Responsive pages
Layouts for mobile and desktop, flash notifications, and a custom 404 page.
Feature tests
PHPUnit tests for the cart flow, validation, server-side prices, and the main pages.
SCREENSHOTS
How it looks.
DESIGN DECISIONS
Choices I made, and why.
Prices always come from the server
The browser sends only a menu id and a quantity. Name and price are read from the server-side catalog, so a price edited with inspect element has no effect. A feature test covers this case.
Input is validated on the server
A quantity must be a whole number from 1 to 99 and the menu item must be available. Anything else is rejected with a clear message in Indonesian.
No database, on purpose
The menu lives in a config file and the cart in the session as menu id to quantity. For a small seller who takes orders by WhatsApp this is enough, and it is easy to deploy. The cost is that orders are not stored; saving them is the first item on my improvement list.
Checkout through WhatsApp
The seller already takes orders on WhatsApp, so checkout opens a chat with the order written out: items, quantities, and the total. This fits how the business works without building a payment system.
The seller number stays out of the repository
The WhatsApp number is read from the .env file instead of being written in the code, so a personal number is not published with the source.
03 / NEXT IMPROVEMENTS
What I would add next.
Save orders in a database and add an admin panel to manage the menu, so the seller no longer edits a config file. After that: online payment, and search and categories for a longer menu.