Basecart

Inspiration

The inspiration behind BaseCart came from recognizing a gap in the market for small businesses. Many cafes, restaurants, and local shops struggle with expensive, complex e-commerce platforms that require technical expertise to set up and maintain. The goal was to create a streamlined, accessible platform that allows business owners to launch their online ordering presence quickly, without the overhead of traditional solutions. Golden Hour Coffee was envisioned as the flagship demo store to showcase what's possible with BaseCart.

What It Does

BaseCart is a multi-tenant e-commerce platform designed specifically for food and beverage businesses. It provides a complete solution for online ordering, menu management, and order fulfillment.

For Business Owners:

• Business Portal - A comprehensive admin dashboard where owners can manage their store
• Menu Management - Full CRUD capabilities for menu items including names, descriptions, prices, categories, and availability toggles
• Order Management - Real-time order tracking with status updates (pending, confirmed, preparing, ready, completed, cancelled)
• Business Settings - Store customization including business details, contact information, and account management
• Google Authentication - Secure login via Google OAuth for business owners

For Customers:

• Storefront Experience - Beautiful, responsive storefronts for each business (accessible via /store/{business-slug})
• Shopping Cart - Persistent cart functionality with quantity management
• Order Tracking - Customers can track their orders using order numbers
• Order History - View past orders with full details

Demo Store - Golden Hour Coffee:

Golden Hour Coffee serves as the demonstration store showcasing BaseCart's capabilities. It features a curated menu of espresso drinks, cold brews, pastries, and merchandise, styled with a warm retro aesthetic.

How It Was Built

BaseCart was built entirely in Mocha. The app uses a modern tech stack optimized for performance and developer experience:

Frontend:

• React 18 with TypeScript for type-safe component development
• React Router for client-side navigation between storefront, admin, and order pages
• Tailwind CSS for utility-first styling with custom theme variables
• Context API for state management (Cart, Business, Sidebar, Theme contexts)
• Shadcn-style UI components built on Radix UI primitives

Backend:

• Cloudflare Workers for serverless API endpoints
• Hono framework for routing and middleware
• Cloudflare D1 (SQLite-based) for database storage

Authentication:

• Mocha Auth SDK for secure Google OAuth integration
• Session-based authentication for admin portal access

Architecture: The application follows a multi-tenant architecture

Challenges That Were Encountered

Some technical challenges addressed during development:

• Order-Business Linking - Initially, orders placed on the Golden Hour storefront weren't appearing in the admin portal. This was traced to the checkout flow not passing the businessId parameter when creating orders. The fix required updating the checkout component to fetch and include the correct business ID.

• React Hooks Rules Compliance - During the onboarding redirect implementation, useState hooks were initially placed after conditional returns, violating React's rules of hooks. This was corrected by moving all hooks before any conditional logic.

• Onboarding Flow Logic - Users who had already onboarded their business were still seeing the onboarding page. A redirect check was implemented to send existing business owners directly to the admin dashboard.

Accomplishments

• Built a fully functional multi-tenant e-commerce platform from concept to deployment
• Created a polished demo store (Golden Hour Coffee) with complete branding and menu
• Implemented secure Google OAuth authentication for business owners
• Developed a comprehensive admin portal with dashboard, orders, menu, and settings
• Built responsive storefronts that work on both desktop and mobile devices
• Achieved seamless order flow from customer checkout to business fulfillment
• Created reusable component library with consistent design language

What Was Learned

• Multi-tenant Architecture Patterns - Designing database schemas and API queries that properly isolate data between tenants while maintaining performance
• Context-Based State Management - Effectively using React Context for managing global state like cart contents, sidebar collapse, and business data
• Authentication Flow Integration - Implementing OAuth flows with proper session handling and redirect logic
• Component Composition - Building complex UIs from smaller, reusable components following DRY principles
• Cloudflare Workers Ecosystem - Leveraging D1 database and Workers for serverless, edge-deployed applications

What's Next for BaseCart

• Email Notifications - Send order confirmations and status updates to customers
• Analytics Dashboard - Provide business owners with sales metrics and insights
• Custom Branding - Allow businesses to customize colors, logos, and storefront themes
• Customer Accounts - Allow customers to create accounts for faster checkout and order history
• Payment Integration - Add integration for processing payments [later]

Built With

• cloudflare-d1
• cloudflare-workers
• hono
• lucide-icons
• mocha
• radix-ui
• react
• react-router
• tailwind-css
• typescript