Matcham

Matcham.my is a curated, map-based directory to discover the best matcha cafes in Malaysia—powered by Google Maps and community submissions.

Comment

Inspiration

As matcha lovers, I found ourselves constantly searching for good cafes — only to find outdated directories and scattered Google results. Malaysia’s growing matcha scene deserved better.

So I built Matcham.my, a curated, interactive directory of matcha cafes, powered by Google Maps. Our goal: help others easily discover great spots, plan cafe visits, and contribute to a growing community of matcha lovers.

What it does

Matcham.my lets users explore matcha cafes across Malaysia using an interactive map. Visitors can filter cafes by state, view curated details (like opening hours and address), and even submit new cafes for inclusion.

The map experience is smooth, mobile-friendly, and reflects a modern design aesthetic — using geolocation, custom markers, and responsive dialogs for a seamless UX.

How I built it

I built the web app using:

  • Next.js as the front-end framework
  • Supabase for database, authentication, and user submissions
  • Google Maps JavaScript API for location mapping, geolocation, and custom marker styling
  • Tailwind CSS for fast, responsive UI design
  • Vercel for deployment
  • Cloudflare for DNS and SSL setup

I iterated through several prototypes, focusing on improving map responsiveness, filtering performance, and mobile-first behavior.

Challenges I ran into

  • Handling incomplete or inconsistent cafe data (e.g., no logo, missing location info)
  • Making the Google Map perform well and look good across devices
  • Managing API keys securely across environments
  • Custom domain setup with Cloudflare + Vercel + SSL without downtime

Accomplishments that I'm proud of

  • Built a fully working map-based directory with real-time data
  • Created a clean, intuitive UI that works beautifully on mobile
  • Designed a community-driven submission flow to keep listings fresh
  • Integrated multiple APIs and tools into one cohesive product

What I learned

  • How to implement the Google Maps JavaScript API with geolocation and styling
  • Real-world lessons in managing a live app: data validation, mobile UX, and map performance
  • How to build a serverless, scalable app using Supabase and Vercel
  • Importance of user testing and iteration based on real feedback

What's next for Matcham

  • Adding user reviews and matcha rating systems
  • Introducing a bookmarking feature for favorite cafes
  • Launching a blog or stories section to highlight matcha culture in Malaysia
  • Expanding listings beyond cafes — e.g., matcha product shops, events, or workshops

Built With

Share this project:

Updates