Steyn's E-Commerce Platform
End-to-end e-commerce ecosystem for a specialty food retailer — React Native mobile app, React web storefront, serverless backend with Stripe marketplace payments, and real-time order management. Doubled company revenue within 6 months of launch.
The Challenge
Steyn's is a specialty South African food retailer (biltong, droëwors, and dried meats) operating on the Sunshine Coast. They had no digital presence — all sales happened through markets and word-of-mouth. The owner wanted to expand reach without the overhead of a physical storefront.
The brief: build a complete e-commerce operation from scratch. Mobile app for customers, web storefront, order management for the owner, payment processing, delivery logistics, and customer loyalty features — all integrated into a single platform.
Technical Architecture
Three interconnected applications sharing a common backend and database layer
MOBILE APP
React Native 0.79 + Expo SDK 53
TypeScript with strict mode
Jotai atomic state management
AES-256 encrypted token storage
Push notifications via FCM
iOS + Android deployment
WEB STOREFRONT
React 19 + Vite 7
TypeScript 5.9 strict mode
Tailwind CSS 4
8 real-time Supabase subscriptions
Stripe Elements integration
Recharts analytics dashboard
SERVERLESS BACKEND
Firebase Cloud Functions v2
Node.js 22 + TypeScript
12 HTTP-triggered microservices
Supabase PostgreSQL (25+ tables)
SendGrid transactional email
Sentry error tracking
Payment Infrastructure
Stripe Connect marketplace model with connected account transfers
Marketplace Architecture
Implemented Stripe Connect with automatic transfers to the vendor's connected account. Platform handles payment collection, calculates commission, and transfers the vendor's portion automatically on each successful order.
Off-Session Payments
Setup Intents for secure card storage, Payment Intents with off-session confirmation for seamless checkout. Customers save payment methods and reorder with one tap.
Error Classification
30+ user error patterns detected (insufficient funds, expired card, etc.) distinguished from system errors. User errors show friendly messages; system errors trigger Slack alerts and detailed error logging for debugging.
Order Processing Engine
10-step state machine with partial failure recovery
The order processor is a 542-line state machine that handles the complete order lifecycle. Critical steps (validation, payment, transfer) are blocking — if they fail, the order fails. Non-critical steps (rewards, notifications, logging) use non-blocking error handling, allowing orders to complete even if secondary operations fail.
Each step logs its status, enabling detailed debugging and audit trails. If a notification fails to send, the order still completes and the owner is alerted via Slack to manually follow up.
Security & Fraud Prevention
Email Pattern Detection
Detects plus-sign routing (user+spam@gmail.com), known fraudulent email patterns, and blacklisted domains. Prevents account creation from suspicious addresses.
Device Fingerprinting
Tracks device IDs to detect ban evasion. Gmail alias shortening normalises addresses to catch users creating multiple accounts.
AES-256 Token Encryption
Custom hybrid storage solution for mobile — encryption keys stored in device secure enclave, encrypted tokens in AsyncStorage. Solves iOS/Android 2KB secure storage limitation.
Role-Based Access Control
Admin and owner roles with permission checks on sensitive operations. Database Row-Level Security policies enforce tenant isolation.
Loyalty & Rewards Engine
Steyns Cash Digital Wallet
Virtual currency system with real-time balance tracking. Credits from referrals, promotions, or refunds can be applied at checkout with atomic balance deduction.
Multi-Type Rewards
Supports percentage discounts, fixed dollar amounts, and free shipping rewards. Multiple rewards can stack with validation for expiry dates and usage limits.
Viral Referral System
Unique 8-character referral codes with collision detection. Automated cash reward distribution to both referrer and referee. Push notifications on successful conversions.
Technology Stack
| MOBILE | React Native 0.79, Expo SDK 53, TypeScript 5.8, Jotai, React Navigation 6.x |
| WEB | React 19, Vite 7, TypeScript 5.9, Tailwind CSS 4, Recharts |
| BACKEND | Firebase Cloud Functions v2, Node.js 22, TypeScript 4.9 |
| DATABASE | Supabase PostgreSQL, 25+ tables, real-time subscriptions, Row-Level Security |
| PAYMENTS | Stripe Connect (marketplace), Payment Intents, Setup Intents, connected accounts |
| INTEGRATIONS | SendGrid, Firebase Auth, FCM Push Notifications, Sentry, Crashlytics |
Results
"We went from brick and morter and word-of-mouth to a proper online business. Orders come in while I sleep. The app handles everything."
— Steyn, Owner
Business Impact
- • 2x revenue growth within 6 months
- • 550+ active app users
- • 50+ weekly orders processed
- • First digital sales channel established
Technical Delivery
- • iOS + Android apps live on stores
- • Web storefront with real-time sync
- • Automated order processing pipeline
- • Owner dashboard with analytics
Need an E-Commerce Platform?
From payment processing to mobile apps — let's build your complete solution.
GET IN TOUCH