Mobile Booking Application
From an open time slot to a confirmed booking.
A mobile booking application designed around availability checking, booking confirmation, and booking history. The full client-side flow is built with React Native and Expo; the backend is planned.
Status: Front-end prototype running on local mock data. The REST API and PostgreSQL backend are planned, not built.
Choose a time
Available times
October 6, 2026
- 9:00 AM
- 10:00 AM
- 11:00 AM (unavailable)
- 1:00 PM
- 2:00 PM (selected)
- 3:00 PM
- 4:00 PM (unavailable)
- 5:00 PM
Confirm
Review booking
- Service
- Professional Haircut
- Provider
- Sample Salon
- Date
- October 6, 2026
- Time
- 2:00 PM
- Duration
- 1 hour
- Total
- ₱500
Booking confirmed
Your appointment is scheduled.
Professional Haircut
October 6, 2026
2:00 PM
₱500
My bookings
- Confirmed
Professional Haircut
Sample Salon
Oct 6 · 2:00 PM
₱500
View details
- Confirmed
Relaxation Massage
Serenity Spa
Oct 9 · 11:00 AM
₱900
View details
App screenshots3 to be added
ScreenshotAvailability screen
To be added
ScreenshotBooking confirmation
To be added
ScreenshotBooking history
To be added
Problem & solution
- Problem
- People booking appointment-based services need a simple way to see open dates and times on their phone, book a slot, and keep track of upcoming and past appointments.
- Solution
- A React Native app that covers the booking journey: browse services, check availability on a calendar and a time-slot grid, review and confirm, then view or cancel bookings in an Upcoming / Past history. Screens get their data through a single API module shaped like the planned REST endpoints, so the backend can be connected without rewriting screens.
Technologies
5 technologies3 implemented2 planned
- React NativeImplemented
- TypeScriptStrict modeImplemented
- ExpoExpo Router navigationImplemented
- REST APIEndpoints mapped, not yet builtPlanned
- PostgreSQLPlanned persistence layerPlanned
Architecture
Planned architecture
React Native
Expo Router screens
Data layer
Typed API module · mock data
REST APIPlanned
Endpoints mapped
PostgreSQLPlanned
Persistence
Booking flow
Check Availability
Calendar + time slots
Create Booking
Review the details
Confirmation
Booking confirmed
Booking History
Upcoming & past
Engineering notes
One seam for data
Screens read data through one API module whose functions mirror the planned REST endpoints, which keeps the move to a real backend contained.
Deterministic availability
Open slots are generated deterministically per date, so the same day always shows the same availability while the backend is being built.
A guarded booking flow
Continue stays disabled until a choice is made, unavailable slots can’t be picked, and confirming replaces the route so Back can’t resubmit.
Token-driven interface
Colors, spacing, type and radii come from shared design tokens, so every screen is styled from one system.
Key technical concepts
- File-based navigation
- Typed route params
- React Context state
- Availability modelling
- Data-access layer
- Design tokens
Scope
Built05 items
- Browse and search services by category
- Availability check on a date calendar and a time-slot grid (simulated data)
- Review and confirm a booking behind a three-step indicator
- Booking confirmation screen
- Booking history with Upcoming / Past tabs, details and cancellation
Planned04 items
- REST API backend
- PostgreSQL persistence (bookings currently reset on reload)
- User accounts
- Real availability and conflict checking