Inspiration
We wanted to make campus navigation and event discovery smarter. Students often miss out on events because information is scattered across posters, emails, and chats. Geo Campus Map transforms the static campus layout into an interactive digital ecosystem, where every building becomes a hub of activity.
[ \text{Goal: } \text{Connect people, places, and events through a unified geospatial interface.} ]
What it does
Geo Campus Map visualizes real-time campus events on an interactive Mapbox interface.
- Each building polygon corresponds to a unique
building_id. - When clicked, it fetches data via
[ \texttt{GET /events/{building_id}} ] and displays the event list in a sidebar. - Users can explore categories such as study, food, help, notice, and activity.
How we built it
We designed a full-stack architecture:
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React + Mapbox GL JS | Dynamic visualization of buildings & events |
| Backend | FastAPI | RESTful API for events and buildings |
| Database | MongoDB | Stores event metadata and geospatial info |
| Communication | Axios | Handles API requests and responses |
| UI/UX | Framer Motion + Tailwind CSS | Smooth transitions and responsive layout |
Data Flow: [ \text{User Click} \rightarrow \text{Axios Request} \rightarrow \text{FastAPI Endpoint} \rightarrow \text{MongoDB Query} \rightarrow \text{Dynamic UI Update} ]
Challenges we ran into
- CORS issues and invalid Axios endpoints during early testing.
- Handling asynchronous data rendering before backend responses arrived.
- Processing
MultiPolygongeometry for click detection using Turf.js. - Synchronizing sidebar animations with live map updates.
Accomplishments that we're proud of
- Achieved seamless React–FastAPI integration.
- Built a real-time event fetching system by building ID.
- Designed an elegant animated sidebar showing campus activities.
- Learned to debug collaboratively and ship a stable MVP in limited time.
What we learned
- Mastered Mapbox GL’s data-driven rendering model.
- Applied async programming and API design principles in FastAPI.
- Improved frontend state management using React Hooks.
- Understood that teamwork and debugging discipline are as valuable as code.
What’s next for Geo Campus Map
- Add user authentication and event posting features.
- Implement real-time chat for building-based communities.
- Introduce an achievement system using
[ \text{Points} = \alpha \cdot (\text{posts}) + \beta \cdot (\text{likes}) ] to encourage engagement. - Integrate with official university APIs for live campus alerts.
Log in or sign up for Devpost to join the conversation.