Mobility & Real-Time Chat✦ Flutter Developer

Urban Koala

Smart Parking Booking & Sub-100ms Real-Time Community Messaging

All-in-one mobility platform combining interactive map-based parking slot reservation, dynamic availability heatmaps, and sub-100ms instant chat powered by Laravel Echo and WebSockets.

Live on StoresPlatform Availability
★ 5.0/5User Experience Rating
99.9%Production Crash-Free Rate

Executive Product Overview & Scope

Urban Koala solves urban parking friction by connecting drivers with commercial and residential parking owners. Drivers can discover available spaces in real-time, view pricing tiers, book time slots, make in-app payments via Stripe Live, and communicate directly with property owners via sub-100ms instant messaging. As the Flutter Developer, I implemented the full client-side real-time communication pipeline, interactive map clustering, and checkout flows.

Core Engineering Contributions & Technical Execution

#01

Engineered real-time bidirectional messaging pipeline with Laravel Echo and Pusher WebSockets, delivering sub-100ms chat latency.

#02

Built interactive Google Maps discovery interface featuring marker clustering, radius filtering, walking distance indicators, and slot status pins.

#03

Implemented secure Stripe Live checkout flow supporting 3D Secure verification, Apple Pay/Google Pay tokens, and instant booking receipts.

#04

Architected an optimistic UI state layer with RxDart BehaviorSubjects and an offline message queue that automatically flushes upon reconnection.

#05

Developed rich media attachment handling with client-side image/video compression and background upload retry workers.

#06

Integrated dynamic reservation countdown timers and auto-release mechanics to prevent parking slot hoarding.

#07

Integrated Firebase FCM channel subscriptions for real-time booking status notifications and direct chat alerts.

Key Technical Features & Highlights

Laravel Echo & Pusher WebSockets Sub-100ms Live Chat Pipeline
Interactive Google Maps Parking Slot Discovery & Clustering
Stripe Live In-App Payment Gateway & 3D Secure Authentication
RxDart Reactive Stream Management with Optimistic UI Dispatching
Offline-First Message Queue with Auto-Reconnection & Sync
Real-Time Push Notifications via Firebase FCM & Channel Subscriptions

The Engineering Challenge

Handling rapid bi-directional WebSocket messaging events simultaneously with high-density Google Maps rendering caused frequent state re-rendering lag. Furthermore, when users navigated underground parking garages with spotty cellular reception, messages were getting dropped and Stripe payment confirmations were prone to race conditions.

The Architectural Solution

Engineered an RxDart event-stream manager that decouples WebSocket payload reception from UI widget trees, throttling map updates and using optimistic UI dispatches for chat messages. Implemented an exponential back-off reconnection algorithm backed by local SQLite message buffers to guarantee message delivery order. Wrapped Stripe payment intents in a resilient webhook verification polling loop with localized error fallbacks.

Tangible Results & Measurable Impact

Maintained sub-100ms message delivery latency under active concurrent chat traffic. Achieved 100% payment verification accuracy with zero lost booking transactions. Shipped to Google Play Store and Apple App Store with 99.9% crash-free stability and a 5.0/5 user rating.

Technologies & Architectural Stack

Flutter
Dart
RxDart
Laravel Echo
Pusher WebSockets
Google Maps SDK
Stripe Live
Dio
Provider
Cached Network Image
Back to All Projects
Google Play App Store