CafeMaps

Project 02

CafeMaps

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

01 / Hero

A cafe discovery product, not a cafe directory.

CafeMaps helps people in Ho Chi Minh City choose a place by mood, location, price, opening state, and the kind of visit they are planning.
CafeMaps homepage hero with search and mood shortcuts
CafeMaps mobile homepage hero with search and mood shortcuts

02 / Discovery

Search starts broad, then narrows by real visiting context.

The live product exposes cafe listing, keyword search, guided filters, open-now state, price ranges, districts, vibe, purpose, distance, and cafe detail pages.
CafeMaps discovery listing with search filters and cafe cards
CafeMaps mobile search results and filters

03 / Personalization

The quiz turns taste into a discovery shortcut.

Instead of making every visitor tune filters manually, CafeMaps adds a taste quiz: a lightweight route from preference to suggested places.
CafeMaps taste quiz question screen
CafeMaps mobile taste quiz question screen

04 / Your Places

Inspect, save, and return without starting over.

Cafe detail, gallery, saved cafes, saved folders, and visited places keep discovery continuous across desktop browsing and mobile recall.

Saved

Keep promising cafes close.

Visited

Separate memory from intent.

Personal discovery

Make the next search start warmer.
CafeMaps cafe detail page with photo gallery and place information
CafeMaps mobile saved places page

05 / Community

Community contribution is structured before it becomes inventory.

The contribution path asks for a Google Maps link, short reason, and optional real photos, then sets clear expectations around review and moderation.
CafeMaps contribution form for sharing a cafe
CafeMaps mobile contribution form for sharing a cafe

06 / Editorial / CMS

A product needs an operating layer.

The CMS supports Blog publishing, cafe management, users, and community contributions so the discovery surface stays current.
CafeMaps CMS cafe management dashboard with cafe status, tags, and edit actions
CafeMaps mobile community voting surface connected to editorial discovery

Content

BlogCurated guides create another route into discovery.

Operations

CMSCafes, users, and contributions stay manageable.

07 / System

A full-stack spatial product.

Location, discovery, contribution, and personal taste had to work as one system.
DiscoveryPlace dataCMSMedia / maps

Product surface

  • Next.js
  • React
  • TypeScript

Operations

  • NestJS CMS

Spatial data

  • Supabase
  • Postgres
  • PostGIS

Services

  • Google Maps API
  • Cloudinary

08 / Reflection

The hard part is reducing comparison work.

Less scanning. Better first moves.

Context

People choose cafes by mood, purpose, and situation, not distance alone.

Defaults

Good discovery reduces decisions before users start filtering.

Trust

Real photos, community input, and saved places make recommendations feel personal.