A beautiful React Native app for tracking and booking empty leg flights on private jets across the US. Built with Expo SDK 53 and integrated with the Aviapages API for live flight data.

• Empty leg flights included FREE with active subscription membership
• No per-flight charges for empty legs
• Optional charter price visibility for reference
• Members enjoy unlimited empty leg bookings at no additional cost
• Two subscription tiers: Monthly ($20k/month) and Yearly ($100k/year)

• Toggle between dark and light themes from Profile settings
• Dark mode: Pure grayscale aesthetic (black, white, and grays only)
• Light mode: Colorful with blue accents
• Default theme: Dark mode for elegant, modern look
• Persistent theme preference saved across sessions
• Smooth theme transitions with haptic feedback
• Optimized color schemes for both modes
• All screens fully themed: Home, List, Detail, Profile, Favorites, and more

• Beautiful dark gradient interface inspired by modern design
• Time-based greeting (Good Morning/Afternoon/Evening)
• Quick stats showing available flights and saved favorites
• Featured flights departing within 3 days with horizontal scroll
• Visual flight cards with gradient backgrounds and aircraft images
• Favorite flights section for quick access with thumbnails
• Quick action buttons to navigate to all major screens
• Custom center navigation button with elevated design
• Real-time flight data integration
• Haptic feedback on all interactions
• Subscription-based pricing display (FREE for members)

• Beautiful 5-slide welcome tutorial
• Interactive swipeable onboarding screens with haptic feedback
• Feature highlights with animated icons
• Skip option for returning users
• First-time user guidance
• Persistent onboarding completion tracking
• Success haptic on completion

• Secure login and registration system
• Persistent authentication with AsyncStorage
• Profile management with editable information
• Demo mode for easy testing

• Visual map display of all available empty leg flights
• Interactive markers showing departure and arrival airports with haptic feedback
• Route visualization with flight paths
• Real-time flight selection with detailed bottom sheets
• 120+ flights displayed (70% within next 3 days)
• Optimized zoom level for continental US view

• Monthly calendar with flight availability indicators
• Date-based filtering and selection
• Grouped flight listings by date
• Quick access to daily flight schedules

• Comprehensive list of all available flights with aircraft thumbnails
• Sort by date or price
• Pull-to-refresh functionality
• Real-time search across airports, cities, and operators
• Beautiful flight cards with aircraft images on the left
• Subscription badge showing flights are free for members

• Filter by price range with intuitive sliders
• Filter by aircraft type (Light Jet, Midsize, Super Midsize, Heavy Jet)
• Filter by date range with quick preset selections
• Filter by operator with multi-select checkboxes
• Filter by passenger capacity (min/max range)
• Search by airport codes, cities, or operators
• Reset all filters with one tap

• Complete flight information with aircraft images
• Aircraft specifications and amenities
• Operator details with contact information
• Subscription-based pricing (empty legs included at no additional charge)
• Optional full charter price visibility toggle
• Route information with estimated duration
• High-quality aircraft images displayed on detail screen

• Direct phone call to operators via integrated dialer
• Pre-filled email templates for inquiries
• Operator contact information displayed
• Full booking flow with passenger details form
• Booking confirmation with unique confirmation numbers
• Booking history and status tracking
• Cancel bookings (pending status only)
• Share booking details via native share sheet

• Complete booking system with passenger information
• Booking history screen with upcoming and past bookings
• Booking status tracking (pending, confirmed, cancelled, completed)
• Booking detail view with all information
• Booking cancellation functionality
• Confirmation number generation
• Email notifications (simulated)

• Save favorite flights with animated heart icon and haptic feedback
• Favorite buttons available on all views (List, Calendar, Detail)
• Dedicated Favorites screen for quick access
• Animated favorite button with scale effect and haptic response
• Share individual flights via native share sheet
• Share booking confirmations with haptic feedback
• Persistent favorites storage with AsyncStorage

• Personal information management
• Account settings
• Notification preferences (placeholder for push notifications)
• App preferences
• Logout functionality
• API usage tracking dashboard
• Subscription plan management

• Monthly plan: $20,000/month
• Yearly plan: $100,000/year (Save $140,000 annually)
• Unlimited empty leg bookings included at no additional cost
• Members fly on empty legs completely free with active subscription
• Optional charter price visibility for reference
• Beautiful gradient UI with plan comparison
• Interactive plan selection with haptic feedback
• Feature highlights for each tier
• Access from Profile > Subscription Plans
• Modal presentation with native back navigation

• Contextual haptic feedback throughout the app
• Light impacts for navigation and selections
• Medium impacts for button presses and toggles
• Heavy impacts for important actions
• Success/warning/error notifications
• Selection feedback for scrolling and picking
• Enhanced user experience with tactile response

• Framework: Expo SDK 53 with React Native 0.76.7
• Navigation: React Navigation (Native Stack, Bottom Tabs)
• State Management: Zustand with AsyncStorage persistence
• Styling: NativeWind (TailwindCSS for React Native)
• Maps: react-native-maps
• Date Handling: date-fns
• API Integration: Aviapages Flight API

This app integrates with the Aviapages API to fetch live empty leg flight data.

• Real-time availability data using UTC datetime ranges
• Comprehensive airport database
• Aircraft type information
• Pricing and scheduling data

The app requires Aviapages API credentials stored in environment variables:

• EXPO_PUBLIC_AVIAPAGES_API_KEY: Your Aviapages API token
• EXPO_PUBLIC_AVIAPAGES_ACCOUNT_ID: Your Aviapages account ID

• Base URL: https://dir.aviapages.com/api
• Authentication: Token-based via Authorization: Token <YOUR_API_KEY> header
• Date Format: UTC ISO datetime strings (YYYY-MM-DDTHH:mm)
• Retry Logic: Automatic retry with exponential backoff (500ms, 1500ms, 3500ms) for rate limits and network errors
• Pagination: Automatic handling of paginated results

• GET /api/availabilities/ - Fetch available empty legs
  • Required Parameters:
    • from_date_utc: UTC ISO datetime (e.g., "2025-10-29T21:10")
    • to_date_utc: UTC ISO datetime (e.g., "2025-11-08T21:10")
  • Optional Parameters:
    • departure_airport: ICAO or IATA code
    • arrival_airport: ICAO or IATA code
    • price_min, price_max: Price range filters
    • registration: Aircraft registration filter
    • limit, offset: Pagination controls

1. App converts local dates to UTC ISO format using the toUTCISO() helper
2. Checks API usage limits before making calls (Tier1 plan tracking)
3. Fetches available flights from Aviapages /api/availabilities/ endpoint with UTC datetime parameters
4. Tracks successful API calls to monitor monthly quota
5. Handles pagination automatically to retrieve all results
6. Implements retry logic for rate limits (429) and network errors
7. Data is mapped to app-specific types and structures
8. Results are cached locally with 4-hour refresh intervals (optimized for Tier1 plan limits)
9. Rate limit tracking prevents excessive API calls (30-minute cooldown after rate limit)
10. Graceful fallback to sample data when API is unavailable or quota is exceeded
11. Users can manually refresh data via pull-to-refresh (respects cache time)

The app includes comprehensive API usage tracking to respect monthly limits:

Tier1 Monthly Limits:

• Empty Leg/Airport Data: 3,000 calls/month
• Flight Calculator: 600 calls/month
• Aircraft Data: 300 calls/month
• Quote Requests: 90 calls/month
• Aircraft Profiles: 6,000 calls/month

Smart Usage Strategy:

• 4-hour cache: Flight data cached for 4 hours (allows ~6 refreshes/day, ~180 calls/month)
• Usage tracking: Real-time monitoring of API calls per category
• Warning system: Visual alerts at 70%, 85%, and 95% of monthly limits
• Auto-protection: Prevents new calls when monthly limit is reached
• User dashboard: Dedicated "API Usage" screen shows current usage and remaining quota
• Monthly reset: Automatically resets counters at the start of each month

• Rate Limiting (429): Automatic retry with exponential backoff, then 30-minute cooldown to prevent repeated API calls
• Network Errors: Up to 3 retry attempts before failing
• Graceful Degradation: Automatic fallback to sample flight data when API is unavailable
• User Notifications: Clear error messages displayed to users about API status
• Smart Caching: 4-hour cache prevents unnecessary API calls and respects monthly limits
• Quota Protection: Blocks API calls when monthly limit is reached, displays informative message
• Client Errors (4xx): Immediate failure with detailed error message
• Fallback Mode: If the API is unavailable or returns no results, the app automatically falls back to sample data to ensure a seamless user experience

src/
├── api/
│   └── aviapages.ts          # Aviapages API client
├── components/
│   └── FavoriteButton.tsx     # Reusable animated favorite button
├── navigation/
│   └── AppNavigator.tsx       # Navigation with onboarding, auth, and tab routing
├── screens/
│   ├── HomeScreen.tsx         # Dashboard with featured flights & quick actions (NEW)
│   ├── OnboardingScreen.tsx   # 5-slide onboarding flow (NEW)
│   ├── LoginScreen.tsx        # User login
│   ├── RegisterScreen.tsx     # User registration
│   ├── ProfileScreen.tsx      # User profile management with API usage link
│   ├── SubscriptionScreen.tsx # Subscription plans (Monthly/Yearly)
│   ├── ApiUsageScreen.tsx     # API usage tracking dashboard
│   ├── MapScreen.tsx          # Interactive map view
│   ├── CalendarScreen.tsx     # Calendar-based view
│   ├── ListScreen.tsx         # Scrollable list view
│   ├── FlightDetailScreen.tsx # Detailed flight information with favorites & sharing
│   ├── FiltersScreen.tsx      # Filter controls (price, date, operator, passengers, aircraft)
│   ├── FavoritesScreen.tsx    # Saved/favorite flights
│   ├── BookingFormScreen.tsx  # Booking form with passenger details
│   ├── BookingConfirmationScreen.tsx # Booking confirmation view
│   ├── BookingsScreen.tsx     # Booking history list
│   └── BookingDetailScreen.tsx # Individual booking details
├── state/
│   ├── onboardingStore.ts     # Zustand onboarding state management (NEW)
│   ├── authStore.ts           # Zustand auth state management
│   ├── flightStore.ts         # Zustand flight state management with API usage tracking
│   ├── bookingStore.ts        # Zustand booking state management
│   └── favoritesStore.ts      # Zustand favorites state management
├── types/
│   ├── flight.ts              # Flight data types
│   ├── aviapages.ts           # Aviapages API types
│   └── booking.ts             # Booking data types
└── utils/
    ├── aviapagesMapper.ts     # API data transformation
    ├── apiUsageTracker.ts     # API usage tracking & quota management
    └── mockData.ts            # Sample data generator

The app is pre-configured and running on port 8081. View it through the Vibecode app to see live updates as changes are made.

Aviapages API credentials are already configured in the .env file:

• API Key: Configured
• Account ID: 24330

• Empty legs included FREE with active subscription
• Prominent "Included with Subscription" banner
• Optional price toggle to view full charter pricing
• Green "FREE" badges throughout the app
• Users can see what they would normally pay for reference

• High-quality aircraft images from Unsplash
• Displayed prominently on flight detail screen (full-width header)
• Thumbnail images on list view cards (left side, 112px wide)
• Background images on home screen featured flight cards
• Images enhance visual appeal and help users identify aircraft types

• Complete theme system with Zustand state management
• Toggle switch in Profile > App Settings
• Persistent theme preference with AsyncStorage
• Dark mode: Pure grayscale aesthetic
  • Colors: Black (#000000), Neutral-900 (#171717), Neutral-800 (#262626)
  • Text: White with gray variants (#A3A3A3, #737373)
  • Accent: White for buttons and highlights
  • No colored elements - pure black, white, and grays
• Light mode: Full color palette with blue accents
• Haptic feedback on theme toggle
• Default: Dark theme for modern, elegant look
• All major screens fully themed: HomeScreen, ListScreen, FlightDetailScreen, ProfileScreen, FavoritesScreen

• Demo authentication system with Zustand persistence
• Login and registration screens with form validation
• User profile with editable fields
• Protected routes - unauthenticated users see login screen
• Persistent sessions with AsyncStorage

• Phone call integration via React Native Linking API
• Pre-filled email composer with flight details
• Native bottom sheet modal for contact options
• Operator phone and email stored in flight data

• Uses react-native-maps for interactive visualization
• Shows flight routes with polylines
• Interactive markers for airports
• Bottom sheet for flight details

• Custom calendar grid implementation
• Date-based flight grouping
• Visual indicators for flight availability
• Seamless date selection

• High-performance FlashList for scrolling
• Pull-to-refresh capability
• Real-time search filtering
• Sort by date or price

• Editable user information (name, phone)
• App settings placeholders
• Subscription plan access
• API usage tracking link
• Support section links
• Logout functionality with confirmation

• Zustand for lightweight state management
• AsyncStorage persistence for auth, flights, and bookings
• Automatic data refresh logic
• Filter and search state
• Booking state with confirmation number generation

• Complete booking flow from flight selection to confirmation
• Passenger details form with validation
• Booking confirmation screen with unique confirmation numbers
• Booking history with upcoming and past bookings
• Booking status tracking (pending, confirmed, cancelled, completed)
• Booking detail view with all information
• Cancel booking functionality for pending bookings
• Share booking details via native share sheet
• AsyncStorage persistence for booking data

• Save favorite flights with animated heart button
• Dedicated Favorites screen with saved flights list
• Persistent storage with AsyncStorage
• Share individual flights via native share sheet
• Share booking confirmations
• Animated visual feedback on favorite toggle

• Token-based authentication via Authorization: Token header
• UTC datetime parameter handling with toUTCISO() helper
• Automatic pagination for large result sets
• Exponential backoff retry logic (3 attempts: 500ms, 1500ms, 3500ms)
• Proper error handling for rate limits (429) and network failures
• Date validation to ensure from_date_utc < to_date_utc

The app uses TypeScript with strict type checking. A patch has been applied to react-native-maps to resolve React 19 compatibility issues (see patches/react-native-maps+1.24.3.patch).

• FlashList for optimized list rendering
• Selective Zustand selectors to prevent unnecessary re-renders
• 5-minute cache to reduce API calls
• Lazy loading for flight details
• Animated components with native driver

• Follows Apple Human Interface Guidelines
• Clean, professional interface
• Custom elevated center home button in navigation
• Dark mode home screen with gradient design
• Intuitive navigation patterns
• Responsive touch targets
• Clear visual hierarchy
• Smooth animations and transitions

Potential features for future development:

• Payment integration (Stripe/payment processor) for subscription processing
• Real payment processing for bookings
• Subscription state management and tracking
• Active subscription status display
• Multiple payment methods support
• Booking modification functionality
• Push notifications for price drops and booking updates
• Booking reminders (24 hours before flight)
• Advanced filter improvements (date range picker, operator filter, passenger count)
• In-app reviews and ratings for operators
• International airport support
• Real-time price tracking
• Referral program
• In-app messaging with operators
• Multi-language support
• Dark mode

For more information about the Aviapages API:

• API Documentation: https://dir.aviapages.com/api/documentation/
• Base URL: https://dir.aviapages.com/api
• Authentication: Token-based (Header: Authorization: Token YOUR_API_KEY)

• GET /api/availabilities/ - List available empty legs
  • Required: from_date_utc (UTC ISO datetime)
  • Required: to_date_utc (UTC ISO datetime)
  • Optional: departure_airport, arrival_airport, price_min, price_max, registration
• GET /api/airports/ - Search airports
• GET /api/aircraft_types/ - Aircraft information

import { aviapagesClient, toUTCISO } from "./src/api/aviapages";

// Fetch flights for the next 30 days
const now = new Date();
const future = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000);

const response = await aviapagesClient.getAvailabilities({
  from_date_utc: toUTCISO(now),      // "2025-10-31T14:30"
  to_date_utc: toUTCISO(future),     // "2025-11-30T14:30"
  departure_airport: "JFK",           // Optional
  arrival_airport: "LAX",             // Optional
});

This is a Vibecode template app. All rights reserved.

Built with ❤️ using Vibecode - The AI-powered no-code app builder