Inspiration

We all love matcha, but finding the good matcha around Irvine? That’s a whole quest. We wanted a fun, low-effort way to spread the matcha love and help our friends (and everyone else) discover the best spots without the endless scrolling and review hunting. That’s why we built Matchaverse - your cozy digital map to explore, share, and celebrate all things matcha in and around UCI!

What it does

Matchaverse is your go-to interactive map for everything matcha in Irvine! It’s more than just a map - it’s an experience.

With Matchaverse, you can:

  • Explore nearby cafés that serve matcha-based drinks and desserts
  • See your location on the map and find matcha spots around you in seconds
  • Discover hidden gems that you might’ve never noticed before
  • Join the matcha movement and put your friends onto their next favorite drink

Whether you’re hunting for a new study spot, a cozy hangout, or your next favorite matcha latte, Matchaverse makes every matcha run an adventure!

And soon, users will be able to earn our native token, $MATCHA (deployed on Base), a digital reward system for sharing reviews, discovering cafés, or contributing new spots. It’s our way of turning community engagement into a real on-chain economy for matcha lovers.

How we built it

We built Matchaverse using a React.js frontend powered by Firebase Authentication and Firestore for the backend. The interactive map runs on Leaflet.js with OpenStreetMap, displaying real matcha spots around Irvine and allowing users to share their experiences through Firebase.

The UI was designed with cozy shades of green to capture the calm, refreshing energy of matcha. Simple, smooth, and full of good vibes...

Challenges we ran into

Getting the map data to load in smoothly was definitely a challenge, especially when balancing performance and accuracy. We also spent time figuring out the best way to position our buttons and features when it comes to the UI so it felt natural and easy to navigate. This took some trial and error, but we persevered, and seeing it all come together made it worth it for our matcha journey.

Accomplishments that we're proud of

We’re super proud of how the UI turned out - clean, cozy, and full of matcha vibes. We also designed our own custom logo, which ties the whole theme together. And honestly, seeing how smooth and polished everything feels when you explore the map makes us really proud of what we built. The app is incredibly functional and usable, and it’s something we could all see ourselves using every day to find our next matcha spot!

What we learned

We learned how to connect a React.js frontend with Firebase Authentication and Firestore, creating a seamless full-stack experience without needing a traditional server. We also used Leaflet.js to bring interactive maps to life and learned how to structure our data efficiently in Firestore for smooth, real-time updates. Along the way, we sharpened our Git and GitHub collaboration skills, managing branches, resolving merge conflicts, and syncing our work as a team.

Most importantly, we discovered how much thoughtful UI/UX design matters, how small choices like color, spacing, and layout can transform an app’s energy. Like a perfect cup of matcha, great teamwork and design harmony create something truly refreshing.

What's next for Matchaverse

We want to keep growing Matchaverse as the go-to map for every matcha lover. Next, we plan to add friend adding features, so people can recommend their favorite matcha spots, as well as more filtering criteria when searching. We also want to expand beyond Irvine - because we believe that everyone deserves to find their perfect matcha spot!!

Share this project:

Updates