Inspiration
As international students ourselves, we witnessed firsthand the challenges newcomers face navigating Toronto safely. With over 622,000 international students in Canada, many feel isolated and unsafe exploring their new city, especially after dark. While existing transit apps optimize for speed, none prioritize safety - the most crucial factor for students traveling alone at night.
We were inspired by stories from fellow students who avoided entire neighborhoods due to safety concerns, often taking longer, more expensive routes just to feel secure. We realized that real crime data combined with intelligent routing could empower students to make informed decisions about their daily commutes.
What it does
Pathly is a safety-first transit companion that overlays real crime data onto interactive maps, helping students make informed routing decisions.
Key Features:
- Crime Risk Visualization: Toronto crime data displayed as color-coded hexagons (green=safe, red=avoid)
- Smart Multi-Modal Routing: TTC transit directions with real departure times and line colors
- Intelligent Search: "Coffee near me" finds nearby places with instant route calculation
- Safety-Aware Planning: Schedule trips with "Leave at" or "Arrive by" preferences
- Interactive 3D Maps: Mapbox GL with 3D buildings and smooth navigation
Students can search for destinations, view crime hotspots, and get transit directions that prioritize safety alongside efficiency. The app processes real Toronto crime data into an intuitive visual interface, empowering users to make confident navigation decisions.
How We Built It
Data Processing Pipeline: We processed Toronto's raw crime data using Turf.js for geospatial analysis:
const hexGrid = turf.hexGrid(torontoBounds, 0.2, {units: 'kilometers'});
const crimesInHex = turf.pointsWithinPolygon(crimeData, hex);
Frontend Architecture:
- Next.js 15 with App Router for server-side rendering and performance
- Custom React hooks (
useMap,useRoute,useCrimeHexGrid) for modular functionality - Mapbox GL JS with 3D buildings layer and custom crime overlay
- TypeScript throughout for type safety and better developer experience
Backend Integration:
- Google Maps APIs for routing and places search with transit-specific features
- Supabase for user authentication and real-time database operations
- Drizzle ORM for type-safe database queries
- Clerk for seamless user authentication flow
Key Technical Achievements:
- Optimized 50,000+ crime incidents into hexagonal grid (14.8MB → 3.7MB → 0.43MB)
- Real-time transit routing with TTC line colors and schedules
- Efficient state management across multiple mapping APIs
Deployment: Built for production on Vercel with edge function optimization and CDN distribution for global performance.
Challenges we ran into
Data Optimization Crisis: Our initial crime dataset was 14.8MB - too large for web deployment. We solved this by implementing hexagonal tessellation with Turf.js, reducing it to 3.7MB while maintaining spatial accuracy. API Integration Complexity: Coordinating Google Directions, Places, and Mapbox Search APIs required careful state management and error handling. We built custom hooks to abstract this complexity. Real-time Performance: Rendering thousands of hexagons while maintaining smooth map interactions required optimizing Mapbox layer configurations and implementing efficient re-rendering strategies.
Accomplishments that we're proud of
What we learned
This project pushed us to master geospatial data processing at scale. We learned how to:
- Process and optimize large numbers of crime incidents using Turf.js hexagonal tessellation
- Build responsive mapping interfaces with Mapbox GL JS and custom WebGL layers
- Integrate complex APIs (Google Directions, Places, Mapbox Search) seamlessly
- Design intuitive UX for safety-critical applications
- Optimize large datasets for web performance (14.8MB → 3.7MB → 0.45MB)
We also discovered the importance of real-time data visualization for safety applications - users need instant visual feedback to make quick decisions.
What's next for Pathly
- AI-powered natural language routing
- Predictive risk modeling with ML
- Smart buddy matching for students
- Campus partnerships with UofT, TMU, York and Seneca
Built With
- clerk-auth
- drizzle-orm
- geojson
- google-directions
- google-maps
- mapbox
- next.js
- opendata
- react
- supabase
- tailwind-css
- turf.js
- typescript
- vercel

Log in or sign up for Devpost to join the conversation.