Marriott Connect

A social travel app for hotel guests to connect, share experiences, and discover local activities together.

Overview

Marriott Connect is a React Native mobile application built with Expo that enables hotel guests to:

• Connect with fellow travelers based on shared interests
• Discover local experiences and activities
• Join or create group events
• Earn Marriott Bonvoy points through app engagement

Tech Stack

• Framework: React Native with Expo SDK 54+
• Language: TypeScript
• Navigation: React Navigation v7
• Backend: Firebase (Authentication, Firestore, Storage)
• Maps: React Native Maps
• State Management: React Hooks + Context API
• Styling: StyleSheet API with theme constants

Project Structure

marriott-connect/
├── src/
│   ├── screens/          # App screens/pages
│   ├── components/       # Reusable UI components
│   ├── navigation/       # React Navigation setup
│   ├── lib/             # Core logic and utilities
│   │   ├── types/       # TypeScript type definitions
│   │   ├── services/    # API and service integrations
│   │   └── utils/       # Helper functions
│   ├── constants/       # Theme, colors, config
│   └── hooks/           # Custom React hooks
├── assets/              # Images, fonts, icons
├── app.json            # Expo configuration
└── App.tsx             # Root component

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• Expo CLI: npm install -g expo-cli
• Expo Go app on your iOS/Android device (for testing)
• iOS Simulator (Mac only, via Xcode)
• Android Studio (for Android Emulator)

Installation

1. Clone the Repository

git clone https://github.com/your-org/marriott-connect.git
cd marriott-connect

2. Install Dependencies

npm install

or

yarn install

3. Set Up Environment Variables

Copy the example environment file and fill in your Firebase credentials:

cp .env.example .env

Edit .env and add your Firebase configuration:

FIREBASE_API_KEY=your_api_key
FIREBASE_AUTH_DOMAIN=your_auth_domain
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_STORAGE_BUCKET=your_storage_bucket
FIREBASE_MESSAGING_SENDER_ID=your_sender_id
FIREBASE_APP_ID=your_app_id

To get Firebase credentials:

1. Go to Firebase Console
2. Create a new project or select existing
3. Go to Project Settings → Your apps → Add app → Web
4. Copy the configuration values

4. Configure Firebase

Create a Firebase project with the following services enabled:

• Authentication (Email/Password, Google, etc.)
• Cloud Firestore (for database)
• Storage (for image uploads)
• Cloud Messaging (optional, for push notifications)

Running the App

Development Mode

Start the Expo development server:

npm start

or

expo start

This will open the Expo Dev Tools in your browser.

Running on iOS Simulator

Requirements: macOS with Xcode installed

npm run ios

or press i in the Expo Dev Tools terminal.

First-time setup:

1. Install Xcode from the Mac App Store
2. Install Xcode Command Line Tools: xcode-select --install
3. Open Xcode and install iOS Simulator

Running on Android Emulator

Requirements: Android Studio with Android SDK installed

npm run android

or press a in the Expo Dev Tools terminal.

First-time setup:

1. Download and install Android Studio
2. Open Android Studio → Settings → Android SDK
3. Install latest Android SDK (API 33+)
4. Create a virtual device (AVD) via Tools → AVD Manager
5. Set up ANDROID_HOME environment variable:

   export ANDROID_HOME=$HOME/Library/Android/sdk
   export PATH=$PATH:$ANDROID_HOME/emulator
   export PATH=$PATH:$ANDROID_HOME/platform-tools

Running on Physical Device (Expo Go)

1. Install Expo Go app from:

   • App Store (iOS)
   • Google Play (Android)

2. Start the development server:

   npm start

3. iOS: Scan the QR code with your Camera app Android: Scan the QR code with the Expo Go app

Troubleshooting:

• Make sure your phone and computer are on the same WiFi network
• If QR code doesn't work, try entering the URL manually in Expo Go
• Use tunnel mode if on different networks: npm start --tunnel

Available Scripts

• npm start - Start the Expo development server
• npm run android - Start on Android emulator
• npm run ios - Start on iOS simulator
• npm run web - Start web version (experimental)

Key Features to Implement

• User authentication with Firebase
• Profile creation with interests/vibes
• Location-based user discovery
• Real-time chat with other guests
• Event creation and RSVP system
• QR code check-ins
• Marriott Bonvoy points integration
• Push notifications
• Maps integration for local discovery

Environment Variables

Variable	Description	Required
FIREBASE_API_KEY	Firebase API key	Yes
FIREBASE_AUTH_DOMAIN	Firebase auth domain	Yes
FIREBASE_PROJECT_ID	Firebase project ID	Yes
FIREBASE_STORAGE_BUCKET	Firebase storage bucket	Yes
FIREBASE_MESSAGING_SENDER_ID	Firebase messaging sender ID	Yes
FIREBASE_APP_ID	Firebase app ID	Yes
FIREBASE_MEASUREMENT_ID	Firebase analytics ID	No

Permissions

The app requests the following permissions:

iOS:

• Location (when in use and always) - To show nearby events
• Camera - For profile photos and QR codes
• Photo Library - To select profile pictures

Android:

• ACCESS_FINE_LOCATION - Precise location
• ACCESS_COARSE_LOCATION - Approximate location
• CAMERA - Camera access
• READ_EXTERNAL_STORAGE - Read photos
• WRITE_EXTERNAL_STORAGE - Save photos

Debugging

Expo Dev Tools

Access at http://localhost:19002 when running npm start

React Native Debugger

1. Install React Native Debugger
2. Start the app and shake device (or Cmd+D on iOS, Cmd+M on Android)
3. Select "Debug"

Viewing Logs

• Expo: Logs appear in terminal where you ran npm start
• iOS: Use Xcode → Window → Devices and Simulators
• Android: Use adb logcat or Android Studio Logcat

Building for Production

Create Expo Account

expo login

Build for iOS

eas build --platform ios

Build for Android

eas build --platform android

For detailed build instructions, see Expo EAS Build Documentation.

Troubleshooting

Common Issues

Metro bundler issues:

expo start --clear

iOS build fails:

cd ios && pod install && cd ..

Android build fails:

cd android && ./gradlew clean && cd ..

Dependencies issues:

rm -rf node_modules
npm install

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Resources

• Expo Documentation
• React Native Documentation
• React Navigation
• Firebase Documentation
• TypeScript Handbook

License

Proprietary - Marriott Connect

Support

For issues or questions:

• Create an issue in the repository
• Contact the development team
• Check the Expo Forums

---

Built with ❤️ by the Marriott Connect Team