Development of Bumbu E-commerce Platform for Organic Groceries

Bumbu is a premium organic grocery e-commerce platform built for the Kenyan market. It connects consumers directly with 50+ partner farms, offering same-day delivery of fresh produce across Nairobi with M-Pesa integration, real-time order tracking, and a quality guarantee.

Nairobi’s grocery landscape is fragmented. Consumers face long queues at supermarkets, inconsistent produce quality from street vendors, and existing delivery apps that treat groceries as an afterthought — broken cold chains, limited organic options, and checkout flows that don’t support M-Pesa natively.

Kenyan families needed a purpose-built platform that understands local payment habits, sources directly from farms, and delivers fresh produce with the same reliability as ordering a ride.

Bumbu is a full-stack e-commerce platform designed around three principles:

Farm-direct sourcing — No middlemen. Products are traceable from field to doorstep.

Local-first checkout — M-Pesa, Visa, Mastercard, and cash on delivery. The price you see is the price you pay.

Quality guarantee — Every item is inspected before dispatch. If it arrives below expectations, it’s replaced or refunded.

Frontend — React 18, TypeScript, Vite

Styling — Tailwind CSS, Radix UI primitives

Routing — React Router v7

Backend — Supabase (PostgreSQL, Auth, Storage)

Auth — Passwordless magic link (Supabase Auth)

State — React Context API with useReducer

React + TypeScript — Type safety across the entire codebase catches bugs at compile time, not in production.

Supabase — Provides auth, database, and storage in one platform. Row Level Security policies enforce data isolation at the database level, not the application level.

Vite — Sub-second hot module replacement during development. Production builds under 6 seconds.

Tailwind CSS — Utility-first styling eliminates CSS bloat. Combined with Radix UI for accessible, unstyled primitives.

No passwords to remember or leak. Users enter their email and receive a magic link. On click, they’re authenticated with a persistent session. Profiles are created automatically on first signup, and sessions persist across browser reloads.

The cart works for everyone — logged in or not. Guest users have their cart saved locally, while authenticated users have theirs synced to the database with real-time stock validation. When a guest signs in, their local cart merges seamlessly with their account.

A 3-step flow designed to reduce abandonment:

Shipping — Select or create a delivery address. Users can save multiple addresses and set a default.

Payment — Choose M-Pesa, card, or cash on delivery.

Review — See the full breakdown before confirming.

Orders over Ksh 2,000 get free delivery. A 16% VAT is calculated transparently. Address snapshots are stored with each order so future address changes don’t affect past records.

Users can browse by category, filter by price range or organic status, search by name, and see ratings at a glance. Only in-stock, active products are shown.

Every order gets a unique tracking number. Users can follow their order through each stage — from pending to delivered — and view their full history with detailed breakdowns of items, shipping, and tax.

The database is built across 11 migrations covering user profiles, product categories, the full product catalog, shopping carts, shipping addresses, orders, and order line items.

Every table is protected by Row Level Security. Products and categories are publicly readable, but all user data — carts, addresses, orders — is strictly scoped so users can only access their own records. Performance is optimized with targeted indexes on foreign keys and frequently filtered columns.

The frontend is organized into clear layers: reusable UI components, context providers for auth and cart state, a service layer that abstracts all backend communication, and screen-level components for each page.

State management uses React’s Context API with the reducer pattern, giving predictable state updates for both authentication flow and cart operations. The service layer ensures that no UI component communicates with the database directly — if the backend changes, only one layer needs updating.

The landing page uses a scroll-driven storytelling approach:

Stacking cards — Story chapters roll over each other as the user scrolls, creating a layered narrative effect.

Synchronized visuals — The opposite column features a sticky image panel that swaps visuals in sync with the active story chapter.

Horizontal review scroll — Customer testimonials auto-scroll horizontally, creating movement without user interaction.

Product showcase — A live product grid with filter buttons and “Add to Cart” interactions gives visitors an immediate feel for the shopping experience.

Typography uses three Google Fonts: Outfit for headings, DM Sans for body text, and Instrument Serif for accent italics.

Server-side rendering — The current single-page app approach means no SEO for the landing page. A framework like Next.js or Remix would solve this.

Optimistic UI updates — Cart operations currently wait for the database response. Optimistic updates would make interactions feel instant.

Image optimization — Product images are served from Unsplash. A proper CDN with responsive image sizing would improve load times.

Error boundaries — Adding error boundaries would prevent a single component crash from taking down the entire page.

Testing — No test suite exists yet. Integration tests for the checkout flow and unit tests for the service layer would catch regressions early.

Bumbu demonstrates that a modern, full-stack e-commerce platform can be built with a lean stack:

61 TypeScript source files powering a complete shopping experience

11 database migrations defining a secure, normalized schema

Sub-6-second production builds via Vite

Zero password storage — magic link auth eliminates an entire class of security vulnerabilities

Dual-mode cart that never loses a guest user’s selections

Local-first payment — M-Pesa integration meets users where they are

The platform is production-ready for user acquisition, with a clear path to scaling through server-side rendering, payment gateway integration, and real-time delivery tracking.