SeatBite

Order food from your stadium seat and track your delivery in real-time — DoorDash, but for the stands.

Comment

SeatBite

Inspiration

Stadium food has always been a frustrating experience. Long lines, missed plays, and cold food by the time you get back to your seat. We wanted to solve this by bringing the food to the fan — not the other way around. Inspired by apps like DoorDash, we asked ourselves: why can't stadium food delivery work the same way? SeatBite was born from that idea — a seamless, real-time food ordering and delivery system built specifically for stadiums.

What it does

SeatBite is a full-stack stadium food delivery app with two distinct interfaces:

  • Customer Interface (Mobile): Fans browse a menu, add items to their cart, enter their seat number, and place an order — all from their phone without leaving their seat.
  • Delivery Interface (Desktop): Stadium staff see incoming orders in real time, view the full order details including seat location, and mark orders as complete when delivered.

The app supports user authentication, real-time order tracking, cart management with quantity controls, and automatic order removal from the delivery dashboard once completed.

How we built it

SeatBite was built using a modern JavaScript stack optimized for rapid development:

  • Frontend: React + Vite for fast development and hot reloading
  • Styling: Inline styles with a consistent dark navy and gold design system
  • Routing: React Router for seamless navigation between pages
  • Backend & Database: Firebase Firestore for real-time data storage and retrieval
  • Authentication: Firebase Auth with Email/Password sign-in
  • State Management: React useState and useContext for cart and user type state
  • Hosting: Firebase Hosting for instant deployment

We split the team across three parallel workstreams — Customer UI, Delivery UI, and Firebase backend — and integrated everything in the final hours of the hackathon.

Challenges we ran into

  • Firestore inconsistencies: Some menu documents had field names with trailing spaces (e.g., Protein vs Protein), causing data to silently fail to render. We added fallback logic to handle both cases.
  • Image handling: We discovered that Firebase Firestore cannot store JavaScript image objects, so we built a local imageMap that maps item names to imported assets across both the customer and delivery interfaces.
  • Scroll behavior: CSS conflicts between overflow: hidden on the body and our page containers caused scrolling issues that took significant debugging to resolve.
  • ArrayUnion limitations: Firebase's arrayUnion prevents duplicate objects, which broke our quantity increment logic. We switched to spreading the array manually to allow proper quantity tracking.
  • Role-based routing: Managing two completely different UIs (mobile customer vs desktop delivery) within a single React app required careful use of React Context to persist the user type across navigation.

Accomplishments that we're proud of

  • Built a fully functional end-to-end ordering system in under 30 hours
  • Real-time order delivery dashboard that updates as customers place orders
  • Clean, polished mobile UI that feels like a native app
  • Role-based experience — the same login flow routes customers and delivery staff to completely different interfaces
  • Firestore cart system that persists across sessions and syncs instantly
  • Order completion flow that deletes the Firestore document and removes the order from the delivery dashboard in real time

What we learned

  • How to structure a Firebase Firestore schema for a real-time ordering system
  • How to use React Context to share state across deeply nested components
  • The importance of consistent field naming in NoSQL databases
  • How to build two completely different UI experiences (mobile and desktop) within a single React codebase
  • How to debug data issues by logging raw Firestore responses to the console
  • How to manage a team under time pressure by splitting work into parallel tracks with clear ownership

What's next for SeatBite

  • Stripe Payment Integration: Full payment processing before order confirmation
  • Real-time order status: Live status updates pushed to the customer (Preparing → On the way → Delivered)
  • Pathfinding map: An interactive stadium map with Dijkstra's algorithm to show the delivery person the shortest path to the customer's seat
  • Push notifications: Notify customers when their order is picked up and on the way
  • Seat QR codes: Customers scan a QR code at their seat to auto-fill their seat number
  • Analytics dashboard: Track popular items, peak ordering times, and delivery performance
  • Multi-stadium support: Expand beyond a single stadium with configurable menus and layouts per venue
Share this project:

Updates