USF Events Map

Inspiration

As USF students, we found it frustrating to browse through long lists of events on BullsConnect without a clear sense of where things were happening on campus. We wanted to see events spatially—to understand what's happening near us, plan our routes between events, and discover activities in buildings we frequent. The idea of visualizing campus life on a map felt like a natural way to make event discovery more intuitive and engaging.

What it does

USF Events Map transforms the traditional event listing into an interactive map experience. Students can:

Visualize events spatially - See all campus events pinned on an interactive map of USF Tampa campus
Discover nearby activities - Quickly identify events happening in buildings they're already near
Browse in multiple views - Switch between map view and list view based on preference
Filter and search - Find events by date, category, location, or keyword
View comprehensive details - See event information, attendee counts, capacity status, and images

The app fetches real-time data from BullsConnect, automatically geocodes locations to campus buildings, and displays everything on a beautiful, interactive Leaflet map.

How we built it

We built a full-stack application with a clear separation of concerns:

Frontend (React + Leaflet):

Used React 19 with Vite for fast development and hot reloading
Integrated Leaflet and React Leaflet for interactive map visualization
Implemented React Router for seamless navigation between map and list views
Created responsive components with modern CSS styling

Backend (Node.js + Express):

Built a RESTful API with Express that proxies requests to BullsConnect
Implemented intelligent location geocoding using a dictionary of 30+ known USF campus locations
Added caching with Node-Cache (15-minute TTL) to reduce API calls and improve performance
Created a modular authentication system to handle BullsConnect session management

Key Technical Decisions:

Used Leaflet over Google Maps for open-source flexibility and no API key requirements
Implemented client-side caching to minimize server load
Built a location matching algorithm that handles variations (e.g., "MSC", "Marshall Student Center", "Student Center")
Designed the API to return geocoded coordinates alongside event data for efficient map rendering

Challenges we ran into

1. Authentication & Cookie Management: The biggest challenge was accessing full event location data from BullsConnect. Many events showed "Private Location (sign in to display)" when accessed without authentication. We experimented with multiple approaches:

Basic Auth headers
Cookie-based session management with axios-cookiejar-support and tough-cookie
HTML form parsing with Cheerio to extract CSRF tokens
Puppeteer for browser automation (as a fallback)

Ultimately, we implemented a hybrid approach that tries multiple authentication methods and caches session cookies when successful.

2. Location Geocoding: BullsConnect returns location strings in various formats ("MSC 2709", "Room 2709- Marshall Student Center", "USF Theatre 2"). We had to build a robust matching system that:

Handles abbreviations and full names
Parses room numbers and building codes
Matches partial strings and variations
Falls back gracefully when locations aren't recognized

3. API Rate Limiting & Caching: To avoid overwhelming BullsConnect's API, we implemented intelligent caching. However, we needed to balance freshness with performance, leading us to a 15-minute cache TTL that provides a good user experience while respecting the API.

4. Map Performance: Rendering 80+ event markers on a map can be slow. We optimized by:

Grouping events at the same location
Using efficient marker clustering
Implementing lazy loading for event details

Accomplishments that we're proud of

Successfully integrated with BullsConnect API - Despite authentication challenges, we built a working solution that fetches real event data
Built a comprehensive location dictionary - Created mappings for 30+ campus locations with accurate coordinates
Created an intuitive user experience - The map view makes event discovery genuinely easier than browsing lists
Achieved good performance - With caching and optimization, the app loads quickly and feels responsive
Built a production-ready architecture - Clean separation of frontend/backend, proper error handling, and scalable design

What we learned

Session Management: Deep dive into HTTP cookies, session handling, and different authentication mechanisms (Basic Auth, cookie-based, CSRF tokens)
Geocoding Without APIs: Built a custom geocoding system using pattern matching and location dictionaries instead of relying on external services
Map Integration: Learned Leaflet.js and React Leaflet, including marker clustering, popups, and map customization
API Design: Designed RESTful endpoints that balance simplicity with functionality
Performance Optimization: Implemented caching strategies and learned when to cache vs. when to fetch fresh data
Full-Stack Development: Gained experience coordinating frontend and backend development, handling CORS, and managing state across the application

What's next for USF Events Map

Short-term improvements:

Expand the location dictionary to include more buildings and off-campus locations
Add Google Maps Geocoding API integration for more precise coordinates
Implement event filtering by date range with a calendar picker
Add directions/navigation to event locations
Improve mobile responsiveness

Medium-term features: