BCIT WayFinder — Campus Navigation App
- Role: Student Developer (Frontend)
- Engagement: Team project — 4 weeks
- Project Timeline: Single 4-week sprint (3-person team)
🎓 BCIT🗺️ Campus Maps⚛️ ReactMaterial UI📍 Geolocation🔎 Autocomplete🧮 Dijkstra🐍 Python
BCIT WayFinder is a campus navigation app for the BCIT Burnaby campus. It helps students, staff, and visitors navigate footpaths and buildings where Google Maps lacks coverage. I led the React frontend while teammates handled data extraction and backend integrations.
30+
🏢 Buildings & Accomodations
1
🏛️ Summit presentation (Digital Twin)
1
💡 MVP that catalyzed funding
- Google Maps lacks BCIT’s internal footpath network.
- New students and visitors struggle to route between classes, including through buildings.
A React web app with a familiar mapping UI, geolocation to show current position, an autocomplete search for buildings and amenities, and custom routing based on a campus PDF converted into nodes and intersections. We computed shortest paths with Dijkstra’s algorithm and rendered routes with building info and color-coded markers.
- Geolocation: display current user position on campus.
- Search & Autocomplete: buildings and amenities with instant suggestions.
- Routing: shortest path using preprocessed footpath graph.
- POI Details: building info cards and markers.
- Implemented the React frontend (layout, components, Material UI).
- Integrated map view, geolocation, and destination search UX.
- Hooked frontend to JSON route data and rendered paths/markers.
- Coordinated UI with teammates’ data extraction and APIs.
🏗️ Architecture & Stack
- Frontend: React, Material UI
- APIs: Google Maps API (geolocation, coordinates)
- Backend/Data: Python for footpath extraction, Dijkstra shortest path, JSON generation
- Hosting: Free static hosting (prototype demo)
🤔 Why this approach?
- Leverages familiar map UX to reduce onboarding friction.
- Custom footpath graph enables accurate on-campus routing that Google lacks.
- Lightweight prototype stack fit a 4-week delivery window.
- Separation of concerns (data processing ➡️ JSON; UI ➡️ React) eased iteration.
- Deployed and demoed live (prototype; link later disabled).
- Presented at BCIT’s Digital Transformation / Digital Twin Summit.
- Helped spark funding interest for a commercial-grade navigation app.
- Validated feasibility with a 3-student, 4-week MVP.
- First substantial use of React with component architecture.
- Project organization and directory structure matter for scalability.
- Small-team collaboration: coordinated independent features with shared data.
- If rebuilt: cleaner app structure, real-time route data collection, and turn-by-turn navigation.
Not live — Google Maps API disabled