Event Search — Flask + Vanilla JS

A compact, responsive web app to search Ticketmaster events, view event details with seatmaps, and explore venue information. Built with Flask (backend) and vanilla HTML/CSS/JavaScript (frontend). Deployed on Google App Engine Standard.

Features

• Search events by keyword, category, distance, and location
• Auto‑detect location with browser geolocation (30‑minute cache)
• Manual address geocoding via secure backend proxy (/geocode)
• Results table with sorting (Event, Genre, Venue)
• Event details card with ticket status badges and validated seatmap image
• Venue details card with dynamic layout (logo + more events), maps link
• Clean error handling + tooltips for validation feedback

Tech Stack

• Backend: Flask, requests, flask-cors, gunicorn
• Frontend: HTML5, CSS (Grid/Flexbox), Vanilla JS
• Deploy: Google App Engine (Standard)

Project Structure (key files)

• main.py — Flask app, API proxies (/search, /event-details/<id>, /venue-details, /geocode)
• templates/events.html — main page template
• static/ — style.css, script.js, geohash.js, assets
• app.yaml — App Engine config (runtime, handlers, env)
• requirements.txt — Python dependencies

Environment Variables

Configure the following variables for the backend to access external APIs:

• TICKETMASTER_API_KEY (required)
• GOOGLE_API_KEY (required for manual address geocoding)
• IPINFO_API_KEY (optional; not used if browser geolocation is available)

Local development

Create a .env file in the project root:

TICKETMASTER_API_KEY=your-ticketmaster-key
GOOGLE_API_KEY=your-google-key
IPINFO_API_KEY=optional

Note: .env is ignored by Git and gcloud.

Run locally

1. Create and activate a virtual env (Windows CMD):

python -m venv venv
venv\Scripts\activate

2. Install dependencies:

pip install -r requirements.txt

3. Start the server:

python main.py

4. Open the app at http://127.0.0.1:5000/

Deployment (Google App Engine Standard)

1. Ensure gcloud is installed and you’re logged in.
2. Verify app.yaml:

runtime: python312
service: default
entrypoint: gunicorn -b :$PORT main:app
handlers:
  - url: /static
    static_dir: static
  - url: /.*
    script: auto
env_variables:
  FLASK_ENV: production
  TICKETMASTER_API_KEY: "<set in console or here>"
  GOOGLE_API_KEY: "<set in console or here>"
  IPINFO_API_KEY: ""

3. Deploy:

gcloud app deploy app.yaml

4. Open:

gcloud app browse

Using app.yaml.example

• This repo includes app.yaml.example with safe placeholders.
• Copy it to app.yaml and fill in your real API keys before deploying:
  • TICKETMASTER_API_KEY
  • GOOGLE_API_KEY
  • IPINFO_API_KEY (optional)
• app.yaml is listed in .gitignore, so your real keys won’t be committed by accident.

Security & keys

• The frontend never exposes the Google key; it calls /geocode on the backend.
• Keep real keys in .env (local) or env_variables (App Engine). Consider using Secret Manager for production.

Troubleshooting

• CORS errors: Ensure you access the app through Flask or the deployed domain (not from file://).
• 500 "TICKETMASTER_API_KEY is not set": Check your .env locally or env_variables in App Engine.
• Geohash errors: Ensure static/geohash.js is loaded in events.html.
• Seatmap not showing: The code validates image before rendering; some events don’t have a seatmap.

License

MIT (for coursework; verify class guidelines if submission requires restrictions).