SafeWalk

• 

  SafeWalk’s interactive vector map. Coloured pins shown here are labelled sample hazards for the prototype demo.

Inspiration and the local problem A walking route can look short on a map and still contain a dark stretch, a missing sidewalk or a difficult crossing. SafeWalk focuses on students and other pedestrians in Cypress, Texas, who need a way to share these specific concerns and check the reports along a walk before leaving.

This is a working community-reporting prototype. The empty-map examples are explicitly labelled [sample]; they are demonstrations, not verified incidents. We have not yet completed a formal student survey or field study, and we do not claim that an absence of reports proves a street is safe.

What it does

• Report a spot: select a point on the map, choose one of 11 hazard categories, rate its severity from 1–5, and optionally add a note of up to 280 characters.
• Check a walk: select a start and destination. SafeWalk checks reports within 80 metres of the straight line between them and computes a 0–100 report-based score. Recent and severe reports have a larger effect.
• Find your location: centre the map on your current position to make reporting easier.
• Share reports without an account: real reports are stored in Supabase so other visitors can see them. Users do not need to provide a name or email.

The route check currently measures a straight-line corridor, not a navigable walking route. Scores summarize available community reports and are not a guarantee of safety or a replacement for emergency services.

How we built it The application uses Next.js 15, React, TypeScript and Tailwind CSS. MapLibre GL renders crisp vector maps using OpenFreeMap and OpenStreetMap data. Supabase provides Postgres storage with row-level security: anonymous users can read and insert reports, while browser clients cannot edit or delete them. GSAP, ScrollTrigger and Lenis power the landing-page motion. The code is hosted on GitHub and deployed on Vercel.

Challenges we ran into Reliable map rendering was the biggest challenge. Raster tile providers produced rate limits or blurry maps, so the project moved from Leaflet to MapLibre vector tiles. Integrating the map required client-side loading, correct module imports and a self-hosted worker. We also fixed preview remount issues and a deployment failure in the Google Fonts loader by bundling fonts locally.

Keeping an account-free shared database constrained was another challenge. The database enforces allowed categories, severity limits and note length, and row-level security restricts the operations available to public clients.

Accomplishments and what we learned We built and deployed a complete reporting flow with a shared database, an interactive map and a route-corridor assessment. We learned that map clarity, deployment reliability and honest presentation of limited data matter as much as the visual design. Labelled samples make the demo understandable without presenting invented hazards as real observations.

What's next Replace the straight-line check with real walking routes; validate the idea through local route walks and student feedback; add confirmations for hazards that are still present; and introduce moderation and rate limiting before a wider public rollout. A longer-term goal is to summarize recurring hotspots for schools and local officials.

Live demo: https://safewalk-rho.vercel.app Source code: https://github.com/Yenula-W/safewalk

Built With

• gsap
• maplibre
• next.js
• openstreetmap
• postgresql
• react
• supabase
• tailwind-css
• typescript
• vercel