Travel Map

Overview

This project is a personal tool to track and visualize travel destinations and places of interest on a map. It allows you to manage and view a list of places you plan to visit, as well as places you want to relax in. The application integrates with the MapTiler API to display interactive maps and custom markers.

Features

• Interactive Map: Visualize locations on an interactive map using the MapTiler API.
• Custom Markers: Add markers to the map for different places with customizable popups.
• Dynamic Tabs: Switch between and organize different lists of places using tabs.
• Rating System: View and manage places with a rating system displayed in the popups.
• Responsive Design: The interface adapts to different screen sizes for better usability on mobile devices.

Technologies Used

• React: For building the user interface.
• Tailwind CSS: For styling and responsive design.
• MapTiler SDK: For map rendering and interaction.
• Vite: For development and build tooling.
• Vercel: For deployment.
• Firebase: Database for storing place data and images.
• Framer: For component and page animations.

Setup Instructions

Prerequisites

• Node.js (v16 or later)
• NPM
• Vercel CLI (Required for the backend to work properly.)

Installation

1. Clone the Repository

   git clone https://github.com/furkanunsalan/TravelMap.git
   cd TravelMap

2. Install Dependencies

   npm install

3. Set Up Environment Variables

   Create a .env file in the root of the project and add your MapTiler API key:

   VITE_API_KEY=your_maptiler_api_key
   FIREBASE_SERVICE_ACCOUNT=firebase_service_account_credential
   AUTH_EMAIL=email_for_submit_page_admin
   AUTH_PASSWORD=password_for_submit_page_admin
   MAIL_PASS=your-smtp-mail-password

4. Run the Development Server

   vercel dev

5. Open the Application in Your Browser

   App will compile on http://localhost:3000 in your browser.

Usage

Adding Places

• Food: list of food related places that I love visiting.
• Chill: List of places to hangout with friends and family.
• Travel: List of places to see around the world.
• Library: List of libraries to sit and study.

Viewing Places on the Map

1. Click on a marker on the map to view details in a popup.
2. The popup will display information such as name, address, the latest visit date, and a rating with stars.

Database Structure

The project uses Firebase Firestore to store information about each place and Firebase Storage for images. Below is the structure for both of the services.

Firestore Database Structure

/places
  └──1EyeJjFgzMS33jogOG2W
        ├── address: "Sinanpaşa, Ihlamurdere Cd. No:25A, 34022 Beşiktaş/İstanbul"
        ├── date: "10-07-2024"
        ├── description: ""
        ├── id: "1EyeJjFgzMS33jogOG2W"
        ├── latitude: "41.044224"
        ├── longitude: "29.003012211640893"
        ├── name: "Balta Burger"
        ├── rating: 4
        ├── site: ""
        ├── slug: "balta-burger"
        ├── status: "Gone"
        └── tag: "Food"

Storage Bucket Structure

/images
    └── /balta-burger
            ├── cover.png
            └── /additional
                └── 1.jpg

Contributing

After running the project by applying the steps in setup instructions, you can make changes, fix errors and send feature requests by the following guide:

1. Create a New Branch

   git checkout -b feature/your-feature
   # or
   git git checkout -b fix/your-fix

2. Make Your Changes

3. Commit Your Changes

   git add .
   git commit -m "feat: Add a descriptive commit message"
   # or 
   git commit -m "fix: Add a descriptive commit message"

4. Push to Remote

   git push origin feature/your-feature

5. Open a Pull Request Open a PR on GitHub from your fork to contribute into the main branch.

License

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

Contact

For any questions or feedback, please reach out to:

• Furkan Ünsalan - [email protected]