☕ 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 December 28, 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

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 yet another 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 (repo here).

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.

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. ¹

The Making of CafeMatrix

As the longest-running project I’ve worked on (about a year, 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’m pretty sure this project is too nerdy to every attain mass appeal. But one of my goals for CafeMatrix was a radically simple user experience. So many websites accidentally (or even purposefully!) kneecap user experience. The fun part of CafeMatrix was building a webapp as they should be - simple, intuitive, and user-respecting.

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

Quick backstory on this one: The browser game Blacksmith Lab blew my mind as a kid, simply because it remembered my progress after I closed the tab! No logins, no two-factor authentication, just good ol' cookies! I knew I had to do something similar with CafeMatrix. In an age where every site you visit needs your email, phone number, and social security number to provide basic functionality, I wanted CafeMatrix to be a breath of fresh air. ²

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 bootstrap, 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. I put that “buy me a coffee” link on as a joke, but if there’s enough interest, who knows what will happen! 🙃

---

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 typically store user data in the cloud, historically for security (good) and more recently for ad tracking and targeting (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! ↩︎