E-Commerce Platform

Overview

Canes Grocery is a lightweight but extensible online grocery platform designed to simulate real-world local delivery workflows. It focuses on practical full-stack engineering: a static, fast storefront paired with a modular Express API, Firebase-backed persistence, and payment flows suited to the Kenyan market.

The system enables customers to browse products, manage a persistent cart, check out with Paystack or cash on delivery, and track orders—while giving store operators an admin layer to manage products, orders, and users.

Key Features

• Product Catalog: Browse groceries by category with search and filtering across produce, dairy, bakery, snacks, and drinks.
• Shopping Cart Engine: Add, update, and remove items with cart state persisted in the browser.
• Checkout & Payments: Pay online via Paystack (KES) or place orders with cash on delivery; delivery fees based on order total.
• User Authentication: Register, sign in, and manage profiles with JWT-backed sessions after Firebase Auth validation.
• Order Management: Submit orders with customer and delivery details; persist order history for customers and admins.
• Admin Dashboard: Role-based access for managing products, orders, and registered customers.
• RESTful API Design: Clean, modular backend endpoints for storefront, auth, orders, and admin operations.

Technical Architecture

Canes Grocery is designed with an API-driven architecture that serves a static frontend from the same Node service, emphasizing separation of concerns and straightforward deployment on Render.

Core Design Principles

• Layered Architecture

  • Static client (HTML/CSS/vanilla JavaScript) for UI, cart, and checkout.
  • Express routes for request handling (/api/auth, /api/products, /api/orders, /api/admin).
  • Firebase Admin SDK + Firestore for data access and user validation.

• API-First Design

  • RESTful endpoints for products, auth, orders, and admin resources.
  • Stateless JWT sessions after login for scalable client–server interaction.

Database Design

• Firestore collections for users, products, and orders.
• Product catalog seeding from JSON when the store collection is empty.

Payment & Notification Flow

• Paystack popup integration for card/mobile payments in KES.
• Cash on delivery path for orders without online payment.
• Order confirmation UI with reference IDs and payment method labels.

Extensibility

• Structured to support future integrations (inventory sync, SMS delivery updates, analytics, loyalty programs).

System Workflow

1. Customer browses the catalog and filters by category or search.
2. Items are added to the cart and stored locally until checkout.
3. User registers or signs in; backend validates via Firebase Auth and issues a JWT.
4. Checkout collects delivery details and selects Paystack or cash on delivery.
5. Order is saved to Firestore via /api/orders (Paystack callback or direct COD placement).
6. Admin reviews and manages orders, products, and users through the dashboard.

Engineering Focus

This project emphasizes:

• Full-stack development using JavaScript (vanilla frontend + Node.js backend).
• Scalable API and service design with clear route grouping.
• Data modeling for e-commerce workflows in Firestore.
• Regional payment integration (Paystack) alongside offline payment options.
• Clean separation between static presentation, API logic, and Firebase data access.