E-Commerce App
Flutter + WooCommerce + Admin Dashboard
E-Commerce Client
iOS + Android (Flutter)
1.2.10+37
WooCommerce + Laravel Portal
E-Commerce Mobile App
Overview
Full E-Commerce App with Admin Dashboard
This is a full-featured WooCommerce e-commerce mobile application built in Flutter, serving as both a customer-facing shopping app and a comprehensive admin management dashboard. The app connects to a WooCommerce/WordPress backend via dual API surfaces — WooCommerce REST API and a custom Portal API — delivering a native mobile experience with real-time chat, push notifications, Stripe/Revolut payments, deep linking, and Klaviyo email marketing integration.
The dual-role architecture means store owners manage inventory, orders, and customers from their phone, while customers enjoy a native shopping experience with push notifications, in-app chat support, and seamless checkout via Apple Pay, Google Pay, or credit card.
Built on Clean Architecture principles with BLoC/Cubit state management, the app spans ~595 Dart files, 100+ screens across 26 page directories, 41 use cases, and a 542-line dependency injection container.
Tech Stack
The Challenge
What the Client Needed
A native mobile experience for customers — the mobile web store had lower conversion rates and no push notification support
Full admin dashboard on mobile — store owners needed to manage orders, products, and customers without desktop access
Real-time customer support via in-app chat with voice messages and file attachments
Multiple payment gateways (Stripe + Revolut) with Apple Pay and Google Pay for frictionless checkout
WooCommerce compatibility — must work with the existing product catalog, orders, and customer data without disruption
Email marketing integration with Klaviyo for targeted campaigns driven by in-app user activity data
What We Built
Key Features Delivered
Full E-Commerce Shopping Experience
Product browsing with category filters, image galleries with variations, shopping cart with quantity management, favourites/wishlist, coupon application, and multi-gateway checkout. Guest login support for browsing without registration.
Admin Dashboard
Comprehensive store management: sales reports with fl_chart visualisations, order management with refunds, product CRUD with rich text editing, category management, customer management, coupon creation, and slider/banner customisation.
Real-Time Chat System
In-app messaging between customers and admin with text, file attachments (images, documents), voice messages via record + audioplayers, conversation threading, and offline chat caching via ChatCacheService.
Dual Payment Gateways
Stripe integration with Apple Pay and Google Pay via flutter_stripe, plus Revolut as an alternative gateway. Admin-configurable payment settings and transaction/payout dashboards.
Push Notifications + Deep Links
Firebase Cloud Messaging with local notification display, notification history with read/unread tracking, badge widget for unread counts, and deep link routing from notifications to relevant screens.
Product Deep Linking
Product URLs open directly in the app via DeepLinkService. Android Intent Filters + iOS URL Schemes with graceful fallback to web browser.
Shopify Import + Barcode Scanning
One-click product migration from Shopify to WooCommerce via ShopifyToWooCommerceTransformer. Barcode scanning via mobile_scanner with BarcodeLookupService for rapid product lookup.
Analytics & Klaviyo Marketing
Three-tier analytics: Firebase Analytics, Facebook App Events, and custom Portal activity tracking with periodic bulk upload. Klaviyo integration for subscription management, event tracking, and mobile campaigns.
Screens Delivered
100+ Screens Across Customer & Admin Journeys
Product Browsing, Category Filters, Search
Product Detail with Gallery, Variations, Reviews
Shopping Cart, Wishlist, Coupon Application
Checkout with Stripe / Revolut / Apple Pay
Chat: Conversations, Messages, Voice, Attachments
Admin: Sales Reports, Dashboard Metrics
Admin: Order Management, Status Updates, Refunds
Admin: Product CRUD, Rich Text Editor, Image Upload
Admin: Customers, Coupons, Sliders, Categories
Notifications, Profile, Settings, Deep Link Targets
Architecture
How It's Built
Dual API Architecture
Two distinct API surfaces with independent authentication. WooCommerce REST API for core e-commerce data (consumer key/secret auth), and a Custom Portal API (Laravel, bearer token) for chat, notifications, Stripe orchestration, and Klaviyo.
├── WooCommerce API (RestApi client)
└── Portal API (PortalApiClient)
State Management
Deliberate split: 34+ Cubits for straightforward CRUD (Auth, Cart, Products, Favourites, Chat, Notifications), and 6 BLoCs for complex event-driven workflows (Order processing, Product Variations, Attributes, Grouped Products). All wired via 542-line GetIt DI container.
Caching Architecture
Multi-layer caching: ProductCacheService for listings and categories, DashboardCacheService for admin metrics, ChatCacheService for offline message access, and persistent CartService that survives app restart. All initialised before DI setup.
Scale Metrics
~595
Dart Files
100+
App Screens
41
Use Cases
34+
Cubits
6
BLoCs
50+
Global Widgets
Results
What We Shipped
~595 Dart files delivering a complete dual-role e-commerce app (customer + admin)
41 use cases covering the full business domain from auth to refund processing
Dual API integration seamlessly bridging WooCommerce REST and custom Portal APIs
Real-time chat with voice messages, file attachments, and offline persistence
Multi-gateway payments via Stripe and Revolut with native Apple Pay / Google Pay
Cross-platform deep linking enabling product URL sharing that opens in-app
50+ reusable global widgets accelerating new screen development
Shopify-to-WooCommerce product import for seamless store migration
Klaviyo email marketing integration with event tracking and mobile campaigns
Three-tier analytics: Firebase, Facebook App Events, and custom server-side tracking
Need a WooCommerce mobile app or full e-commerce solution?
