NycGrid

NYC's traffic cameras have always been public. NycGrid makes them worth exploring.

Browse cameras across all five boroughs on a live map, watch feeds in ambient mode, and take photobooth-style photos with real camera footage. Every feed is layered with live context — weather, transit alerts, bus arrivals, Citibike availability, and nearby events tied to each camera's location.

It's also a way to learn the city. Each camera links to the street, neighborhood, and infrastructure around it — bridges, tunnels, parks, parkways — with historical and cultural context surfaced alongside the live data. The name comes from the two things the app puts together: NYC's gridded streets and the gridlock that defines them.

Built with Next.js 16, React 19, and MapLibre GL.

---

Prerequisites

• Bun — this project uses Bun exclusively. If you don't have it yet:

  npm install -g bun   # the last npm command you'll ever need

  Or install directly: curl -fsSL https://bun.sh/install | bash Full options: bun.com/docs/installation

---

Quick start

# 1. Install dependencies
bun install

# 2. Copy env template and fill in your keys
cp .env.example .env.local

# 3. Start the dev server
bun dev

App: http://localhost:3100

---

Setup guides

Full setup instructions for every service are in docs/setup/:

Service	Required?	Guide
Vercel (deployment)	For production	docs/setup/vercel.md
NYC Open Data (events)	Optional	docs/setup/nyc-open-data.md
511NY (transit alerts)	Optional	docs/setup/transit.md
MTA BusTime (buses)	Optional	docs/setup/bustime.md
Ticketmaster (events)	Optional	docs/setup/ticketmaster.md

Map tiles are served by OpenFreeMap — no key needed. See docs/setup/maptiler.md if you prefer MapTiler.

NOAA weather, Citibike, tides, and community district data are zero-config — no keys needed.

---

Running tests

bun run test:unit        # pure logic (~1s)
bun run test:component   # DOM rendering (~5s)
bun run test:integration # HTTP-level with MSW (~3s)
bunx vitest run          # full suite
bun run test:e2e         # Playwright (requires bun dev running)

---

Dev commands

bun run typecheck        # TypeScript check (no emit)
bun run lint             # ESLint + Prettier
bun run lint -- --fix    # Auto-fix
bun run build            # Production build

---

Project structure

src/
  app/                   Next.js App Router routes + API handlers
  features/              Feature-first modules
    map/                 MapLibre GL map + camera markers
    camera-feed/         Live DOT camera feed viewer
    photobooth/          Canvas-based photo capture + share
    context/             Weather, events, transit, Citibike context
    theme/               5-theme system (street, hacker, brutalist, pastel, light)
  components/ui/         Primitive UI components
  lib/
    cameras/             NYC DOT camera data + geo utils
    security/            Shared request hardening and header helpers
  test/                  MSW handlers and test utilities
.env.example             Environment variable reference

---

See ROADMAP.md for planned features.

---

Acknowledgments

The creative use of NYC's public traffic cameras for photobooth-style photos was pioneered by trafficcamphotobooth.com. NycGrid builds on that spirit with a different scope and approach.