What I Built

Green Spaces is a community memory map where anyone can pin a natural space that matters to them and leave a short story about why. Trails, summits, parks, beaches, urban green spaces. Drop a pin, write something real, and it shows up for everyone in real time.

The map launches with seed data pulled from Pennsylvania locations (I'm Pittsburgh based and figured I'd start local), including a few spots from my own backpacking trips that I added personally. The idea is that over time it becomes a living record of places people actually love, not a list of "top 10 parks" some SEO article generated.

Code

jakeflavin / green-spaces

Green Spaces Memory Map

A community web app where users pin favourite natural spaces — trails, summits, parks, beaches, and urban green spaces — on a world map, attaching a photo and a short story. Anonymous contributions, no account needed.

Stack

React 19 + TypeScript + Vite — static SPA
Leaflet / react-leaflet — interactive map with custom SVG pins
Firebase — Firestore (real-time data) + Storage (photo uploads)
Tailwind CSS v3 — custom gs-* colour palette, dark mode via class strategy
exifr — EXIF GPS extraction from uploaded photos

Getting started

npm install
npm run dev

Command	Description
`npm run dev`	Start dev server with HMR
`npm run build`	Type-check + build to `dist/`
`npm run lint`	ESLint
`npm run preview`	Preview production build locally

Deploy

npm run build && firebase deploy   # Firebase Hosting
# or
npm run build && vercel --prod

Project structure

src/
  types/
    memory.ts              #

…

View on GitHub

How I Built It

I gave myself a weekend. It took about 5 hours total, working with Claude Code as my pair programmer throughout.

The stack:

React + Vite for the frontend

React-Leaflet for the map (more on this in a second)

Firebase Firestore for the real-time database

Firebase Storage for image uploads

Firebase Hosting for deployment

Tailwind CSS for styling

Google Gemini for seed data

I picked Firebase and Leaflet because I already knew them (my background is in geospatial mapping). That's the whole reason. When you have a weekend deadline, "familiar" beats "interesting" every time. No regrets.

The map interactions
This is the part I'm most happy with. Hit the pin button in the header and a panel slides in on the right with a form to upload a photo and write your story. That's it. No modal, no separate page, no typing coordinates manually.

The part I like most: when you upload a photo, the app reads the GPS EXIF data from the image and uses open APIs to reverse geocode it into a location name. Lat, lng, and location name all fill in automatically. If you took the photo there, you don't have to type anything except your story. Submit, and the pin appears on the map in real time for every user currently looking at it. No page refresh. That's Firestore's onSnapshot doing the heavy lifting.

Seed data with Google Gemini
I didn't want to launch with an empty map, so I used Google Gemini to pull together a set of Pennsylvania locations to pre-populate it. I used the chat interface to research and compile location data, then formatted it into the shape my app expected. It's a scrappy approach but it worked, and the map looks alive from day one instead of sad and empty.

I also used Gemini inside Firebase Studio to help think through my security rules. Being able to ask questions about my actual Firebase setup in context was genuinely useful. The rules are simple (public read, create-only with field validation, no updates or deletes), but having something that understood my project structure made it faster to get right.

The part that actually took the longest
Mobile layout. I knew going in that maps are annoying on small screens, and I was right. Getting the sidebar, the map, the panels, and the detail overlays to behave consistently across desktop and mobile took longer than building any individual feature. The final approach uses a responsive layout that collapses the sidebar on smaller viewports and leans into the map as the primary surface. It's not perfect but it's solid.

Personal pins
A few of the seed locations are spots from my own backpacking trips around the country. Honestly those are my favorite part of the app. There's something different about seeing a place you've actually stood on a map alongside other people's stories about places they've stood.

DEV Community

Green Spaces: I Built a Community Memory Map for Earth Day 🌿