CRASHCourse

Worried about running into a skateboard, bike, or scooter? With CRASHCourse, you can see which locations are the most accident-prone at a given time and report any crashes you see. Stay safe, Aggies!

Comment

Inspiration

After seeing that the sub-categories were A&M-related or skating-themed, our minds immediately focused on the chaotic intersection of skaters, pedestrians, bicycles, and scooters on the dense Texas A&M campus. We realized the problem stems from both a lack of predictive data to proactively avoid high-risk zones and a lack of awareness among students. This was made personal since our own roommate has already crashed three times riding his scooter this semester due to distracted pedestrians. Taking inspiration from the simplicity and necessity of A&M’s own applications like Aggie Map or bus routes, we decided to build CRASHCourse: a real-time predictive application that identifies and alerts users to high-risk zones and collision spots across Aggieland. Our goal was simple: to build an application that is simple and fun to use (Lots of creative UI components that highlight the spirit of Aggieland) and ultimately keeps Aggies safer!

What it does

CRASHCourse is an intuitive, single-page application built on React Leaflet that visualizes three critical layers of campus flow:
Predictive Cluster Hotspots: Our core logic uses simulated class data to predict congestion across campus for any given time slot. Instead of marking individual buildings, we calculate geospatial weighted centroids across logical campus zones. If the collective student proportion exceeds a threshold (We chose 0.15 or 15% of all students in classes), a large, pulsating maroon circle appears at the calculated congestion center.
Real-Time Collision Reporting: Users can instantly report a collision or hazard by clicking a button and tapping the map. This creates a high-priority, pulsating orange Miss Rev marker, instantly alerting others. To add an A&M-specific creative element, a random, side-to-side animated Miss Rev icon pops up at the latitude and longitude of the reported crash site.
Intuitive Skater-Slider UI: We replaced clunky dropdown menus with a custom Miss Rev Skater-Slider. Moving the Miss Rev icon across the maroon-filled timeline instantly changes between different static maps for all times from the predictive data, providing a seamless, fast way to visualize future traffic each week.

How we built it

Our development process focused heavily on data preparation and front-end performance:
Data Simulation & Preparation: After confirming the lack of public class schedule data (Using A&M’s Aggie schedule builder was an initial option, but we decided that generating a script to scrape data from the website would be too intensive and wouldn’t populate the data we actually need), we generated a comprehensive dataset simulating student proportions across 60+ campus buildings for MWF and TTH schedules based on total classroom capacity.
Geospatial Clustering (The Core Logic): We took each building and its 3 nearest neighbors and transformed them into 10 logical campus clusters (e.g., Central Engineering, West Aggie). For every time slot, we calculated the weighted average Latitude and Longitude (centroid) for each cluster, using the calculated student proportion as the weight. This ensures the hotspot is pulled toward the heaviest traffic within a zone, making the prediction far more accurate than simple single-building data.
Front-end Implementation (Next.js & React Leaflet): We utilized Next.js for its stability and modern React features. We generated some custom UI component designs using v0.dev by Vercel, which allowed us to really have some fun making the application emulate the themes of A&M. We integrated React Leaflet for the map rendering and built the complex Skater-Slider component to handle the dynamic time slot filtering (switching automatically between 50-minute and 75-minute schedules).

Challenges we ran into

The primary challenge was data scarcity, forcing us to become domain experts in data estimation. This pivoted into three technical challenges:
Weighted Centroid Calculation: Building the Python script to perform the 60+ building to 10-cluster weighted average calculation was mathematically complex, as it required accurately summing proportions and calculating the center of gravity for each unique time-day permutation.
Leaflet/CSS Animation Clashes: Our creative pulsating hotspot feature (applied to the CircleMarker) initially caused the markers to shift horizontally. This was due to the CSS transform property clashing with Leaflet’s internal positioning transformations. We solved this by creating a specific CSS selector (.pulsating-hotspot > path) to target the inner SVG element, ensuring the animation was stable and perfectly centered.
Next.js Static Export: We had difficulties attempting to export our code into Github Pages because we could not pull from the right gh-pages branch instead of the main branch.

Accomplishments that we're proud of

We are most proud of the fusion of complex back-end logic with intuitive, creative front-end design:
Geospatial Logic: Successfully implementing the weighted centroid clustering and filtering logic, transforming raw capacity data into a highly intelligent, actionable alert map.
The Skater-Slider: Creating a custom, fully accessible UI component that makes the time-based predictive feature feel seamless and fun, embodying the app's spirit.
Miss Rev Alerts: The quick, simple addition of the animated, random Miss Rev icons adds the necessary creativity and visual flair to draw attention in a hackathon setting.

What we learned

We learned three key lessons in rapid application development:
Data Scarcity is not a Barrier: How to quickly pivot from seeking public data to creating realistic, defensible simulations using the data we had access to (classroom capacity).
Geospatial Analysis: Practical application of weighted averages and geospatial clustering to solve a non-trivial data visualization problem.
UI Flexibility: We learned how to have fun making different creative components with the UI, and ensuring that integration worked as needed anytime we changed a certain piece of the UI (Dropdown to slider).

What’s next for CRASHCourse

To make CRASHCourse a viable campus safety application, we would focus on:
Real-Time Data Integration: Hooking up to a university API (if available or figuring out a way to access raw class time data from A&M’s schedule builder) or piloting a beta with a few classes to integrate live attendance data for true real-time changes.
Route Optimization Module: Building an algorithm that calculates the fastest route for a user while explicitly avoiding current or predicted high-risk hotspot zones.
Full Weekend/Activity Schedule: Expanding the dataset to include club meetings, athletic events, and weekend activities to provide full 7-day coverage.
Native Mobile Application: Tracking the user's location to provide more relevant information and alerts based on proximity, prioritizing hotspots in their immediate vicinity.

Share this project:

Updates