CTRI Mapping & Resource Navigator
Summary
CTRI is a specialized Progressive Web App (PWA) designed to provide instant, life-saving access to essential community resources. The platform serves as a centralized directory for food pantries, cooling centers, and religious facilities, offering users real-time proximity data and precise, turn-by-turn navigation. By leveraging a custom-built PHP backend and a highly responsive Mapbox-integrated frontend, CTRI ensures that vulnerable populations can reach help with minimal friction.
Client
CTRI Ecological Mapping Task Force
YEAR
2026
PROBLEM
The client identified a critical “information gap” in urban community support. Aid data was fragmented across static websites and outdated PDFs. The Task Force needed a unified, mobile-first digital tool that could:
- Automate Geocoding: Convert hundreds of street addresses into precise GPS coordinates.
- Proximity Logic: Calculate distances between a user’s live location and the nearest aid centre.
- Frictionless UX: Offer “one-touch” navigation and direct-dialling for users in urgent situations.
- Zero-Install Deployment: Function as a lightweight app without requiring an App Store download.
Research & Process
The development followed a four-stage engineering cycle:
1. Architecture & PWA Strategy
I opted for a PWA architecture to ensure the app remains lightweight and installable on both iOS and Android. I implemented a Service Worker to handle asset caching, ensuring the UI remains responsive even during network fluctuations, a critical feature for users with limited data plans.
2. Backend & Data Engineering
I developed a custom administrative suite to manage resource data.
- The Challenge: Handling inconsistent data from various Excel sources (e.g., varying column orders for “Mosques” vs. “Food Pantries”).
- The Solution: Engineered a Dynamic CSV Import Engine in PHP. This script sanitises data, maps columns based on category, and utilises the Mapbox Geocoding API to automatically translate street addresses into $latitude$ and $longitude$ data during the upload process.
3. Navigation & Geospatial Logic
To build a “Google Maps-style” experience in the browser:
- Utilised Mapbox GL JS for the custom navigation engine.
- Implemented the Haversine formula for high-accuracy “nearest-to-me” sorting.
- Integrated a real-time manoeuvre library to provide turn-by-turn instructions via interactive SVGs.
4. Security & Defensive Coding
I implemented a secure authentication system using PDO and password hashing. Recognising that real-world data is often incomplete, I wrote defensive PHP logic to handle NULL time values, preventing frontend crashes (specifically addressing PHP 8.3 deprecations) and ensuring the app always displays helpful “Hours Vary” information.
RESULT
The final CTRI application successfully bridged the gap between community resources and those in need.
- Zero-Footprint Deployment: Successfully launched as a PWA, allowing users to “Add to Home Screen” with full offline-ready assets via Service Workers.
- Clean Data Architecture: Migrated 100+ records with a “Duplicate-Check” algorithm that skips existing entries, maintaining a clean and professional database.
- Automated Geolocation: 100% of imported resources now feature accurate Mapbox pins and turn-by-turn navigation instructions, generated automatically during the upload process.
- Dynamic Mapping: Displays status indicators (Open/Closed) based on real-time server-side logic.
- High Performance: Achieved top-tier Lighthouse scores, providing a native-app feel with near-instant load times.
- Administrative Control: The Task Force now manages the entire region’s resource database through a secure dashboard, ensuring the public never follows directions to a closed location.