Facility Booking Mobile Application

A comprehensive React Native mobile application for facility booking and management, built with Expo and TypeScript.

📱 Demo

Interactive demo showing the complete booking flow

What you'll see in the demo:

• Authentication Flow: Secure login and registration
• Facility Browser: Browse available facilities with Indonesian localization
• Interactive Calendar: Custom weekly date picker with month navigation
• Time Selection: Grid-based time slot selection with real-time availability
• Booking Process: Complete booking flow with confirmation
• Profile Management: User profile viewing and editing capabilities

📱 Features

Core Functionality

• Facility Management: Browse available facilities with search and filtering
• Booking Management: View, manage, and cancel personal bookings
• User Profiles: Complete profile management with authentication

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Expo CLI (npm install -g expo-cli)
• iOS Simulator or Android Emulator for development

Installation

1. Clone the repository

   git clone <repository-url>
   cd react-native-booking

2. Install dependencies

   npm install

3. Start development server

   npm start
   # or
   expo start

4. Run on device/simulator

   # iOS
   npm run ios
   
   # Android
   npm run android
   
   # Web (for testing)
   npm run web

📁 Project Architecture

src/
├── components/              # Reusable UI components
│   ├── forms/              # Form-specific components
│   │   ├── DatePicker.tsx  # Custom weekly calendar
│   │   └── Input.tsx       # Styled input component
│   └── ui/                 # General UI components
│       ├── Button.tsx      # Custom button component
│       └── FacilityCard.tsx # Facility display card
├── hooks/                  # Custom React hooks
│   ├── useFacilities.ts    # Facility data management
│   ├── useBookings.ts      # Booking operations
│   └── useProfile.ts       # User profile management
├── services/               # API and external services
│   └── api.ts             # Centralized API service
├── store/                  # Global state management
│   └── authStore.tsx      # Authentication state (Zustand)
├── types/                  # TypeScript definitions
│   ├── facility.ts        # Facility-related types
│   ├── booking.ts         # Booking-related types
│   └── auth.ts           # Authentication types
└── utils/                  # Utility functions
    ├── validation.ts      # Form validation schemas
    └── storage.ts        # Local storage utilities

app/                        # Expo Router file-based routing
├── (auth)/                # Authentication flow
│   ├── login.tsx         # Login screen
│   └── register.tsx      # Registration screen
├── (main)/               # Main application
│   ├── (tabs)/          # Bottom tab navigation
│   │   ├── index.tsx    # Facilities list (Home)
│   │   ├── bookings.tsx # My bookings
│   │   └── profile.tsx  # User profile
│   ├── detail/          # Facility details
│   │   └── [id].tsx     # Dynamic facility detail
│   ├── booking/         # Booking creation
│   │   └── [id].tsx     # Booking form
│   └── booking-detail/  # Booking management
│       └── [id].tsx     # Booking detail & cancellation
└── _layout.tsx          # Root layout and providers

🛠️ Technology Stack

Core Framework

• React Native (0.74.5): Cross-platform mobile development framework
• Expo (51.0.28): Development platform and build toolchain
• TypeScript: Static typing for enhanced developer experience and code quality

Navigation & Routing

• Expo Router (3.5.23): File-based routing system
  • Why chosen: Convention over configuration, automatic type safety
  • Benefits: Reduced boilerplate, excellent TypeScript integration
  • Use case: Seamless navigation between screens with type-safe parameters

State Management

• Zustand (4.5.5): Lightweight global state management
  • Why chosen: Simplicity over Redux, smaller bundle size
  • Benefits: Minimal boilerplate, excellent TypeScript support
  • Use case: Authentication state, user preferences

Server State Management

• TanStack Query (5.56.2): Powerful data fetching and caching
  • Why chosen: Best-in-class server state management
  • Benefits: Automatic caching, background updates, optimistic updates
  • Use case: API calls, data synchronization, offline support

Form Management

• React Hook Form (7.53.0): Performant form state management
• Zod (3.23.8): TypeScript-first schema validation
  • Why chosen: Excellent performance, minimal re-renders
  • Benefits: Type-safe validation, reduced boilerplate
  • Use case: Login, registration, booking forms

Storage & Security

• Expo SecureStore: Encrypted storage for sensitive data
• AsyncStorage: General application data storage
  • Security approach: JWT tokens in SecureStore, app data in AsyncStorage
  • Benefits: Platform-specific secure storage, automatic encryption

Development & Build Tools

• Expo CLI: Development and build toolchain
• Metro: JavaScript bundler optimized for React Native
• TypeScript ESLint: Code linting and formatting