Slice of Heaven — Artisanal Patisserie & Bakery Web Application

Overview

Slice of Heaven is a full-stack, editorial e-commerce platform designed for an artisanal cake shop and luxury patisserie. It provides a customer-facing shop for browsing, customizing, and ordering fresh celebration cakes, gateaux, muffins, and special promotional offers, alongside a comprehensive administrative dashboard for catalog management, promotional campaigns, and order dispatch tracking.

Technology Stack & Architecture

The application is built using a decoupled MERN-style (MongoDB, Express, React, Node.js) architecture:

• Frontend: React 19, React Router DOM v7, Vite build system, Axios, lucide-react / react-icons, and custom Vanilla CSS with a centralized Design System.
• Backend: Node.js & Express.js (v5), MongoDB with Mongoose schemas, Multer & Cloudinary integration for image uploads, CORS middleware, and Dotenv configuration.
• State Management: React Context (CartContext.jsx) managing shopping bag items, quantity steppers, cart persistence, subtotal calculation, and dynamic top-bar free delivery threshold calculations.

Design System & Aesthetics

The design follows a Modern Bakery × Premium Editorial × Minimal Luxury aesthetic:

• Color Palette: Warm Alabaster Cream background (#FAF7F2), Deep Espresso Cocoa typography/accents (#2C1A14), Warm Caramel/Terracotta buttons & badges (#C87D55), and Honeycomb Gold highlights (#D4A373).
• Typography: Paired display serif headers (Playfair Display) with clean geometric interface body copy (Plus Jakarta Sans).
• Micro-interactions: Hover elevations, touch-friendly target sizes (min 42px), animated toast notifications, free delivery progress bars, and tabbed filters.

System Architecture

In-Depth Analysis of Every Page

1. Customer-Facing Pages

🏡 Home Page (/ or /Home)

• Hero Slider: Full-width auto-playing banner showcasing fresh artisanal signature cakes and promotional highlights.
• Category Grid: Interactive visual cards linking to targeted cake collections (Birthday Cakes, Wedding Cakes, Chocolate Cakes, Signature Gateaux, Muffins, Cupcakes).
• Middle Story Bar: Highlighting master pastry chef craftsmanship and fresh morning baking guarantees.
• Main Offer Showcase: Displays current active deals with discounted pricing cards.
• Feature Grid: Value propositions highlighting hygienic preparation, climate-controlled courier delivery, and custom cake inscriptions.

🎂 Products Catalog Page (/products or /categories/:type)

• Category Navigation Pills: Scrollable filter bar to switch between categories (All Delights, Birthday Cakes, Wedding Cakes, Chocolate Cakes, Signature Gateaux, Muffins, Cupcakes).
• In-Category Live Filter: Real-time search bar to instantly filter cakes by flavor or name.
• Dynamic Catalog Grid: Displays product cards showing image, weight, category pill, price (Rs.), and quick action buttons.
• State Handling: Loading spinners, error fallback displays with retry buttons, and empty state illustrations when no items match search terms.

🔍 Product Details Page (/product/:slug)

• Visual Showcase: High-res image frame with category pill overlay and trust badges (Hygienic Prep, Safe Delivery, Fresh Ingredients).
• Product Metadata: Displays price, weight in kg, status pill (Freshly Baked to Order), and flavor/recipe descriptions.
• Interactive Stepper: Allows customers to select quantities with live order total preview calculations.
• Actions:
  • Add to Bag: Pushes product into CartContext with feedback toast notification.
  • Order Now: Instantly bypasses cart and navigates directly to the checkout page with single-product order state.

🏷️ Special Offers Page (/offers or /Offers)

• Promotional Banner: Dedicated landing page featuring discounted celebration gateaux.
• Offer Cards: Shows regular vs. discounted prices, calculated percentage savings badge, offer expiration dates, and direct order links for promotional deals.

🛍️ Shopping Bag Page (/cart)

• Free Delivery Progress Bar: Interactive visual bar indicating progress toward unlocking FREE delivery (Rs. 5,000 threshold).
• Item Management: Quantity increase/decrease controls, single-item deletion, and clear bag option.
• Order Summary Card: Breakdown of items subtotal, estimated delivery fee (Rs. 250 or FREE), and total to pay, with a button to proceed to direct checkout.

📋 Checkout & Direct Order Page (/order)

• Custom Cake Message Inscription: Allows customers to specify custom chocolate plaque messages (up to 50 characters) for each cake ordered.
• Delivery Coordinates Form: Collects customer Full Name, Email Address, Contact Number, Delivery Address, and requested Delivery Date.
• Multi-Source Checkout Support: Seamlessly processes orders originating from the cart, direct product “Order Now”, or promotional offers.

🎉 Order Confirmation Page (/order-success)

• Confirmation Receipt: Displays unique Order ID reference number (#XXXXXX).
• Next Steps Timeline: Guides customer through Email Dispatch → Fresh Artisanal Baking → Punctual Courier Delivery.

📜 About Us & Contact Pages (/aboutUs & /ContactUs)

• Shares the story of the bakery, master pastry chefs, high-grade Belgian chocolate sourcing, store contact details, opening hours, bakery location, and feedback forms.

2. Admin Management Portal

🖥️ Admin Dashboard (/admin)

• Central entry point for store managers, providing access to product inventory control, marketing campaigns, and fulfillment dispatch.

📦 Product Inventory Management (/ManageProducts)

• Product Form: Allows admins to publish new cakes to the live store with fields for Product Name, Category dropdown, Price (Rs), Weight (kg), Description, Status (Active/Inactive), and Cloudinary image upload.

🏷️ Promotional Offer Campaign Manager (/ManageOffers)

• Offer Form: Enables creation of limited-time deals with inputs for Regular Price, Discounted Price, automatically calculated percentage savings preview, Expiration Date picker, description, and promotional banner image upload.

🚚 Order Dispatch & Kanban Fulfillment Board (/ViewOrders)

• Kanban Board: Organizes orders across 4 columns: Pending, Processing, Completed, and Cancelled.
• Real-time Status Updating: Dropdown controls on each card to change order status dynamically.
• Order Details: Displays order ID, customer contact info, delivery address, delivery date badge, items ordered breakdown, custom cake messages, and total price.

Results & Impact