Skip to main content

Portal Baterai Lithium E-commerce Platform

A full-stack e-commerce ecosystem for lithium batteries and accessories, spanning a Flutter mobile app, a Next.js web platform, and a Supabase backend with realtime chat, tiered membership, and OCR-assisted payment verification.

  • Full-Stack Developer
  • Mobile Developer (Flutter)
  • Backend Engineer (Supabase)
Portal Baterai Lithium landing page featuring the product catalog and promotions.

Project Overview

Portal Baterai Lithium is a complete e-commerce ecosystem for selling lithium batteries and accessories — LiFePO4 and Li-ion cells, BMS modules, chargers, and balancers — serving both retail and B2B customers. It ships as three connected products backed by a single platform: a Flutter mobile app, a Next.js web application, and a Supabase backend.

The mobile app pairs a customer storefront with a full admin panel in one build. The web side handles a CMS-managed marketing landing page, a public catalog and gallery, and a complete admin dashboard. Everything shares one Postgres database secured with row-level security.

Key Features

  • End-to-End Shopping: Full catalog, cart, and checkout flow with a public product catalog and photo and video gallery.
  • Smart Payment Verification: Manual bank transfer with a 3-digit unique code plus OCR that reads the transfer amount directly from the uploaded proof to speed up confirmation.
  • Made-to-Order Flow: Two-phase down-payment support for custom battery orders.
  • Vouchers & Membership: Dual product and shipping vouchers with per-user and daily quotas, plus tiered membership (Bronze, Silver, Gold, Platinum) applying automatic discounts.
  • Real Shipping Rates: Live rate lookup via RajaOngkir/Komerce with special cargo rules for batteries shipped outside Java.
  • Realtime Chat & Notifications: In-app chat with image and product-card attachments, FCM push, and persistent realtime in-app notifications.

Admin dashboard showing sales overview and order management.

Technical Architecture

  • Mobile: Flutter 3.29 / Dart with Provider for state, go_router for navigation, supabase_flutter for data, and Firebase Cloud Messaging for push notifications.
  • Web: Next.js 14.2 App Router with Tailwind CSS and @supabase/ssr, deployed to Cloudflare Workers via OpenNext.
  • Backend: Supabase — Postgres 15, Auth, Storage, Realtime, and Edge Functions in Deno/TypeScript, all protected with row-level security.
  • Media: Product images served from Cloudflare R2.

Mobile Experience

The Flutter app gives customers the full store in their pocket — browsing the catalog, viewing detailed product pages, chatting with support, and tracking orders — while administrators manage the same operations from a built-in admin panel.

Mobile app product catalog screen.
Mobile app product detail screen.
Admin payment verification panel with OCR-assisted proof review.

Results & Impact

The platform unifies retail and B2B battery sales across mobile and web on a single Supabase backend, cutting payment confirmation time through OCR-assisted verification and driving repeat purchases with tiered membership and voucher incentives.