Hitch

Main Screen

Inspiration

York Region is one of the fastest-growing suburbs in Canada, sprawling north of Toronto with schools separated by distances that make walking impossible and transit impractical. Most YRDSB students rely on parents for rides or miss activities entirely. There's no easy way for students living near each other to just coordinate. We wanted to build the simplest possible tool to fix that: not an app that manages rides, but one that helps students find each other and sort it out themselves.

What it does

Hitch is a real-time carpooling coordination platform for YRDSB students. Students sign up, drop a pickup pin at their location, and post a request for a ride to their destination school. A live map shows all 10 YRDSB secondary schools alongside active requests and other online users as avatar bubbles, updated in real time. Students can search for each other by name, send friend requests, and open direct message threads to work out the details before committing to a carpool. A tab badge keeps running request counts visible at a glance.

How we built it

The frontend is React 19 with Vite, styled with Tailwind CSS v4 and Radix UI for accessible component primitives. The interactive map is powered by Mapbox GL, lazy-loaded to isolate initialization failures. The backend is a Python Flask API deployed as Vercel serverless functions, backed by a Supabase (PostgreSQL) database. Authentication is handled with PyJWT and bcrypt. Tokens are issued on login and validated on every API request, with expired sessions logged out automatically. The whole stack deploys to Vercel's CDN with a single vercel.json rewrite rule routing /api/* to the Flask function.

Challenges we ran into

Getting Mapbox to initialize reliably inside a React component lifecycle was trickier than expected. The map library has strong opinions about DOM timing and fails silently in ways that produce a white screen. We solved this by lazy-loading the map component behind a root error boundary. Deploying Flask as a Vercel serverless function also required careful attention to cold start behaviour and routing. The default Python runtime expects a specific entry point structure that isn't obvious from Flask's own docs. Real-time presence (showing online users on the map) without a WebSocket budget meant polling on a 15-second interval and tuning it to feel live without hammering the database.

Accomplishments that we're proud of

We shipped a working, publicly deployed app with a real map, live user presence, friend graphs, and direct messaging, forming a full social coordination loop, in a single hackathon sprint. The app is genuinely usable: any YRDSB student can sign up at hitch-seven.vercel.app right now and post a request. We're also proud of keeping the scope honest. No payment system, no routing engine, no feature creep. It does one thing and does it cleanly.

What we learned

Deploying a Python backend on Vercel is possible but the path is narrow. Serverless functions have cold starts, size limits, and environment constraints that don't apply to a traditional server. Mapbox is powerful but fragile to integrate; wrapping it in an error boundary early saved us a lot of debugging pain later. We also learned that polling, when tuned right, can feel surprisingly close to real-time for presence features without the complexity of WebSockets.

What's next for Hitch

Push notifications when a new request is posted near a student's home location
School-verified email sign-up (restricting to @yrdsb.ca addresses) to improve trust and safety
Recurring schedules so students who carpool the same route every day don't have to re-post each morning
A mobile-first redesign or PWA wrapper so the app lives on the home screen
Group chats per school or per route, not just one-on-one DMs