Hackathon Winner | Most Creative Track | TechNYU

POINT is a web application that enables users to calculate routes between a starting point and a destination, displaying points of interest (POIs) along the way. Users can also listen to audio descriptions of select locations.

• 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.
• Interactive Map: Visual representation of routes and POIs using a mapping service.
• Responsive Design: Optimized for various devices and screen sizes.

• Frontend Framework: Next.js (React-based framework)
• TypeScript: For type-safe JavaScript development
• Styling: Tailwind CSS
• Mapping Library: (Google Maps API)
• Text-to-speech: (Eleven Labs)
• API Integration: Communication with the backend Flask API

1. Add the start and end destination:

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

3. Listen about the historical impact and description of the landmark/point of interests

• Node.js (v14 or later)
• npm
• API keys for mapping services (if applicable)

1. Clone the repository:

   git clone https://github.com/danieladdisonorg/Hackathon-Winner-App.git cd Hackathon-Winner-App

2. Install dependencies:

   npm install

3. Set up environment variables:

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

   NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=xxxxx

4. Run the development server:

   npm run dev

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

5. Run the backend server:

The repo is available at: BuildathonBackend

Buildathon/ ├── app/ # Application-specific configurations ├── components/ # Reusable UI components ├── hooks/ # Custom React hooks ├── lib/ # Library utilities ├── public/ # Static assets ├── styles/ # Styling files (CSS, Tailwind configurations) ├── types/ # TypeScript type definitions ├── .gitignore # Git ignore file ├── components.json # (Specify the purpose of this file) ├── flatiron_building_.mp3 # Sample audio file ├── next.config.mjs # Next.js configuration ├── package-lock.json # Lockfile for npm ├── package.json # Project dependencies and scripts ├── postcss.config.mjs # PostCSS configuration ├── tailwind.config.js # Tailwind CSS configuration └── tsconfig.json # TypeScript configuration 

The frontend interacts with the backend Flask API to fetch route details and audio descriptions.

• Endpoint: /health

• Method: GET

• Response:

  { "status": "healthy" }

• 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..." }

• 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.

1. Build the project:

   npm run build

2. Start the production server:

   npm start

   Ensure that the environment variables are set appropriately for production.

1. Create a Dockerfile:

   (Provide the Dockerfile content if available)

2. Build and run the Docker container:

   docker build -t route-planner-frontend . docker run -p 3000:3000 route-planner-frontend

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

This project is licensed under the MIT License.