Frame One

Inspiration

DivHacks asked us to help people know their city, block by block. We noticed something about New Yorkers: we walk past the same corners every day and stop seeing them. Meanwhile, those exact corners are famous around the world, because they're in the movies. The staircase in the Bronx you take to the bodega? That's the Joker stairs. The corner outside Grand Central you rush past? Spider-Man and MJ stood there.

We kept having the same moment: "Wait, haven't I seen this spot in a movie?" Frame One turns that moment into a reason to look up, slow down, and reconnect with your own neighborhood. It's not a tourist checklist. It's a way to see the city you already live in with fresh eyes.

What it does

Frame One is an anti-tourist, block-by-block discovery game for New Yorkers.

Capture: snap a photo of a spot in your neighborhood that feels familiar.
Context: tell it roughly where you are and which film you think it is. You don't need to be standing there.
Match: AI compares your photo against our hand-curated catalog of NYC film locations and finds the scene.
Recognize: see the original film still and exactly where the camera stood.
Recreate: the film still floats over your camera as a see-through guide. Line up the shot, and Frame One blends then and now into a polaroid you can download.
Stamp: you earn that spot's character stamp, and it slams onto your map.

Your map starts covered in fog. It's your city, but you haven't really seen it yet. Every scene you find clears the fog around that block. ? markers are scenes hiding near you that you haven't found yet: tap one for a hint and walking directions to the next one. So discovery stays local and spatial, one block leading to the next, instead of a top-10 list.

Trails link scenes across neighborhoods: an 8-stop Marvel trail from Times Square to the Chrysler Building, plus romance, comedy and thriller trails. Your profile tracks stamps, trails and badges.

If the AI isn't sure, you never hit a dead end. It points you to other scenes filmed on nearby blocks instead.

How it fits "Know Your City"

Hidden gems: film history is hiding in plain sight on ordinary streets, stairways, diners and viaducts, not just landmarks.
Neighborhood: fog clears block by block, and "go next" always sends you somewhere nearby, so you explore your own area first.
Local culture: NYC's film history is local culture. Knowing that your block was in a movie changes how you feel about it.
Anti-tourist by design: you earn a stamp by actually standing there and recreating the shot, not by checking in at a landmark.

How we built it

Frontend: React + TypeScript + Vite, built mobile-first as a web app so it runs on any phone with no install.
Map: MapLibre GL on OpenFreeMap tiles, with a custom canvas fog layer that bursts open around collected spots, animated stamp markers and glowing trail lines.
Matching service: Node.js + Express. We send the user's photo to OpenAI GPT-4.1-mini (vision) and have it compare the photo against the reference images for our curated film locations. GPS and the film name narrow down the candidates.
Catalog: a hand-curated dataset of NYC film locations with film stills, reference photos, coordinates and scene links, with MongoDB Atlas tooling. We curated instead of scraping, because matching quality depends on good reference photos.
Place search: OpenStreetMap Nominatim and Photon, with our own catalog searched first.
Recreate: in-browser camera (getUserMedia) and canvas compositing for the "then & now" image.
Deploy: one Docker service on Render serving both the web app and the API.
Demo video: made in code with Remotion.

Challenges we ran into

Making AI matching honest. Early versions quietly fell back to GPS and looked "right" for the wrong reasons. We added confidence levels so a weak match becomes a helpful "try these nearby scenes" instead of a false positive.
Mobile camera quirks. iOS Safari needs very specific handling before a live camera feed will show up.
Fog that feels like mist, not a hole. Our first fog punched hard circles (at one point, a giant black disc) into the map. We rebuilt it as a canvas layer with soft, feathered clearings and a burst animation when you earn a stamp.
Shipping in one night: matching, catalog, UI and map were built in parallel and merged on one integration branch without breaking each other.

Accomplishments that we're proud of

End-to-end on a real phone: photo → AI match → recreate → stamp → map, live on a public URL.
The AI recognizes a spot from the photo itself. Given a Captain America photo tagged with the location of a different Times Square spot, it still correctly matched Captain America.
The "stamp slams, fog bursts" moment makes discovering a block actually feel rewarding.
A completed Marvel trail across Midtown, and spots in the Bronx, Central Park, Brooklyn and beyond.

What we learned

For discovery apps, the soft miss matters as much as the hit. Always give people somewhere nearby to go next.
Local connection comes from showing up in person. Recreating the shot gets people to actually stand on the block.
Keeping state simple (unlocks as a list of spot IDs) let us move fast now and add accounts later without a rewrite.

What's next for Frame One

Neighborhood-first catalogs: more spots outside Manhattan (Queens, Staten Island, the Bronx, Brooklyn side streets) so every New Yorker has scenes on their own block.
Community-submitted spots with moderation, so locals can add the scenes they know.
Local businesses on the map: the diner, bookstore or bodega that was in the film.
Accounts and cloud sync so your stamps follow you.
Hand-illustrated map art and walking-tour routes between trail stops.

Recreation photos on the demo map: filminglocations via Imgur.