https://github.com/danieladdisonorg/hackathon-winner-app
Hackathon Winner App, built with Next.js and TypeScript for a frontend, styled with Tailwind CSS. The Flask backend integrates Claude AI for generating location descriptions and ElevenLabs for text-to-speech conversion. Google Maps API enhances interactivity by displaying routes and POIs, while React hooks manage state
https://github.com/danieladdisonorg/hackathon-winner-app
claude-ai elevenlabs elevenlabs-api google-maps-api nextjs python tailwindcss text-to-speech typescript
Last synced: 10 months ago
JSON representation
Hackathon Winner App, built with Next.js and TypeScript for a frontend, styled with Tailwind CSS. The Flask backend integrates Claude AI for generating location descriptions and ElevenLabs for text-to-speech conversion. Google Maps API enhances interactivity by displaying routes and POIs, while React hooks manage state
- Host: GitHub
- URL: https://github.com/danieladdisonorg/hackathon-winner-app
- Owner: danieladdisonorg
- Created: 2025-06-20T14:38:24.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-20T15:31:14.000Z (12 months ago)
- Last Synced: 2025-06-20T16:34:10.067Z (12 months ago)
- Topics: claude-ai, elevenlabs, elevenlabs-api, google-maps-api, nextjs, python, tailwindcss, text-to-speech, typescript
- Language: TypeScript
- Homepage: https://pointg.vercel.app/
- Size: 635 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# POINT (Point Of Interest Tourguide)
Hackathon Winner | Most Creative Track | TechNYU
## Overview
[POINT](https://devpost.com/software/wandervoice) 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.
## 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.
- **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 (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
## Demo
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
## Installation & Setup
### Prerequisites
- Node.js (v14 or later)
- npm
- API keys for mapping services (if applicable)
### Steps
1. **Clone the repository:**
```bash
git clone https://github.com/danieladdisonorg/Hackathon-Winner-App.git
cd Hackathon-Winner-App
```
2. **Install dependencies:**
```bash
npm install
```
3. **Set up environment variables:**
Create a `.env.local` file in the project root with the following variables:
```env
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=xxxxx
```
4. **Run the development server:**
```bash
npm run dev
```
The application will be available at `http://localhost:3000/`.
5. **Run the backend server:**
The repo is available at: [BuildathonBackend](https://github.com/chitangchin/BuildathonBackend)
## Project Structure
```
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
```
## API Integration
The frontend interacts with the backend Flask API to fetch route details and audio descriptions.
### Checking the health of the backend server
- **Endpoint:** `/health`
- **Method:** `GET`
- **Response:**
```json
{
"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:**
```json
{
"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:**
```bash
npm run build
```
2. **Start the production server:**
```bash
npm start
```
Ensure that the environment variables are set appropriately for production.
### Docker Deployment
1. **Create a `Dockerfile`:**
(Provide the Dockerfile content if available)
2. **Build and run the Docker container:**
```bash
docker build -t route-planner-frontend .
docker run -p 3000:3000 route-planner-frontend
```
## Contributing
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
## License
This project is licensed under the MIT License.
---