While looking through the tracks for LA Hacks, one phrase in particular caught our eye: "grabbing coffee with a friend". After all the time we’ve spent at home, primarily communicating with friends online, we thought encouraging face-to-face meeting opportunities would be a worthwhile undertaking.

Even as museums, restaurants, and cafes reopen, covid-19 continues to influence how we socialize and interact with each other. The measures that were put in place to combat the disease also propagated a fear of others, who were potential asymptomatic carriers.

Small, everyday, interactions like talking with a coworker on the commute to work, grabbing a quick bite at a dining hall with friends, or bonding with a stranger over a cup of coffee, became much less natural as the possibility of becoming infected became an ever-present risk.

Through Matcha, we want to help people rediscover some of these small moments in their lives.

What it does

Matcha helps users "match" with people in their local area who share similar tastes in coffee to grab a quick cup of joe together. After logging in through their Google account, users are redirected to a home page that displays potential “matches” based on their coffee preferences. The user can then either choose to “swipe right” or “swipe left” on the profiles. For profiles that they’ve matched with, users can then follow up with them to coordinate their coffee getaway.

How we built it


There are three main components that were key in creating our hackathon project, and those are the frontend, backend, and user authentication platform. For the frontend, we leveraged React with Next.js, along with Mapbox for the map display, Threebox for the map layer rendering, and Sass + Typescript for the development accessories. For the backend, we used an Express server that loads and stores data from a MongoDB collection. Finally, we used Google Cloud Platform’s OAuth system to allow users to sign in using their Gmail accounts. During the brainstorming and design phase of the project, we used Figma to draft our user interface iterations.


Challenges we ran into

map The feature that proved the most difficult was correctly setting and displaying the map display in Mapbox. It took a lot of trial and error with small, iterative steps to get everything working correctly, and it was super satisfying seeing things click into place. Another challenge that came up with the team was delegating tasks to members, especially when everything was so closely knit together. We solved this issue by writing out tasks with more specificity, to ensure that it was clear to each member exactly what they needed to work on and what items would satisfy that task is complete.

Accomplishments that we're proud of

Overall, we were pleased with the way that our user interface designs turned out. Our project follows a design scheme based on its name matcha. It consists primarily of green and brown tones and has a smooth feel, similar to matcha tea. We felt that we were able to tie the name, the idea behind it, and UI together into a cohesive product. We’re also proud of the learning that our members did during the project. It was a learning experience for team members who were new to frontend and backend development, and they were able to explore the basics as they implemented the project. It’s always satisfying to look back at a project and note all the new technologies and tricks learned, especially the ones that eventually prove to be useful in future projects.

Whats next for matcha

  • Implement our own messaging to enable fast and convenient communication between users

  • Use ML to recommend better matches to people based on drink and location preferences

+ 9 more
Share this project: