babarda/mapma

A collaborative historical mapping platform for Morocco that combines geolocated archival photographs with an AI historian guide. Users can upload old photos, accurately position them on the map, and explore the stories, people, and places behind Morocco's past. # MAPMA — Morocco's Photographic Memory A digital archive of Morocco's collective memory. Upload historical photographs, let AI suggest the location/era/context, and explore the country through time on an interactive map. > **Status:** Foundation + interactive map. Upload, AI extraction, and auth come next. ## Stack - **Next.js 14 (App Router) + TypeScript + TailwindCSS** — UI, museum aesthetic - **MapLibre GL** via `react-map-gl` — interactive map with clustering - **MapTiler** tiles (falls back to free **OpenFreeMap** when no key is set) - **Supabase** (Postgres + PostGIS + Auth) — data & accounts - **Cloudflare R2** — image storage (zero egress) - **Google Gemini Flash** — AI vision metadata extraction - **Vercel** — hosting ## Prerequisites - **Node.js 20 LTS or newer** (not currently installed on this machine). Install from or `winget install OpenJS.NodeJS.LTS`. ## Getting started ```bash npm install cp .env.example .env.local # optional: the map renders with no keys npm run dev # localhost ``` The map works **immediately with zero configuration** using free OpenFreeMap tiles and built-in seed photos. Add a `NEXT_PUBLIC_MAPTILER_KEY` to upgrade to the sepia "museum" tile style. ## Environment variables See `.env.example`. All keys are optional for the map; they are required as each feature is wired up (Supabase for data/auth, R2 for uploads, Gemini for AI extraction). ## Database Apply the schema in `supabase/migrations/0001_init.sql` via the Supabase SQL editor. It enables PostGIS and creates `photos`, `profiles`, and `suggestions` tables with row-level security and a `photos_in_bbox()` helper for viewport-based map loading. ## Project structure ``` src/ app/ layout.tsx # fonts (Playfair Display + Inter), metadata page.tsx # full-screen map homepage (reads seed data) globals.css # museum theme + MapLibre popup styling components/ map/MoroccoMap.tsx # MapLibre map: clus …