Campus Accessibility Audit Tool

Overview

The Problem: Campus infrastructure barriers (broken elevators, blocked ramps) are often underreported or difficult for facility managers to track in real-time, leaving disabled students stranded.

The Solution: A mobile-first Progressive Web App (PWA) that allows users to seamlessly log physical barriers with precise GPS coordinates, and provides administrators with a map/list visualization and CSV export tool.

Tech Stack

• Frontend: Next.js (React), Tailwind CSS
• Mapping: Leaflet.js (via react-leaflet)
• Backend & Database: Supabase (PostgreSQL Database)

Key Features

• One-click GPS coordinate capture (or manual entry).
• Live map visualization of 'Open' issues.
• Algorithmic duplicate detection (Haversine formula prevents identical reports within 20 meters).
• One-click CSV and JSON data export for facility managers.

Local Setup Instructions

1. Clone the repository and navigate into the project folder.
2. Run npm install to install dependencies.
3. Create a .env.local file in the root directory and add your Supabase credentials:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   

4. Run npm run dev to start the development server on localhost:3000.

---

Design Thinking & UX Notes

1. Empathize & Define

Through research, we identified two primary users: the student facing the barrier, who needs a fast, frictionless way to report it, and the facility manager, who needs structured data (not just vague emails) to fix it.

2. Ideate & Prototype

We chose a mobile-first UI with large, high-contrast buttons because a student in a wheelchair or using crutches needs to submit a report quickly while navigating the physical environment. Typing long paragraphs is not optimal, so we relied heavily on dropdown categories and GPS coordinates.

3. Accessibility Constraints

The application utilizes standard semantic HTML (<form>, <button>, <label>) to ensure compatibility with screen readers. High-contrast colors were chosen to aid visually impaired users.

---

Testing Scenarios (For Final Demo)

Use these scenarios during the final presentation to demonstrate rubric fulfillment:

• Scenario A: The Happy Path (Submission)

  • Action: Act as a student who just found a blocked ramp. Select "Blocked Ramp", type "Delivery truck parked on ramp," and submit the coordinates.
  • Result: The blue pin instantly appears on the live Leaflet map.

• Scenario B: Input Validation & Duplicate Test

  • Action: Try to submit the exact same "Blocked Ramp" issue at the exact same coordinates.
  • Result: The app safely blocks the submission and displays a duplicate warning message, proving the Haversine distance logic (20m radius) works.

• Scenario C: Admin Export

  • Action: Act as the facilities manager and toggle to the List View.
  • Result: Click "Export CSV" and open the downloaded file to demonstrate how easily the structured data can be imported into a university's existing maintenance software.