Ali's Cakes & Bakes

Project Overview

Ali's Cakes & Bakes is a custom-built, multi-category food ordering platform designed to digitize a traditional bakery business. Unlike rigid template-based stores, this solution offers a highly flexible ordering flow tailored for fresh food—handling everything from instant fast-food orders (Burgers, Pizza) to scheduled cake deliveries.

Problem / Goal

The client, a local bakery brand, struggled with managing orders across fragmented channels (phone, WhatsApp, in-store). They needed a unified digital storefront to automate order intake, manage diverse product categories (Cakes, Pizza, Pastries, Burgers), and streamline kitchen operations. The goal was to eliminate manual errors and provide a premium, app-like ordering experience on the web.

System Architecture

The platform is built on a modern, decoupled architecture to ensure speed and manageability.

• Next.js Frontend: A consumer-facing web app built for speed and SEO. It uses Client-Side Rendering (CSR) for dynamic user interactions and Server-Side Rendering (SSR) for critical landing pages.
• React Admin Panel: A separate, secure Single Page Application (SPA) exclusively for the business owner and staff to manage day-to-day operations.
• RESTful API Integration: A custom API layer connects the two frontends, ensuring that stock levels, prices, and order statuses are synchronized in real-time.

Core Features

• Dynamic Product Listing: Users can browse a wide array of categories including Cakes, Pizza, Pastries, and Burgers, each with optimized filtering and search capabilities.
• Smart Cart & Checkout: A Redux-managed cart system that persists user state. The checkout flow allows users to select delivery slots, add cooking instructions, and securely place orders.
• Order Tracking System: A 'Swiggy/Zomato-style' tracking interface where customers can see real-time updates (Order Received -> Preparing -> Out for Delivery).
• User Profile & History: Authenticated users can manage saved addresses, view past orders, and quickly re-order their favorite items.

Technical Implementation

• Polymorphic Database Schema: Designed a flexible database to handle complex product variations (e.g., a Cake needs 'Weight', 'Flavor', 'Msg on Cake' vs. a Burger needing 'Cheese/No Cheese').
• Real-Time Sync: Implemented an efficient polling/websocket-based status updater that reflects kitchen actions instantly on the user's tracking page.
• Dynamic UI Components: A flexible component system that dynamically renders form fields based on the selected product category.

My Contribution

Operating as an independent consultant and Full Stack Developer, I delivered end-to-end value.

• Full Stack Implementation: Wrote 100% of the Frontend (Next.js) and Admin (React) code.
• UI/UX Design: Designed a mobile-first interface, recognizing that 90% of food orders would come from smartphones.
• Infrastructure & Deployment: Set up the hosting environment, managed domain DNS configurations, and optimized the build pipeline for reliable uptime.

Impact

The project successfully transformed a brick-and-mortar bakery into a digital-first brand. The platform now handles daily order volumes autonomously, reducing the need for manual phone-taking and allowing the kitchen to focus purely on food preparation.