TakeOff: All-in-One Trip Planning Application

MSc Individual Project | University of Leicester | CO7201

Student: Jehquisa Buchanan (jb1036@student.le.ac.uk - no longer active)

Supervisors: Dr. Yi Hong, Dr. Zedong Zheng

Project description:

An all-in-one trip planning mobile application geared toward solo travellers. The app will enable travel enthusiasts to generate tailored trip itineraries based on minimal user input and act as a travel companion pre-, during and, post- trip. It will encompass social networking features to allow users to chat and link with other travellers at any time during their trip planning process. Users will be able to further personalise their experience through multiple smart filters to ensure the holiday or travel buddy is suited for them. Gamification elements set it apart in the form of a “Quests” or “Missions” tab where users will be given location-specific tasks to encourage interaction with the environment to earn rewards. Special care will be taken to ensure the application is user-friendly through incorporating UI and UX elements and HCI themes. Security will also prioritised because of the risks associated with solo travel.

Key Features

• AI-Powered Itinerary Generation - OpenAI GPT integration for personalized travel planning
• Secure Authentication - Firebase Authentication with solo traveler safety in mind
• Interactive Globe - Tap and explore destinations with detailed information
• Travel Communities - Real-time messaging and group filtering for solo travelers
• Quests Wheel - Location-based quests, badges, and rewards
• Multi-Language Support - In-app translator with automatic location detection
• Adaptive UI/UX - User-friendly design with accessibility features

Architecture & Technology Stack

Frontend

• React Native (0.80.2) - Cross-platform mobile development
• TypeScript - Type-safe JavaScript development
• React Navigation - Native navigation with drawer and tab systems

Backend & Services

• Firebase Authentication - Secure user management
• Firebase Firestore - NoSQL database for itineraries and user data
• Firebase Cloud Messaging - Push notifications
• Firebase Storage - Image and file storage

External APIs

• OpenAI GPT API - AI-powered itinerary generation
• Google Translation API - Multi-language support
• GeoDB Cities API - Location data for interactive globe
• OpenWeatherMap API - Weather information and alerts
• Unsplash API - High-quality travel destination images

Development Tools

• ESLint & Prettier - Code quality and formatting
• Jest - Unit testing framework
• React Native Debugger - Development debugging
• Git - Version control with regular commit requirements

---

Quick Start Guide

Prerequisites

Ensure you have the following installed:

• Node.js (18 or higher) - Download
• Git - Download
• Android Studio - Download
• JDK 17 (included with Android Studio)

1. Clone the Repository

git clone https://campus.cs.le.ac.uk/gitlab/pgt_project/24_25_summer/jb1036.git
cd jb1036

2. Install Dependencies

npm install

What this installs:

• React Native core and navigation libraries
• Firebase SDK for authentication, database, and messaging
• External API integration packages (Axios, etc.)
• UI components (vector icons, calendars, maps)
• Development tools (TypeScript, ESLint, testing frameworks)

3. Environment Configuration

1. Copy environment template:

   cp .env.example .env

2. Add your API keys to .env:

   OPENAI_API_KEY=your_openai_api_key_here
   GEODB_KEY=your_geodb_cities_api_key_here
   GOOGLE_TRANSLATION_KEY=your_google_translate_api_key_here
   OPENWEATHER_KEY=your_openweather_api_key_here
   UNSPLASH_ACCESS_KEY=your_unsplash_access_key_here

4. Android Setup

1. Install Android Studio and open it
2. Configure Android SDK:
   • Install latest Android SDK (API 34 recommended)
   • Install SDK Build Tools, Platform Tools, and Emulator
3. Set environment variables:

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

4. Create Android Virtual Device (AVD):
   • Open AVD Manager in Android Studio
   • Create new device (Pixel 6 recommended)
   • Use Android 14 (API 34) system image

5. Firebase Configuration

Firebase is pre-configured with google-services.json in android/app/. This handles:

• User authentication and session management
• Firestore database for itineraries and user profiles
• Cloud messaging for notifications
• Storage for user-uploaded images and quest evidence

---

Running the Application

Start Development Environment

1. Start Metro bundler:

   npm start

2. Run on Android (new terminal):

   npm run android

Alternative for Windows:

npx react-native run-android

Development Workflow

• Auto-reload - Save files for automatic refresh
• Manual reload - Shake device or Ctrl+M → "Reload"
• Debug menu - Ctrl+M (Windows) or Cmd+M (Mac)
• Reset cache - npm start --reset-cache

---

API Keys Setup Guide

OpenAI API (Required for AI Itinerary Generation)

1. Visit OpenAI Platform
2. Create account and navigate to API Keys
3. Create new secret key

Google Translation API (Required for Translator Feature)

1. Go to Google Cloud Console
2. Create new project or select existing
3. Enable "Cloud Translation API"
4. Create credentials → API Key
5. Restrict key to Translation API for security

GeoDB Cities API (Required for Interactive Globe)

1. Visit RapidAPI GeoDB
2. Subscribe to free tier (500 requests/month)
3. Copy API key from dashboard

OpenWeather API (Required for Weather Notifications)

1. Go to OpenWeatherMap
2. Sign up for free account (1000 calls/day)
3. Get API key from account dashboard

Unsplash API (Required for Destination Images)

1. Visit Unsplash Developers
2. Create new application
3. Get access key from app settings

---

Testing & Development

Available Scripts

# Development
npm start                    # Start Metro bundler
npm run android             # Run on Android emulator/device
npm run ios                 # Run on iOS simulator (macOS only)

# Code Quality
npm run lint                # Run ESLint
npm run lint:fix            # Fix ESLint issues automatically
npm test                    # Run Jest unit tests
npm test:watch              # Run tests in watch mode

# Utilities
npm run clean               # Clean cache and temporary files
npm run reset-cache         # Reset Metro bundler cache

Debugging Commands

# Environment check
npx react-native doctor

# Clean project
npx react-native start --reset-cache

# Android specific
cd android && ./gradlew clean && cd ..

# Reinstall dependencies
rm -rf node_modules && npm install

---

Support & Contact

Project Author: Jehquisa Buchanan

Institution: University of Leicester

Supervisors: Dr. Yi Hong, Dr. Zedong Zheng