CASE_STUDIES / #PROJ-003 / PAWS_PARADISE_MOBILE
ALPHA·MOBILE·2024 — PRESENT

Building a Cross-Platform Mobile Booking Experience for Pet Services

A React Native mobile app extending the Paws Paradise platform — giving pet owners a seamless way to browse availability, book services, and manage their pets on iOS and Android.

PLATFORM
iOS & Android
STACK
React Native, Expo, TypeScript, GraphQL
ROLE
Full-Stack Developer
STATUS
Alpha · In Progress
01

The Challenge of Mobile-First Booking.

Translating a complex, constraint-driven booking system into a smooth mobile experience required rethinking navigation patterns, reducing form friction, and ensuring real-time availability data remained accurate across both web and mobile clients sharing the same GraphQL API.

01_UX

Simplified Booking Flow

The 6-step web flow needed to be condensed into a mobile-native experience without losing required data collection.

02_REALTIME

Real-Time Availability

Availability data had to stay in sync with the web platform — no stale slots, no double-bookings from mobile sessions.

03_CROSS_PLATFORM

Cross-Platform Consistency

UI components needed to behave and look consistent across iOS and Android without duplicating logic.

04_PERFORMANCE

Performance on Low-End Devices

Animations and data fetching needed to remain smooth on mid-range devices with variable network conditions.

02

THE SOLUTIONS

The mobile app was built to share the same GraphQL API as the web admin platform — ensuring data consistency while delivering a native-feeling experience optimized for touch.

01 / SHARED_API

Shared GraphQL API

The mobile app consumes the same GraphQL layer as the admin platform — availability, pricing, and booking logic are centralized and consistent.

API_SCHEMA.SHARED
ServicePet SelectionBooking DatesSet Units
Additional ServicesSummary
02 / NATIVE_NAVIGATION

Native Navigation Patterns

React Navigation with tab and stack navigators provides familiar iOS and Android navigation patterns — back gestures, tab switching, and modal flows all behave natively.

NAV_STRUCTURE.MOBILE
Trailer Hitches12 ITEMS
Ball Mounts8 ITEMS
Accessories24 ITEMS
Bundles6 ITEMS
03

THE IMPLEMENTATION

The mobile experience was built in parallel with the web platform, sharing data models and API contracts to minimize duplication.

01 / MOBILE_BOOKING_FLOW

Mobile Booking Flow

Condensed the multi-step booking into a native mobile flow with swipe navigation and inline validation.

React NativeExpoGraphQL
[ MOBILE_BOOKING_STEPS ]
02 / AVAILABILITY_CALENDAR

Availability Calendar

A touch-optimized calendar displays real-time availability pulled from the shared GraphQL API.

React NativeApolloTypeScript
[ MOBILE_CALENDAR_VIEW ]
03 / PET_MANAGEMENT

Pet Management

Pet profiles are managed in-app — owners can add pets, update info, and see booking history per pet.

React NativeGraphQLAsyncStorage
[ MOBILE_PET_PROFILE ]
04

KEY DESIGN DECISIONS

SHARED API CONTRACT

Reusing the GraphQL layer meant zero duplication of business logic between mobile and web.

EXPO MANAGED WORKFLOW

Expo accelerated cross-platform delivery without sacrificing access to native APIs needed for the app.

OFFLINE-AWARE UI

The UI gracefully handles poor connectivity — showing cached data and queuing actions for sync.

TOUCH-FIRST DESIGN

Every interaction was designed for thumb reach and tap targets, not adapted from the web layout.

05

THE IMPACT

The mobile app extends the Paws Paradise platform to pet owners directly — reducing front-desk booking load and giving customers a self-service option for scheduling, pet management, and booking history.

Cross-platform iOS and Android from a single codebase
Shared GraphQL API ensures real-time data consistency
Touch-optimized booking flow with native navigation
Pet profile management built into the app
Offline-aware UI for variable network conditions
Foundation ready for push notifications and payments