-
Explore matcha cafés across Irvine through our interactive Leaflet map. Each pin reveals a new spot to sip and discover.
-
The welcoming Matchaverse homepage, a cozy entry point inviting users to explore the world of matcha around UCI.
-
Matcha Feed: a community hub where users can share experiences, ratings, and discoveries in real time.
-
Detailed café view: browse ratings, reviews, and info for each matcha spot, all fetched live from Firestore.
-
Built on Base, our native token $MATCHA rewards users for every sip, share, and discovery, turning matcha runs into a real economy.
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!!
Built With
- api
- css
- css3
- firebase
- firestore
- git
- github
- html
- leaflet.js
- openstreetmap
- react-native
- vercel
Log in or sign up for Devpost to join the conversation.