POINT

Overview

When people travel, they often miss out on fascinating landmarks or local points of interest, or they simply wish they’d known more about them beforehand. Our app fixes that by tracking every noteworthy spot along your route and providing you with a deep dive into its history. Whether it’s a well-known sight or a hidden gem, we’ll make sure you’re fully immersed in the story behind it—so you can get the most out of your journey, every step of the way.

Features

• Route Calculation: Input a starting location and destination to compute the optimal route.
• Points of Interest Display: View notable locations along the route with relevant details.
• Audio Playback: Listen to descriptions of select POIs (Points of Interest).
• Interactive Map: Visual representation of routes and POIs using a mapping service.
• Responsive Design: Optimized for various devices and screen sizes.

Technologies Used

• Frontend Framework: Next.js with TypeScript
• Styling: Tailwind CSS
• Mapping Library: Google Maps API
• API Integration: Flask

Demo for desktop/laptop

1. Add the start and end destination, view some point of interests on the map:

2. Choose which landmarks/point of interests you want to learn more about

3. Have full control of the audio description

Demo for mobile: Pixel 7 Dimensions

1. Add the start and end destination, view some point of interests on the map:

2. Choose the landmark/point of interest you are interested in

3. Have full control of the audio description in mobile

Installation & Setup

Prerequisites

• Node.js (23.x)
• API key for google map
• Visual Studio Code

Steps

1. Fork the repository:

2. Clone the repository:

   git clone https://github.com/{YourUserName}/POINT.git
   cd POINT

3. Install dependencies & build:

   npm install
   npm run build

4. Set up environment variables:

   Create a .env.local file in the project root with the following variables:

   NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=xxxxx

5. Run the development server:

   npm run dev

   The application will be available at http://localhost:3000/.

6. Run the backend server locally:

The repo is available at: BuildathonBackend

API Integration

The frontend interacts with the backend Flask API to fetch server health, route details, and the audio file.

Checking the health of the backend server

• Endpoint: /health

• Method: GET

• Response:

  {
    "status": "healthy"
  }

Fetching Location Information (Text Only)

• Endpoint: /get-location-info

• Method: GET

• Query Parameters:

  • place: Name of the location (e.g., ?place=Flatiron)

• Response:

  {
    "place": "Flatiron",
    "description": "Now approaching the Flatiron Building, an iconic triangular skyscraper..."
  }

Fetching Points of Interest & Audio

• Endpoint: /get-location-audio
• Method: GET
• Query Parameters:
  • place: Name of the location (e.g., ?place=Flatiron)
• Response: Returns an MP3 file for audio playback.

Deployment

Running in Production

1. Build the project:

   npm run build

2. Start the production server:

   npm start