Simplifying navigation for utilities on campus to enhance accessibility and reduce frustration.
Project Manager: Adam
Designer: Ahnaf
Developers: Anant, Viren, Max
With UBC being such a large campus, finding individual utilities that are nearby in a timely manner can be difficult – especially for new students with little to no experience navigating campus. Spending unnecessary amounts of time searching for a bike cage or parking lot can be really frustrating, and even more so between classes. The majority of the available information for utility locations is usually scattered across static maps, outdated websites, or buried within other services. Additionally, no single source provides filtered views of different utility categories, and they do not offer user-generated feedback on the quality or state of those utilities (ie, a bike rack being blocked by construction or a clubroom that has been moved elsewhere). How can a student easily locate working utilities by category without endlessly searching through maps, or digging through pages on outdated websites?
Consequences
The failure to quickly locate essential utilities, such as water refill stations, accessible washrooms safe bike lock locations, or emergency blue phones, leads to unnecessary wasted time, stress, and frustration for students, staff, and visitors. This friction can negatively impact daily logistics, particularly for users with mobility issues or those facing time constraints between classes. For new students, this difficulty contributes to an initial feeling of disorientation and reduced psychological safety on campus, hindering their ability to feel comfortable and integrated.
- Interactive Google Maps integration showing UBC campus
- Real-time utility location tracking (water fountains, bike storage, washrooms, emergency facilities, food, charging stations)
- Category filtering and search functionality
- User feedback system for reporting broken utilities
- Mobile-responsive design with collapsible sidebar
This app requires a Google Maps API key to display the interactive map.
- Go to Google Cloud Console
- Create a new project or select an existing one
- Enable the Maps JavaScript API
- Create credentials (API Key)
- Add the API key to your environment variables:
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_herenpm install
npm run devOpen http://localhost:3000 to view the app.
Add these to your Vercel project or .env file:
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY- Your Google Maps API key (required)
- Next.js 16.0.0
- React 18.3.1
- TypeScript
- Tailwind CSS 4.1.9
- shadcn/ui components
- Google Maps JavaScript API
- @react-google-maps/api