☕ Introducing CafeMatrix

The internet has undoubtedly anxiously awaited this next installment of my personal blog. Having revolutionized the spheres of architecture and education alike, what worlds are left to conquer? The answer is the flashy, cutthroat realm of restaurant ranking. A world that as of November 17, 2024, will never be the same. Introducing the new, paradigm-shifting CafeMatrix!

Note: please read the above paragraph with a heavy dose of sarcasm

The Problem

image

Sweet Eugene’s (image from Yelp)

Where I went to college, there was (and likely still is) a cafe called Sweet Eugene’s. Sweet’s was an otherwise normal cafe, but with an interior like a garage sale on acid. Couches and tables shared floor space with renaissance busts and industrial equipment. Throw in a closing time of 2:00 AM and plenty of seating, and you have a seemingly perfect cafe. And yet, Sweet Eugene’s had an Achilles heel: their WiFi was abysmal. After one unsuccessful attempt to study at Sweet’s, I came to a revelation - the 0-5 star scale is woefully inadequate for reviewing this (or any) cafe.

Think about it: depending on a variety of factors, a cafe may be perfect for studying but horrible for hanging out! Or the opposite, or neither, or both! But what if we identified these individual factors (i.e. seating availability, Wi-Fi, coffee cost, etc.) and used them to calculate a cafe’s “study rating” or a “hangout rating”? This was the seed that eventually grew into my newest and nerdiest project, CafeMatrix.

Common Criteria / Usage for CafeMatrix

How can we rate a cafe, then? I normally go to a cafe for 2 reasons - to get work done, or to hang out with friends. My third decision factor is value for money - whether the experience is worth what I’m paying for or not. And wouldn’t you know it, CafeMatrix ranks each cafe on 3 criteria - Ambiance, Study Suitability, and Value / Money. Then, each criteria (or in CafeMatrix lingo, index) is plotted as an axis of a 3d plot, giving you an at-a-glance rating of that cafe’s rating.

image

CafeMatrix landing page!

image

SubMatrix breakdown for one of my favs, Water & Coffee Lab

But let’s get more granular! How do we know why a cafe scored what it did? Every index’s score is calculated from 3 sub-indices, which describe specific pros and cons of each cafe (i.e. internet speed, menu). So three factors will contribute to a cafe’s ambiance score, another three for Value, and a final three for Study Suitability. See a description of these below:

1. Ambiance Index

  • Vibe - Is the decor / vibe good?
  • Seating Availability - Are seats easy to find and the cafe generally non-crowded?
  • Spark - Anything special about this place? Nice baristas? tabletop games? Becomes a bar at night? Active part of community?

2. Value Index

  • Taste - How good are the drinks here?
  • Cost - How expensive are the drinks here?
  • Menu - Do they have cool specials? Do they roast or sell their own beans? Good food / cocktails too? All that goes here.

3. Study Index

  • Space Suitability - How good is the space for studying? Big tables with room to spread out?
  • Tech-Friendliness - How fast is the inte here? Are there lots of charging outlets?
  • Accessibility - How long does it stay open? Is it easy to park at or get to?

SubMatricies are probably the coolest thing CafeMatrix does. With SubMatrices, users can rate cafes however they like, and use those ratings to make intelligent decisions beyond a 1-5 star rating. 1

image

At-a-glance pros/cons on the home screen!

The Making of CafeMatrix

As the longest-running project I’ve worked on (2+ years off and on!), CafeMatrix has evolved a LOT since it’s initial concept. As with all of my projects, the end goal is to learn something new while solving a real problem. But since the beginning, CafeMatrix three philosophical foundations:

Foundation 1. CafeMatrix should be easy to use

I fully believe that this project is too nerdy to every attain mass appeal. I still wanted to make CafeMatrix so simple that my Mom could use it. So many websites accidentally (or even purposefully!) kneecap user experience to drive profit. The fun challenge for CafeMatrix was continually re-vamping interfaces and backends to make user interactions as simple as humanly possible!

Foundation 2. CafeMatrix should not use a login system / database backend

Backstory time! The browser game Blacksmith Lab blew my mind as a kid, simply because it always remembered my progress after I closed the tab! No logins, no two-factor authentication, just good ol’ cookies! My biggest challenge by far was implementing a similar system in CafeMatrix. In an age where every site you visit needs your email, phone number, and social to provide basic functionality, I wanted CafeMatrix to be a breath of fresh air. 2

Foundation 3. CafeMatrix should be mobile-first

As the project evolved, I found myself using CafeMatrix on my phone far more than on my laptop. This eventually led to an entire UI redesign around the bootstrap library, allowing dynamic re-sizing of windows to prioritize mobile without inconveniencing laptop users.

What’s next for CafeMatrix?

I’m writing another article about CafeMatrix soon, about all of the things I learned from this project. After all, this is the first time I’ve self-hosted a website! It’s also the first time I’ve built a website purely for public usage. I don’t have any current plans to update CafeMatrix beyond it’s current state, but if there’s enough interest I may add HTTPS. It’s up to you!


  1. Anticipated Question: How can we possibly rate something on criteria subjective as “vibe” or “spark”? The short answer is, embrace the subjectivity! Does Starbucks taste like a 1 to you? Is your favorite coffee joint a 5? Then put that in the matrix! These rankings aren’t meant to be objective truth - they’re meant to be a resource to help decide where you want to study / hang out. Go wild! ↩︎

  2. The clunkiest part of CafeMatrix is undoubtedly the .tsv backup process, but this is a direct result of the internet’s evolution path. Joel Spolsky predicted this back in in 2004: an increasing number of programs people use aren’t installed onto their PC, they’re on the web. Webapps like CafeMatrix use usernames and passwords to store user data in the cloud, historically for security (good) and more recently to sell this data to advertising companies (bad). The alternative to this is storing user data on the user’s computer (CafeMatrix’s approach), which has potential to be even more convenient than the cloud approach (imagine - no passwords!). Local storage access for web apps is improving (see the File System API - maybe more websites will move this direction in the future! ↩︎