Fixing the Review System - Day 32

So here's the thing about building in public - sometimes you wake up and your entire review system is completely broken. That's exactly what happened to me yesterday, and honestly, it was one of those moments where I questioned every life choice that led me to livestream my coding struggles.

Quick summary

Yesterday's episode was a disaster. Our new review system wasn't working at all - users couldn't add reviews, nothing was saving to the database, and I spent way too much time staring at error messages. Today I figured out the real problem (spoiler: it was a database column type issue), rebuilt the UI with some fun emoji ratings, and actually got the thing working. Kind of.

Why I'm sharing this mess

Look, I could just show you the polished final result, but that's not reality. Building software is messy, especially when you're doing it live and learning as you go. I'm 32 days into this 60-day challenge of building a travel directory, and some days are just debugging marathons.

Living here in Bali, I've learned that the journey matters more than pretending everything goes smoothly. Plus, maybe my mistakes will save you some time if you're building something similar.

The disaster from yesterday

Okay, so yesterday we tried to implement a review system for our travel listings. Users should be able to rate accommodations on different aspects - food quality, cleanliness, location, all that good stuff. Simple enough, right?

Wrong. Everything broke. When users clicked "Personal Review" or "Details," they just got a "Stay not found" error. The data wasn't fetching properly from the database, and I honestly had no clue why.

I was literally livestreaming this disaster, which made it extra fun. Nothing like debugging database issues while people watch you slowly lose your mind.

What I tried first (spoiler: it didn't work)

My first instinct was to blame the frontend. Maybe the API calls were wrong, maybe the routing was messed up. I spent way too much time checking JavaScript console errors and API endpoints.

Then I thought maybe it was a permissions issue with Supabase (that's our database). Nope, that wasn't it either.

I even tried rewriting parts of the review form component, thinking maybe the React code was the problem. Still nothing.

You know what's funny? I used to think if something wasn't working, it had to be some complex architectural issue. Sometimes it's just a tiny database setting.

The breakthrough moment

This morning I fired up Cursor AI (seriously, this tool is incredible for debugging) and had a proper conversation about what was actually happening. Instead of assuming it was a frontend issue, I asked it to analyze the entire data flow.

That's when we discovered something interesting - our edit form was working perfectly. It could fetch all the information correctly and display everything. So why wasn't the review display working?

The solution was actually pretty simple: adapt the broken review system to work exactly like the functioning edit page. Sometimes the best fix is copying what already works.

Here's how I actually rebuilt it

Step 1: Fixed the data fetching issue

Instead of trying to debug why the original review display wasn't working, I just rewrote it to use the same pattern as our edit form. This is probably not the most elegant solution, but you know what? It worked.

// Instead of fighting with the broken fetch logic,
// I copied the working pattern from the edit form

The edit form was successfully pulling data from the database, so I basically said "let's just do that but for reviews."

Step 2: Redesigned the UI with emoji ratings

Here's where it gets fun. I was looking at our old slider-based rating system and thinking "this is terrible UX." Nobody wants to fiddle with sliders when they're quickly adding a review after a trip.

So I asked Cursor to redesign it with emoji-based ratings. Each category (food quality, cleanliness, location, etc.) gets represented by relevant emojis instead of boring numbers.

The result? Way more intuitive. Instead of "Rate food quality 1-5," you get cute food emojis that actually make sense.

Step 3: Added rich text editors

For the experience notes and pro tips sections, I wanted proper rich text editing. Nobody wants to write travel advice in a plain text box in 2024.

We integrated a rich text editor so users can format their reviews properly - bold text for important points, lists for recommendations, all that good stuff.

Step 4: Connected everything to the database

This is where things got technical. We needed to make sure all the emoji ratings, text content, and images were properly stored in our Supabase database.

I created some database functions to handle adding and updating reviews. This was new for me - usually I just write direct SQL queries, but Cursor suggested using database functions for better organization.

The stuff that went wrong

Oh boy, where do I start?

First major issue: the database column types were wrong. I had set the rating columns to smallint, which seemed logical for ratings from 1-5. But here's the problem - when you calculate averages, you get decimals like 3.5 or 4.2.

smallint can't store decimals. So every time we tried to save an average rating, the database just rejected it. Took me way too long to figure this out.

Second issue: I accidentally created duplicate database functions. Supabase was getting confused about which function to use for saving reviews, so nothing was getting stored properly.

Third issue: the emoji selection wasn't working. Users could see the emojis, but clicking them didn't change the rating. Turns out there was a JavaScript comparison issue - the code wasn't properly detecting when an emoji was selected.

How I fixed the problems

The database type issue was actually simple once I identified it. Changed all rating columns from smallint to numeric, and suddenly averages could be stored properly.

For the duplicate functions, I had to go into Supabase's SQL editor and clean up the mess. Deleted the old functions and kept only the working ones.

The emoji selection fix required updating the JavaScript comparison logic. Instead of strict equality checks, we needed a helper function to properly compare rating values.

// Added a proper comparison helper
const isRatingActive = (currentRating, targetRating) => {
  return Math.abs(currentRating - targetRating) < 0.1;
};

What it looks like now

The review system is actually working pretty well. Users can:

Select ratings for different aspects using emoji interfaces
Write detailed experiences with rich text formatting
Add pro tips for future travelers
Upload images to accompany their reviews
See calculated average ratings

The UI feels way more intuitive than our original slider approach. The emoji ratings make it feel less formal and more like you're just sharing travel experiences with friends.

Lessons I'm taking from this

Database column types matter more than you think. A simple smallint vs numeric choice can break your entire system.
Copy what works. Instead of debugging broken code for hours, sometimes it's faster to just rewrite using a pattern that already works.
User experience trumps technical elegance. Emoji ratings might seem silly, but they're way more intuitive than sliders.
Building in public keeps you honest. I can't just skip over the messy parts when people are literally watching me code.

I'm still figuring out why some things work better than others, but that's part of the fun. Every broken feature teaches you something new.

What I'm working on next

Tomorrow's episode is going to focus on connecting this new review system to our frontend display pages. Right now users can add reviews, but they're not showing up on the actual listing pages yet.

I also want to add the same review system to our dining listings, not just accommodations. Should be easier now that I've figured out all the database issues.

Plus, I'm working on an SOP (standard operating procedure) for my assistant to start adding content to the platform. I found this amazing Japan travel guide that has some really nice UI elements I want to steal... I mean, take inspiration from.

Final thoughts

Building software is messy, especially when you're learning in public. Some days you feel like a genius, other days you spend three hours debugging a database column type.

But you know what? I actually love these problem-solving days. There's something satisfying about finally getting a broken system to work, even if the solution ends up being simpler than you expected.

If you're building something similar, remember that it's okay to copy patterns that work. Don't reinvent the wheel just to prove you can - sometimes the boring solution is the right solution.

Following along with the 60-day challenge? I'm documenting everything as I build this travel directory from scratch. Some days are wins, some days are debugging marathons, but it's all part of the journey.