TripIt! 🗺️

A modern trip planning and tracking application built with Gatsby, React, Firebase, and Google Maps. TripIt allows users to create trips by selecting start and destination points, and visualize them on an interactive map.

✨ Features

• Interactive Trip Creation: Create new trips by selecting start and destination locations using Google Places autocomplete
• Real-time Map Visualization: View all trips on an interactive Google Map with markers and info windows
• Firebase Integration: Store trip data in real-time using Firebase Realtime Database
• Responsive Design: Modern, mobile-friendly interface built with React
• Offline Support: Progressive Web App capabilities with offline functionality

🛠️ Tech Stack

• Frontend: Gatsby 5, React 18
• Database: Firebase Realtime Database
• Maps: Google Maps JavaScript API with React wrapper
• Styling: CSS with modern design patterns
• Build Tool: Webpack (via Gatsby)

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Google Maps API key
• Firebase project with Realtime Database enabled

Installation

1. Clone the repository

   git clone <repository-url>
   cd TripIt

2. Install dependencies

   npm install

3. Configure Environment Variables

   • Copy .env.example to .env
   • Update the .env file with your actual API keys and configuration values
   • Firebase Configuration: Get your Firebase config from Firebase Console
   • Google Maps Configuration: Get your API key from Google Cloud Console
   • Enable Places API and Maps JavaScript API for your Google Maps key

4. Start the development server

   npm run develop

5. Open your browser Navigate to http://localhost:8000 to see the application!

📱 Usage

1. Create a Trip: Click the "Create New Trip" button
2. Select Locations: Use the search boxes to find your start and destination
3. Submit: Click "Create" to save your trip
4. View on Map: Your trip will appear as a marker on the map
5. Explore: Click markers to see trip details

🏗️ Building for Production

To create a production build:

npm run build

The built files will be in the public/ directory, ready for deployment.

📁 Project Structure

src/
├── components/
│   ├── Trips/
│   │   ├── AddTrip.js          # Trip creation component
│   │   ├── addTrip.css         # Trip creation styles
│   │   ├── trip.js             # Individual trip component
│   │   └── trips.js            # Trip list component
│   ├── Events/
│   │   ├── AddEvent.js         # Event creation component
│   │   └── addEvent.css        # Event creation styles
│   ├── fire.js                 # Firebase configuration
│   ├── maps.js                 # Google Maps integration
│   ├── searchbox.js            # Places autocomplete search
│   ├── layout.js               # Main layout component
│   ├── header.js               # Site header
│   └── layout.css              # Global styles
├── pages/
│   ├── index.js                # Home page
│   ├── create-trip.js          # Trip creation page
│   ├── viewTrip/
│   │   └── index.js            # Trip viewing page
│   └── 404.js                  # 404 error page
└── images/                     # Static images

🔧 Configuration

Environment Variables

All configuration is now handled through environment variables in the .env file:

# Firebase Configuration
GATSBY_FIREBASE_API_KEY=your_firebase_api_key_here
GATSBY_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
GATSBY_FIREBASE_DATABASE_URL=https://your_project.firebaseio.com
GATSBY_FIREBASE_PROJECT_ID=your_project_id
GATSBY_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
GATSBY_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id

# Google Maps Configuration
GATSBY_GOOGLE_MAPS_API_KEY=your_google_maps_api_key_here

# Map Default Settings
GATSBY_MAP_DEFAULT_LAT=40.756795
GATSBY_MAP_DEFAULT_LNG=-73.954298
GATSBY_MAP_DEFAULT_ZOOM=13

# Search Box Settings
GATSBY_SEARCH_COUNTRY_RESTRICTION=us
GATSBY_SEARCH_PLACE_TYPES=establishment

Setup Steps

1. Copy the example file: cp .env.example .env
2. Update Firebase values: Get your Firebase config from the Firebase Console
3. Update Google Maps key: Get your API key from Google Cloud Console
4. Customize settings: Adjust map defaults and search restrictions as needed

🚀 Deployment

Netlify (Recommended)

Other Platforms

The built files in public/ can be deployed to any static hosting service:

• Vercel
• GitHub Pages
• AWS S3 + CloudFront
• Firebase Hosting

🤝 Contributing

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Gatsby
• Maps powered by Google Maps Platform
• Database by Firebase
• Icons and UI inspiration from various open source projects