About This Project

🌉 Project Overview

The Welland Canal Bridge Status Visualizer provides real-time bridge status updates using live data from the official Seaway website. This tool was built to solve a personal problem that affects 100+ local commuters daily.

🎯 The Problem

• Lift bridges across the Welland Canal frequently open for ship traffic, causing unexpected delays
• Local commuters often get stuck waiting, making them late for work, school, or appointments
• Existing information sites only show road names without maps, confusing tourists and visitors
• Official updates are text-heavy and not mobile-friendly

💡 The Solution

• Real-time Interactive Map: See all bridge statuses at a glance with color-coded markers
• User Location Tracking: Instantly see which bridges are closest to you
• Fast Updates: Bridge data refreshes every 30 seconds with smart caching
• Mobile-Friendly Design: Works seamlessly on all devices
• Tourist-Friendly: Visual map helps visitors navigate without knowing road names

🛠️ Technologies Used

🏗️ How It Works

1. Data Collection (Backend)

The Node.js server scrapes bridge status data from the official Seaway website every 20 seconds and caches it in memory to reduce load on the source.

2. API Endpoint

Express server provides a REST API (/api/bridges) that combines data from St. Catharines/Thorold and Port Colborne regions.

3. Frontend Display (React)

The React app fetches bridge data every 30 seconds and displays it on an interactive Google Map with color-coded markers:

• 🟢 Green: Bridge is open and available
• 🔴 Red: Bridge is closed/raised
• 🟡 Yellow: Bridge is raising soon
• 🟣 Purple: Bridge is lowering
• 🔵 Blue: Your current location

4. User Location

The app uses the browser's Geolocation API to track your position in real-time, helping you see which bridges are nearby and plan your route accordingly.

📚 Learning Outcomes

• Backend Development: REST API design, web scraping, caching strategies
• Frontend Development: React hooks, Google Maps integration, real-time geolocation
• Software Architecture: OOP principles, SOLID design patterns, service layers
• Deployment: Cloud hosting, API key management, production optimization

🔮 Future Enhancements

• Expand coverage to more lift bridges across Ontario and Canada
• Push notifications when nearby bridges are opening/closing
• Native mobile apps (iOS/Android)
• User accounts to save favorite bridges
• Analytics dashboard showing bridge usage patterns

👨‍💻 Developer

Built by a local commuter frustrated with bridge delays. This project demonstrates full-stack development skills while solving a real community problem.

GitHub: github.com/saqib-21/WellandCanalStatus

📧 Contact

Have questions, suggestions, or want to collaborate? I'd love to hear from you!