← work / 003

SNKRS Maps

Sneakerheads wanted to feel connected to the drops and stores in their own city, but SNKRS had no local layer. SNKRS Maps added one: a neighborhood guide to the shops that carry Nike's most sought-after releases. I led the front-end from the first plan to dev complete.

Role
Technical lead
Timeline
6 weeks to dev complete
Team
1 front-end (me), 2 back-end, 3 designers, 1 product lead
Stack
React, Apple MapKit JS, Podium design system
SNKRS Maps · desktop

My role

I was the only front-end engineer and the project's technical lead: planning, task breakdown, and every front-end decision ran through me, in close partnership with design, back-end, and product.

  • 01Planned the build and broke it into tasks for the team
  • 02Made front-end design decisions directly with the three designers
  • 03Shaped the API contract with the back-end engineers
  • 04Owned the front-end architecture, map integration, and location logic
  • 05Built custom React hooks for geolocation and its fallbacks
  • 06Set up internationalization and a feature-flagged rollout

key decisions

01Apple Maps, on the web

We chose Apple's MapKit JS over the usual web map providers. Its cartography is clean and quiet, which let Nike's own content stay the loudest thing on screen. It gave us annotations and clustering out of the box, so dense neighborhoods like SoHo read as tidy numbered groups instead of a pile of pins. And it kept the web experience consistent with Apple Maps that SNKRS app users on iPhone already know. This was the first Apple Maps integration on SNKRS Web.

SNKRS Maps with a store selected, showing its address, phone, and website over the map
Store detail over Apple Maps

02Location as an upgrade, not a gate

Asking for someone's location is a trust moment, and plenty of people say no. So the page never depends on it. Without location, you get the whole metro area with every store visible and still useful. Allow it, and the map flies into your neighborhood. I built this as a set of React hooks that handle permission, loading, denial, and errors as first-class states, rather than edge cases.

SNKRS Maps without location: the full New York metro area with clustered stores
Location off · the whole metro
SNKRS Maps with location on, zoomed into Manhattan neighborhoods
Location on · your neighborhood

03A map and a list are the same thing

Maps are great for 'what's near me' and bad at 'show me everything.' On desktop the list and map sit side by side and stay in sync: select a store in one and it opens in the other. On mobile, where space is tight, a simple toggle switches between the two views of the same data.

SNKRS Maps on iPhone, map view
Mobile · map
SNKRS Maps on iPhone, list view
Mobile · list

04Built to be reused

I structured the map, store cards, and location layer as building blocks rather than a one-off page. That paid off: the same framework was picked up for later scavenger hunts and local drops. It shipped behind feature flags with internationalization in place from day one, so it could roll out market by market.

outcome

6 wks

From first plan to dev complete

90+

Lighthouse performance score

1st

Apple Maps integration on SNKRS Web

Reused

For later scavenger hunts and local drops

I took SNKRS Maps to dev complete and moved on from Nike just before its public launch. It's live today at nike.com/launch/maps.

“One of the most creatively fulfilling projects I've led. I designed with emotion, built with performance, and shipped with speed.”