Philly GamePlan

Philly GamePlan: plan the whole game day with your crew, from pregame to postgame, and know who's running late before kickoff.

Comment

Inspiration

Game day in Philly is a whole-day event: the tailgate in Lot K, a bar on Passyunk, a Broad Street Line ride packed with jerseys, and the friend who's always 20 minutes behind. We kept planning these days across scattered group chats, screenshots of Google Maps, and "where are you??" texts. We wanted one place where a group could plan the whole outing together and actually show up on time.

What it does

Philly GamePlan helps a group of friends plan a full game day for the Eagles, Phillies, 76ers or Temple football.

  • Pick a game and an arrive-by time. Upcoming games come in live, and we build a transit or driving route with a leave-by time. All times are shown in Philadelphia time.
  • Save the plan and invite your crew with one link. Friends preview the game before joining, and the plan has leaders, co-leaders and members.
  • Add pregame and postgame stops near the venue. Suggestions match your vibe (food or bars) and your budget, show walk times, and include a tailgate option, because that's the real pregame for Eagles fans.
  • See the whole day at a glance on a shared schedule and map.
  • Live group map on game day. Friends can choose to share their location, tap each other to see distance and ETA to the next stop, and get a "might be late" alert when someone is falling behind. There's also a manual "I'm running late" button.

How we built it

Frontend: Next.js (App Router) with TypeScript and Tailwind, built mobile-first.

Backend: Next.js API routes on Vercel, with Supabase for auth and Postgres.

Database security: row-level security plus database functions, so access rules like "only members see a plan" and "only leaders can invite" are enforced by the database, not just the API.

APIs:

  • Ticketmaster Discovery for games and venues
  • Google Routes for leave-by times and live ETAs
  • Google Places API (New) for nearby spots
  • Google Maps JavaScript API for the map

Teamwork: we split the work cleanly. Daniel owned the pages and components; Andrew owned the API and database. We agreed on every endpoint's fields and status codes before coding, and each feature went through its own branch and pull request.

Challenges we ran into

  • Keeping frontend and backend in sync. A mismatched field name (like title vs planTitle) quietly broke a flow more than once. That's why we started writing the API contract down before building anything.
  • The South Philly sports complex has almost nothing within walking distance. We had to widen the search and include East Passyunk near the Broad Street Line to get useful suggestions.
  • Google's data rules. You can only store Place IDs, so every place name and address is looked up fresh, and route results are kept separate so they can be removed later.
  • Time zones and daylight saving. An "Arrive by 6:15 PM" picker has to mean Philadelphia time for everyone, no matter where their phone thinks it is.
  • Designing live location responsibly. It had to be useful on game day without turning into a tracking app.
  • Git merge conflicts under hackathon time pressure.

Accomplishments that we're proud of

  • A privacy-first live map:

    • Off by default.
    • Only visible to plan members.
    • Only works during a game-day window.
    • Keeps just your latest spot, never a history.
    • Deleted after the game.

  • "Might be late" alerts that compare a friend's live ETA with the plan, so the crew knows before kickoff instead of after. The alerts are rate-limited so they don't spam anyone.

  • Security rules that live in the database. A plan you're not in simply doesn't exist for you, and even a hand-crafted request can't get around the rules.

  • Philly-specific touches: the tailgate option, Broad Street Line-aware suggestions, and team-aware game lengths.

What we learned

  • Agreeing on the contract between frontend and backend up front saves far more time than it costs.
  • Row-level security in Postgres is a powerful way to make access rules impossible to forget.
  • Reading an API's terms of service early changes how you design your data model.
  • Location features need privacy designed in from the start, not bolted on later.
  • Small branches and PRs are how two people move fast without overwriting each other.

What's next for Philly GamePlan

  • "The game is over" button that re-times postgame plans around the real final whistle instead of an estimate.
  • Group voting on pregame and postgame spots.
  • Opening-hours checks that flag spots that won't be open, and mark unknown hours as unverified.
  • More teams and venues: Flyers, Union, Villanova and Penn, plus concerts at the same arenas.
  • Tailgate tools: who's bringing what, parking lot meetups, and splitting costs.

Built With

Share this project:

Updates

Submission history