Airbnb Explorer

A React Native Expo app that mimics the core functionality of Airbnb, built with TypeScript and modern navigation patterns.

Features

• Bottom Tab Navigation: Explore and Profile tabs
• Stack Navigation: Multiple screens within Explore tab
• Interactive Maps: Using React Native Maps
• Advanced Filtering: Date selection with React Native Calendars
• State Management: Zustand for lightweight state management
• Firebase Integration: Ready for authentication, Firestore, and storage
• Modern UI: Beautiful and responsive design

Architecture

Navigation Structure

BottomTabs
├── ExploreTab (Stack Navigator)
│   ├── ExploreList
│   ├── ExploreMap
│   ├── ListingDetail
│   └── FiltersModal (Modal)
└── Profile

Tech Stack

• Framework: React Native with Expo (managed workflow)
• Language: TypeScript
• Package Manager: Yarn (better dependency resolution for React Native)
• Navigation: React Navigation v6 (Bottom Tabs + Stack)
• Maps: React Native Maps
• Calendar: React Native Calendars
• State Management: Zustand
• Backend: Firebase (Auth, Firestore, Storage)
• UI: Custom components with modern design

Project Structure

src/
├── api/
│   └── firebase.ts          # Firebase configuration
├── components/
│   ├── ListingCard.tsx      # Listing display component
│   ├── ImageCarousel.tsx    # Image carousel component
│   └── index.ts            # Component exports
├── navigation/
│   ├── BottomTabNavigator.tsx
│   └── ExploreStack.tsx
├── screens/
│   ├── ExploreListScreen.tsx
│   ├── ExploreMapScreen.tsx
│   ├── ListingDetailScreen.tsx
│   ├── FiltersModalScreen.tsx
│   ├── ProfileScreen.tsx
│   └── index.ts            # Screen exports
├── store/
│   └── useFilters.ts       # Zustand store for filters
└── types/
    └── Listing.ts          # TypeScript interfaces

Setup Instructions

Prerequisites

• Node.js (v16 or later)
• Yarn (recommended for React Native projects)
• Expo CLI (yarn global add @expo/cli)
• iOS Simulator (for iOS development)
• Android Studio/Emulator (for Android development)

Why Yarn?

This project uses Yarn as the package manager because:

• Better dependency resolution: Yarn's algorithm is more reliable for React Native projects
• Faster installs: Parallel downloads and caching improve performance
• Deterministic builds: yarn.lock ensures consistent installations across environments
• React Native compatibility: Yarn handles React Native's complex dependency tree better

Installation

1. Clone and install dependencies:

   cd airbnb-app
   yarn install

2. Configure Firebase:

   • Create a Firebase project at Firebase Console
   • Add iOS and Android apps to your project
   • Download configuration files:
     • GoogleService-Info.plist for iOS
     • google-services.json for Android
   • Update src/api/firebase.ts with your configuration

3. Update Firebase configuration:

   // src/api/firebase.ts
   export const firebaseConfig = {
     apiKey: "your-actual-api-key",
     authDomain: "your-project.firebaseapp.com",
     projectId: "your-project-id",
     storageBucket: "your-project.appspot.com",
     messagingSenderId: "123456789",
     appId: "your-app-id",
   };

4. Run the development server:

   yarn start

Running on Devices

• iOS Simulator: Press i in the terminal or scan QR code with Expo Go
• Android Emulator: Press a in the terminal or scan QR code with Expo Go
• Physical Device: Install Expo Go app and scan the QR code

Development

Key Components

Listing Interface

The Listing interface in src/types/Listing.ts defines the structure for property listings, matching Firestore document format.

Zustand Store

The useFilters store manages filter state including:

• Date range selection
• Price range
• Minimum rating
• Room counts
• Amenities

Navigation

• Bottom tabs for main sections
• Stack navigation for explore flow
• Modal presentation for filters

Customization

1. Theme Colors: Update colors in component styles (primary: #FF5A5F)
2. Firebase Collections: Modify src/api/firebase.ts for your data structure
3. Map Configuration: Update initial region in ExploreMapScreen.tsx
4. Filter Options: Customize filter options in FiltersModalScreen.tsx

Building for Production

Create Development Build

# Install EAS CLI
yarn global add eas-cli

# Configure EAS
eas build:configure

# Build for development
eas build --profile development --platform all

Create Production Build

# Build for production
eas build --profile production --platform all

Firebase Setup

Required Firebase Services

1. Authentication: User sign-in/sign-up
2. Firestore: Store listing data, user preferences
3. Storage: Upload and store images

Firestore Structure

listings/
├── {listingId}
│   ├── title: string
│   ├── description: string
│   ├── price: number
│   ├── location: object
│   ├── images: array
│   └── ...other fields

users/
├── {userId}
│   ├── name: string
│   ├── email: string
│   ├── favorites: array
│   └── bookings: array

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is for educational purposes. Please respect Airbnb's trademarks and intellectual property.

Troubleshooting

Common Issues

1. Metro bundler issues: Clear cache with yarn clear or yarn start --clear
2. iOS build issues: Ensure Xcode is properly configured
3. Android build issues: Check Android SDK configuration
4. Firebase connection: Verify configuration files are properly placed

Getting Help

• Check Expo Documentation
• Review React Navigation docs
• Firebase setup: React Native Firebase

---

Built with ❤️ using React Native and Expo