Find your Matcha

Home page
Review page
Sign up page
Map page
Login page

Inspiration

While many cafes offer matcha, it's often hard to find high-quality options. We wanted to create a site that allows matcha lovers to discover cafes rated by fellow enthusiasts, helping them find the perfect matcha near them.

What it does

Find Your Matcha is a platform where matcha lovers can discover and review cafes based on the quality of their matcha. From richness and vibrancy to the grade and authenticity, we make it easy for you to find the perfect cafe serving matcha that suits your taste.

How we built it

For the front-end, we used React and CSS for design. For back-end, we used Supabase to create an authentication system allowing users to create an account to store information. We used Google's Places API to implement a map feature and the ability to search for cafes.

Challenges we ran into

The primary challenge that we ran into was using Google's Places API to implement the map feature for the matcha cafes. This was our first time using Supabase and APIs, which proved to be an obstacle. Although we were unable to continue with the Places API, we switched over to Mapbox APIs to execute our mapping tool.

What we learned

We learned a lot about Figma through prototyping our website with it. In particular, we became familiar with manipulating shapes and colours with Figma to create interactive and engaging pages by the end of cmd-f. Furthermore, working with CSS in terms of positioning features for the individual pages helped us fully understand how containers and components work in front-end development.

Additionally, we learned about integrating the Mapbox API to display matcha cafe locations dynamically. It was also our first time working with Supabase for the back-end. We learned how to set-up user authentication, and how to work and interact with a PostgreSQL database.