More project photos (2)
The problem
Online Cake Customiser is a browser web app that lets a customer design a layered cake, choose a size, add a piped message, pick a delivery date, and see the price total update before sending an order request. The builder treats a cake as a stack of flavour layers, with one flavour per layer chosen from 6 flavour options, the first layer included in the base price, and each extra layer adding ₹150. Size sets the base price across 4 size options, from 0.5 kg at ₹450 to 3 kg at ₹2,100; a piped message adds ₹50 and delivery adds ₹0 for standard delivery or ₹150 for express next-day delivery. A colour preview redraws with every change, showing the stack, the message, and the delivery date beside the price breakdown. The demo order totals ₹1,000 for a 1 kg cake with 2 layers in Chocolate and Strawberry, the message Happy Birthday Ana, and standard delivery on 6 Nov 2026.
Ordering a celebration cake by phone or message usually means describing layers, flavours, size, and a date in separate messages, then waiting for a price that has to be recomputed whenever one choice changes. That back-and-forth invites mistakes: a flavour gets written down wrong, a layer count is misheard, or the delivery date is confirmed after the price was already quoted. This customiser puts every choice on one screen with one price rule, so the customer, the builder, and the summary all show the same total. The result is a demonstrable ordering flow students can walk through live, from the first flavour choice to the order request.
Designs a layered cake in the browser and sends an order request.
Follow the working sequence
How it works
The customiser follows a fixed order: choose a size, stack the flavours, add a message, pick a delivery date and speed, check the summary, and send an order request. Size choice loads the base price, from ₹450 for 0.5 kg to ₹2,100 for 3 kg, and the layer count then decides the extra-layer fee, with the first layer included and each further layer adding ₹150. The message field adds ₹50 when text is present and stays at ₹0 when left blank, while the delivery picker records the requested date and applies ₹0 for standard delivery or ₹150 for express next-day delivery. Every change redraws the colour preview and recalculates the same total on all three screens, and the summary screen repeats the size, layers, message, date, speed, and price breakdown for a final check before the request is sent. Sending the request records the choices for bakery confirmation, and no payment is taken at this stage.
- The customer opens the builder and selects a size, with 1 kg at ₹800 as the preset demo size.
- The customer chooses a layer count of 2 layers, then picks Chocolate for layer 1 and Strawberry for layer 2.
- The customer types the message Happy Birthday Ana, which adds ₹50 to the total.
- The customer picks the delivery date 6 Nov 2026 and standard delivery at ₹0.
- The preview redraws the Chocolate and Strawberry stack, and the total shows ₹800 plus ₹150 plus ₹50 plus ₹0, giving ₹1,000.
- The customer opens the summary screen and checks the size, layers, message, delivery date, delivery speed, and price breakdown.
- The customer sends the order request, and the bakery confirms flavour availability and the delivery slot before baking starts.
How it compares
| Approach | Price shown before request | Layer and date choice | Needs bakery confirmation |
|---|---|---|---|
| This online cake customiser | Yes · live total on every screen | Yes · up to 3 layers plus a delivery date | Yes · request only, no payment taken |
| Phone or message ordering | No · price quoted after discussion | Partly · choices arrive in separate messages | Yes · every detail confirmed by hand |
| Static online order form | Sometimes · fixed price list only | Partly · flavours listed, layers not stacked | Yes · form still needs a reply |
| In-store counter ordering | Yes · quoted at the counter | Yes · discussed face to face | No · order taken on the spot, but travel needed |
Tech stack:
- HTML · CSS · JavaScript · single-file browser web app
- JavaScript DOM updates · live preview and price recalculation
- HTML date input · delivery-date picker
- CSS-drawn cake graphic · layer preview inside the demo
- Git · version control
| Parameter | Value |
|---|---|
| App type | Browser web app · single-file demo (design target) |
| Flavour options | 6 flavour options: Chocolate · Vanilla · Strawberry · Butterscotch · Red Velvet · Mango (demo catalogue value) |
| Size options | 4 size options: 0.5 kg · 1 kg · 2 kg · 3 kg (demo catalogue value) |
| Base prices | 0.5 kg ₹450 · 1 kg ₹800 · 2 kg ₹1,500 · 3 kg ₹2,100 (demo catalogue value) |
| Layer range | 1 layer minimum · 3 layers maximum (design target) |
| Extra layer price | ₹150 per extra layer (demo catalogue value) |
| Piped message | 30 characters maximum · ₹50 when text is entered · ₹0 when blank (demo catalogue value) |
| Delivery options | Standard delivery ₹0 · Express next-day delivery ₹150 (demo catalogue value) |
| Demo order | 1 kg · 2 layers · Chocolate plus Strawberry · message Happy Birthday Ana · delivery 6 Nov 2026 · Standard delivery (measured from demo) |
| Demo order total | ₹800 plus ₹150 plus ₹50 plus ₹0 equals ₹1,000 (measured from demo) |
| Payment | No payment gateway connected · orders are requests only (measured from demo) |
| Order storage | Browser session only · no saved order database in the demo (design target) |
Project features
Flavour layer building, live price calculation, a colour cake preview, and delivery-date choice are the four capabilities that define this customiser. The layer builder stacks up to 3 layers, with one flavour per layer from 6 flavour options, so a customer can pair Chocolate with Strawberry or build a single-flavour cake without a separate enquiry for each combination. The live price total recalculates on every change from one fixed rule — base price plus ₹150 per extra layer plus ₹50 for a message plus the delivery fee — so the figure on the builder screen, the layer screen, and the summary screen always matches. The colour preview redraws the stack in the chosen flavours with the piped message underneath, and the delivery-date picker records the requested date beside the chosen delivery speed before the order request is sent.
- [Flavour layer builder] The customer stacks 1 layer to 3 layers, choosing one flavour per layer from Chocolate, Vanilla, Strawberry, Butterscotch, Red Velvet, and Mango. Implemented in the base build.
- [Size and weight choice] The customer picks from 0.5 kg, 1 kg, 2 kg, and 3 kg, and the base price changes with the chosen size. Implemented in the base build.
- [Live price total] The total recalculates on every change from the fixed rule of base price plus ₹150 per extra layer plus ₹50 for a message plus the delivery fee. Implemented in the base build.
- [Colour cake preview] The preview redraws the layer stack in the chosen flavour colours, with the piped message shown beneath the cake and the delivery date beside it. Implemented in the base build.
- [Piped message] The customer types a message of up to 30 characters, which adds ₹50 to the total when text is present and adds ₹0 when left blank. Implemented in the base build.
- [Delivery date and speed choice] The customer picks a delivery date and chooses standard delivery at ₹0 or express next-day delivery at ₹150. Implemented in the base build.
- [Order request summary] The summary screen repeats the size, layers, message, delivery date, delivery speed, and price breakdown for a final check before the request is sent. Implemented in the base build.
Optional on request: a bakery admin screen for editing the flavour menu and price values without touching the builder code. Future scope: saved customer orders with a bakery order list, and a payment step added only after a real payment account is connected.
What is included
- Complete single-file web app source code in HTML, CSS, and JavaScript, with the layer builder, live price rule, and order request summary
- Interactive demo with the preset demo order: 1 kg cake, 2 layers in Chocolate and Strawberry, message Happy Birthday Ana, delivery 6 Nov 2026, total ₹1,000
- Price-rule note from the demo build, documenting the base-flavour double-billing fix
- Project report PDF (background, cake-ordering workflow problems, methodology, worked demo order, limitations)
- Project abstract PDF covering background, methodology, working, requirements, outcomes, applications, and future scope
- PPT presentation for final review
- Viva Q&A preparation document (layer pricing logic, preview synchronisation, delivery-date handling, request-versus-payment design)
Limitations & prerequisites
- No payment gateway is connected: sending a request takes no payment, and a production build needs a real payment account before charging anyone.
- No live bakery inventory is checked: a requested flavour could be unavailable on the chosen date, and the bakery confirms availability before baking starts.
- No delivery fleet or tracking is included: the delivery date is a requested slot, not a guaranteed courier booking, and delivery timing stays subject to bakery confirmation.
- The piped message is capped at 30 characters: longer messages need shorter wording, and message text is shown as typed without spell-checking.
- The layer count is capped at 3 layers: taller stacks are custom requests outside the base builder, not standard options in the demo.
- Prices are demo catalogue values, not a live bakery price list: real prices are set by the bakery at quotation, and the demo total must not be quoted as a bakery price.
- The demo keeps no order database: closing or refreshing the browser clears the form state, so order records need a backend before real use.
Frequently Asked Questions
What does the cake customiser let a customer build?
The customiser lets a customer build a layered cake by stacking up to 3 flavour layers, choosing a size from 0.5 kg to 3 kg, adding a piped message of up to 30 characters, and picking a delivery date with a delivery speed, while a live price total updates with every choice. The colour preview mirrors each choice, so the stack on screen matches the summary that is checked before the request is sent, and the preset demo order shows the full flow without any setup.
How is the price total calculated?
The total follows one fixed rule: base price for the chosen size plus ₹150 for each layer beyond the first plus ₹50 when a message is entered plus the delivery fee, which is ₹0 for standard delivery or ₹150 for express next-day delivery. The demo order applies that rule plainly: ₹800 for 1 kg plus ₹150 for 1 extra layer plus ₹50 for the message plus ₹0 for standard delivery gives ₹1,000. During this build the rule was corrected after an early version charged a flavour fee on every layer, billing the base flavour twice; the fixed rule charges only extra layers.
Does sending an order request charge payment or guarantee delivery?
No, sending an order request takes no payment and guarantees no delivery slot, because the demo connects no payment gateway and no delivery fleet, and the bakery must first confirm flavour availability for the chosen delivery date before any baking starts. The request records the size, layers, message, date, and total for the bakery to confirm, and baking starts only after that confirmation, so the total on screen is a request figure rather than a paid booking.
Can flavours, sizes, or prices be changed for a real bakery?
Yes, the flavour menu, size options, and price values are catalogue data in the demo, so a real bakery can replace flavours, add sizes, or reset all prices without changing the builder logic, layer rules, preview code, or price formula. Optional additions on request include a bakery admin screen for editing that catalogue, a saved order list with a backend, and a payment step connected only after a real payment account exists; none of those are part of the base build.
Is this project suitable for a final-year project?
Yes, Computer Science and IT students can use this project because it combines form-driven interface design, client-side state and price logic, a visual preview that stays in sync with form inputs, and an order-request workflow with clear limits on what the demo does not do. The viva demonstration is easy to verify live: change the layer count, watch the total and preview update together, open the summary, and explain why the request takes no payment.
Components & software requirements
- HTML · CSS · JavaScript · single-file browser web app
- JavaScript DOM updates · live preview and price recalculation
- HTML date input · delivery-date picker
- CSS-drawn cake graphic · layer preview inside the demo
- Git · version control
Delivery information
Built-to-order project. Delivery timeline is shared after order confirmation based on current queue.
Support terms
Complete documentation, setup guide, and viva preparation included. Support for setup and explanation provided.
Download free synopsis (PDF)
Enter your name and WhatsApp number — the synopsis PDF downloads immediately. We may send occasional project updates on WhatsApp; no spam.