CafeMaps

Project 02

A full-stack discovery product for finding cafes in Ho Chi Minh City by mood, location, and real visiting context. The experience centers around curated editorial content, geospatial recommendations, and map-first navigation.

Next.jsReactTypeScriptGoogle Maps APISupabasePostGISGeospatial UI

Role

Full-stack engineering, product UX, mapping experience

Highlights

  • Mood-based cafe search paired with map exploration
  • Editorial content and place details managed through a custom NestJS CMS
  • Geospatial recommendations for Ho Chi Minh City discovery

Quiet work

Three O'ClockDistrict 3 / Wi-Fi / calm tables
Selected placeOpen until 22:00

Enough light, low music, two-seat corners.

Project media

Live map/list decision loop

CafeMaps is live at cafemaps.net, pairing selected pins, curated place cards, and a mobile-friendly detail sheet.

Live product: CafeMaps is available at cafemaps.net. Traffic, listing count, Search Console, and usage metrics are omitted until supplied.

Spatial UX

Map and list together

Selecting a card highlights the place on the map; selecting a pin opens the decision details.

Curation

Context over breadth

Mood, work-friendliness, seating, and neighborhood matter more than showing every possible listing.

Content

Custom CMS quality

A NestJS CMS keeps curated cafe content, Supabase place data, and Cloudinary images maintainable beyond raw ratings.

Problem

Generic search is too noisy when someone wants a cafe that fits mood, area, and visiting context.

Role

Owned full-stack direction, product UX, map/list interaction, and CMS/data model framing.

Decisions

  • Pair the map with a curated list instead of making users switch modes.
  • Use mood and context as first-class filters.
  • Keep place details short enough for mobile decisions.

Current state

A live product for local cafe discovery, with metrics intentionally omitted until real analytics are supplied.

Lesson

Discovery products are won through defaults, trust, and progressive detail.

Problem

Choosing a cafe is rarely just a distance problem. People choose by mood, noise, seating, work setup, neighborhood, and how much trust they have in the recommendation.

Generic search can answer “what is nearby,” but it often makes the user compare too many weak signals. CafeMaps focuses on the moment where someone wants to decide quickly and confidently.

System

The product pairs a map with curated place cards. The map gives spatial context; the list gives editorial judgment. A selected cafe should feel connected across both surfaces, so the user is never wondering whether the card and pin refer to the same place.

The live stack is full-stack: Next.js and React for the interface, Google Maps API for location, Supabase Postgres with PostGIS for structured cafe and geospatial data, a custom NestJS CMS for content operations, and Cloudinary for images.

CafeMaps started from a noisy discovery problem: finding a cafe is usually about mood, area, seating, noise, and trust, not just distance. The product turns that into a map/list workflow where curated cards, pins, and short place details stay connected. The CMS and Supabase data model make cafe content editable while preserving the structure needed for geospatial browsing. The result is a live product at cafemaps.net; public metrics are intentionally left out until real analytics are available.

Key Decisions

  • Make the experience map-first because location and neighborhood comparison are central to the decision.
  • Use mood-based search so users can browse by real intent: quiet work, meetups, exploration, or a specific area.
  • Keep place details scannable on mobile: hours, vibe, useful tags, and a short note beat long copy.
  • Treat curation as a trust layer, not decoration.

Tradeoff

Curated discovery can be more useful than generic breadth, but it also means the product must be honest about coverage. A smaller set of better-presented places is preferable to pretending the product knows every cafe.

Map-heavy UI also creates mobile complexity. The interface has to balance panning, selecting, filtering, and reading without making the screen feel crowded.

Reflection

CafeMaps is the strongest product UX story in the portfolio because the user problem is familiar and the decisions are concrete.

The lesson: discovery interfaces need clear defaults. The product should reduce comparison work, not hand the user another pile of search results.