- Lift bridges can open for ship traffic with little warning, leaving drivers stuck for 20-60 minutes at a stretch.
- Official status pages are useful, but they are often plain lists with limited map context when someone just needs a quick answer.
- There was no way to check whether the bridge near you was currently open before you drove there - forcing a frustrating, avoidable wait.
- Tourists and visitors had it even worse: road names meant nothing without a map to orientate them.
- Real-time map: Colour-coded markers on an interactive Leaflet map make open, closing, closed, and lowering bridges easy to read at a glance.
- Live status: Bridge data is checked frequently and refreshed in your browser automatically, so the map stays current without manual reloads.
- Historical stats: Average closure times, time-to-close histograms, and 95% confidence intervals so you can plan your timing.
- Personalisation: Favourite bridges, hide regions you never use, sort by proximity, choose light/dark/system mode, and install the site as a PWA.
- Notifications: Users can choose specific bridges, notification types, active days, and time windows for bridge status alerts.
- Ships on the map: See exactly which vessels are approaching, so you know if a closure is imminent even before the status updates.
1. Data collection
A Node.js scraper polls official bridge status sources using Cheerio. It parses bridge status for St. Catharines, Thorold, Port Colborne, Montreal South Shore, and Salaberry-de-Valleyfield, normalises the data, and caches it in memory to avoid hammering the source.
2. REST API
An Express server exposes /api/bridges, /api/closures, notification endpoints, and /api/bridges/:name/stats. The stats endpoint queries a PostgreSQL database that records every status transition, powering the duration histograms and confidence ranges in the app.
3. React frontend
A React 19 + Vite app fetches bridge data every 30 seconds and renders markers with Leaflet. Colours update smoothly as statuses change:
Frontend
React 19, Vite, Tailwind CSS v4, Leaflet, PWA install support
Backend
Node.js, Express, Cheerio, PostgreSQL, Web Push
Architecture
Service layer pattern, REST API, Supabase-backed preferences and analytics
Deployment
Vercel (frontend), Oracle VM (backend + AIS)
- Smarter push notifications with more precise route and bridge preferences
- Continued PWA improvements so the website feels more like a native app
- Predicted re-opening times using ship AIS data
- Coverage expansion to more lift bridges across Canada
I'm Saqib Khan, a software engineering student at McMaster University and a St. Catharines resident. Growing up here, I experienced firsthand how frustrating bridge delays can be, whether I was commuting to Laura Secord Secondary School, heading to work across the canal, or visiting my girlfriend. After my second year of university, I decided to do something about it and built BridgeStatus.ca as a side project. I'm still actively improving it, and knowing it has now helped over 10,000 people plan their commutes is something I'm genuinely proud of.
Have questions, suggestions, or want to collaborate? I'd love to hear from you.
GitHub: github.com/saqib-21/WellandCanalStatus
LinkedIn: linkedin.com/in/saqib-khan-aa127b275
Email: saqibmominkhan@gmail.com
