Fixing Our Review System Frontend (Day 33 – Building in Public)
Yesterday I thought I'd wrapped up the personal review system for my travel directory. Turns out, I was only halfway there – the backend was working, but the frontend was still pulling data from the old database table. Classic developer move, right?
Quick summary
Day 32 of building in public: I spent the morning fixing frontend components that were displaying review data from the wrong database table, while also discovering that Anthropic Claude 3.7 works way better for me than Gemini Pro (despite what everyone on X is saying). Sometimes the tools that work best aren't the most hyped ones.
Why I'm sharing this debugging session
Here's the thing – I could've just fixed this quietly and moved on. But this whole 60-day challenge is about showing the real process of building something, including the boring parts like refactoring components and the weird detours into AI model comparisons.
Plus, I learned something interesting about choosing development tools based on actual results rather than social media hype.
The problem I discovered this morning
So yesterday I built this personal review system where I can rate different aspects of places I stay – room quality, location, value for money, all that good stuff. The form worked perfectly, data was saving to the new review table, everything seemed great.
But when I opened the stays page this morning, I realized it was still showing the old placeholder content from the original listings table. Basically, I built this whole new system but forgot to actually connect it to the frontend. Oops.
My first attempt with Gemini Pro (spoiler: it was frustrating)
I've been seeing so many people on X raving about Gemini Pro lately, so I figured I'd give it another shot. I opened up Cursor, selected Gemini Pro, and explained what I needed to do.
The response was... not great. It seemed confused about which components to update and kept trying to use old functions that didn't exist anymore. I was getting errors before it even started coding.
You know what's funny? I used to think I just wasn't prompting it correctly. But sometimes a tool just doesn't click with your workflow, and that's okay.
The switch back to Claude 3.7 (much better results)
After getting frustrated with Gemini Pro, I switched back to Anthropic Claude 3.7. The difference was immediate – it found the right TypeScript file for personal reviews, identified the correct page components, and started working on exactly what I needed.
Here's what it needed to do:
Replace the old experience and pro tips sections
Pull data from the new personal review table instead of listings
Create modern-looking components that display ratings clearly
Make sure the rich text formatting worked properly
The whole process went so much smoother. It's interesting how different AI models can have completely different approaches to the same problem.
Building the new review display component
The new component needed to show several things:
Overall rating for the place
Individual category ratings (room quality, location, cleanliness, etc.)
Visit date and personal experience text
Pro tips formatted with proper bullet points
I wanted it to look clean and modern, not overwhelming. Think Booking.com style where you get a quick overview of ratings without too much visual clutter.
The formatting challenge I didn't expect
Everything was working great until I noticed the pro tips section wasn't displaying bullet points properly. In the backend, I was storing rich text with proper formatting, but the frontend was just showing plain text.
This is one of those small details that can make or break user experience. Nobody wants to read a wall of text when it should be a nice, scannable list of tips.
Claude 3.7 quickly identified the issue – the CSS wasn't properly handling the rich text formatting from the TipTap editor I'm using. A quick adjustment to the component styling and boom, bullet points were working perfectly.
What the final result looks like
Now when you visit a property page, you see:
A clean overview of my personal experience
Star ratings for different categories (with proper purple styling to match the site)
The actual visit date so people know how recent the review is
Pro tips displayed as a proper bulleted list
Rich text formatting that actually works
It's not revolutionary, but it's functional and looks professional. Sometimes that's exactly what you need.
Lessons from this debugging session
AI models really do work differently for different people. Despite all the Gemini Pro hype, Claude 3.7 just fits better with how I think and work. I'm done feeling like I need to use whatever's trending on social media.
Frontend-backend disconnects are so common. I've been coding for years and I still forget to update frontend components after changing backend logic. It's just part of the process.
Small formatting details matter more than you think. Those bullet points in the pro tips section make a huge difference in readability, even though they took 5 minutes to fix.
Building in public keeps you honest. If I wasn't recording this, I probably would've just quietly fixed the bug and moved on. Sharing the messy parts makes the whole journey more real.
What I'm working on next
I need to apply these same changes to the dining section of the site – same concept, different category of reviews. Then I can finally start adding actual content instead of just building features.
My partner already sent me a bunch of content for places we've visited, so the less-fun work of data entry is waiting for me. But hey, that's part of building something real.
I'm also thinking about adding a community feature later where other travelers can leave reviews too. Then we'd have both personal opinions and crowd-sourced feedback for each place.
The bigger picture about tool choices
This whole experience reminded me that the best tool is the one that actually works for your specific situation. I spent way too much money on GPT-4 Max early in this project ($100+ for a simple website), when Claude 3.7 gives me better results for way less cost.
Sometimes the most hyped solution isn't the right solution. Trust your own experience over social media buzz.
Final thoughts
Day 32 was supposed to be a quick frontend fix, but it turned into a mini-lesson about AI tools, attention to detail, and the importance of actually testing your features end-to-end.
The review system is working now, the frontend looks clean, and I have a better sense of which development tools actually work for me. Not the most exciting day of the challenge, but definitely a productive one.
Following along with the 60-day building challenge? I'm sharing everything – the wins, the bugs, and the random discoveries along the way. Tomorrow I'll tackle the dining section and hopefully start adding real content to this travel directory.