SAI Cowork Mobile
Flutter-based Mobile Coworking Client Integrating REST APIs for Real-time Workspace Bookings and Member Portals
01 — Overview
Overview
a. Mobile Coworking Solution
Members of modern coworking spaces require frictionless on-demand room reservations and check-ins directly from mobile interfaces. A web-only portal creates entry barriers and slows down spontaneous bookings.
The Developers engineered the SAI Cowork mobile client to resolve this challenge. Acting as a dedicated client consuming central REST APIs, the mobile application allows users to discover the eight active Indonesian locations, filter workspaces by type (Desk, Dedicated Room, Meeting Room), choose booking intervals, and track active reservation codes in real time.
b. API Integration Layout
The mobile client is built on a decoupled architecture, communicating exclusively via JSON REST endpoints. When a user requests space details, the app dispatches authenticated HTTP requests to the centralized backend API.
This architecture keeps the mobile client lightweight. The app handles user input, parses JSON payloads into local Dart models, updates the UI state, and caches non-volatile data, leaving payment validation and database processing to the existing backend services.
- Designed and developed the cross-platform mobile application architecture using Flutter and Dart
- Implemented state management with Riverpod to handle real-time workspace availability and membership states
- Built secure local token storage using Flutter Secure Storage for member authentication persistence
- Integrated Dio HTTP client with interceptors for automatic JWT renewal and error-handling pipelines
- Connected the mobile application with the central Laravel REST API to fetch locations, spaces, and reward catalog data
- Structured the booking transaction flow supporting room reservations, voucher validation, and payment routing
02 — Problems & Challenges
Problems & Challenges
a. Persistent Session & Membership State Security
Retaining active member authentication tokens securely across application restarts is critical. Storing JWTs or sensitive user data in standard local storage exposes members to security vulnerabilities.
The Developers resolved this by integrating the flutter_secure_storage package. This encrypts access tokens locally using Keychain (iOS) and Keystore (Android). The application reads the token during startup, checks validity via a quick handshake request, and automatically redirects the user to either the login screen or the main dashboard.
b. Offline State Handling & Unreliable Networks
Mobile users booking meeting rooms frequently face unstable cellular connections inside buildings. Failed API requests can cause the interface to freeze or display incorrect booking statuses.
To maintain a smooth user experience, the Dio HTTP client was configured with a custom interceptor. The interceptor catches connection timeouts, logs the errors, and serves cached data for list views. If a booking submission fails due to network loss, the application notifies the user and queues the transaction retry.
03 — Project Goals
Project Goals
a. Booking Latency Optimization
The primary goal was to reduce booking steps down to a few clicks. The developers structured the reservation flow to load location catalogs and compute totals locally before finalizing requests, ensuring rapid checkout.
b. Membership Retention and Rewards
Retaining customers requires a gamified rewards model. The mobile client implements a reward marketplace interface, letting members fetch eligible vouchers, check point balances, and claim rewards instantly.
04 — Design Process
Design Process
a. Interface Layout and Navigation Blueprint
The Developers mapped out the user journey, dividing it into four main tabs: Explore (locations and rooms), Bookings (active and historic reservations), Rewards (point balances and vouchers), and Profile (personal data and settings). UI transitions were kept simple to optimize rendering on lower-end devices.
b. API Schema and Contract Definitions
Before coding, the developers established API contracts with the backend team. Every endpoint payload structure was mapped out—including dynamic booking pricing, voucher codes, location coordinates, and operational hours—ensuring seamless client-server communication.
05 — Usability Testing
Usability Testing
a. Auth State Verification
The Development Unit performed testing across various network situations (3G, 4G, 5G, Wi-Fi, and Flight Mode) to verify how the application handles token expiration. The interceptors successfully detected expired JWTs and refreshed them seamlessly without interrupting active workflows.
b. Simulated Booking Runs
Automated widget and integration tests were executed to simulate booking rooms. The tests verified that room selections, date/time inputs, voucher selections, and final checkouts post the correct JSON bodies to the REST backend.
06 — Prototyping & Handoff
Prototyping & Handoff
a. Beta Build Distributions
The Developers configured Google Play Console Internal Testing and Apple TestFlight deployment channels. This automated build delivery to stakeholders, enabling continuous feedback on booking speed and navigation clarity.
07 — Key Takeaways
Key Takeaways
a. Decoupled Client Efficiency
Building the mobile application strictly as a client of an existing backend highlights the efficiency of REST API architectures. By keeping all business rules, database queries, and billing transactions on the server, the mobile client remains lightweight, secure, and easy to maintain.