TypeScript Next.js 15 Mobile-First PWA

ParkFindr

Open it. See parks. No accounts, no ads, no navigation maze. ParkFindr finds green spaces near you and puts them on a map alongside a scrollable list, instantly.

Why It Exists

Finding a nearby park should take two seconds. Instead it usually means navigating a city website, opening a separate mapping app, or scrolling past sponsored listings. ParkFindr is a single-purpose tool with one job: open it and see parks.

Who uses it Why
Parents with young children Quickly find playgrounds in an unfamiliar neighborhood
Dog owners Locate dog-friendly parks and open green spaces
Travelers Discover parks near a hotel or transit stop without context-switching
Urban residents Find the closest green space for a lunch break or weekend walk

Features

Two Map Providers

OpenStreetMap via Leaflet is the default and requires no API key. Switch to Google Maps at any time from within the app; the preference persists between sessions.

Map Is Never Blank

IP-based geolocation fires the moment the page loads, so the map shows something useful while the browser permission prompt is still pending. Browser location replaces it automatically once granted.

Offline-Ready Caching

Search results are cached locally so repeat visits and map pans reuse recent data. Useful when signal drops mid-walk. Server-side caching reduces redundant API calls across all users.

Search Anywhere

Autocomplete search lets you look up parks by name or jump to any address. Results are biased toward your current location to surface the most relevant options first.

Location Resolution

ParkFindr resolves your location through a layered approach so there is always something to show, even before you interact with any permission prompt.

  1. 1 Remembered permission. If you previously allowed location access, the browser geolocation API is called immediately on load with no prompt.
  2. 2 IP geolocation (parallel). Fires at the same time as step 1 so the map is never blank while a permission dialog is pending.
  3. 3 Consent flow. First-time visitors see a location permission modal. Granting it replaces the IP estimate with precise browser coordinates.
  4. 4 Default fallback. If everything else fails, the map centers on New York City. Not ideal, but the app stays functional.

Map Providers

Both renderers implement the same interface, so switching is seamless. The selection persists in localStorage.

Provider API Key Required Notes
OpenStreetMap + Leaflet No Default. Free, tile-based, works anywhere.
Google Maps Yes Richer styling and Street View when available.

Tech Stack

Layer Technology
Framework Next.js 15 (App Router)
Language TypeScript
Styling Tailwind CSS + shadcn/ui (Radix UI primitives)
Map (default) OpenStreetMap via Leaflet
Map (optional) Google Maps JavaScript API
Places data Google Places API (Nearby Search, Details, Autocomplete)
Deployment Vercel