UI Standardization & Admin Dashboard Improvements (Day 29)
So here's the thing about building a website in public - sometimes you have these episodes where you're just fixing all the little annoying things that have been bugging you. Day 29 was exactly one of those days.
Quick summary
I spent this session standardizing the UI across my travel directory's admin dashboard, fixing data display issues, and honestly just cleaning up the mess I'd created over the past few weeks. It wasn't glamorous work, but it needed to happen before I could move forward with adding actual content.
Why I'm sharing this cleanup process
You know what's funny? I used to think these "boring" development sessions weren't worth documenting. But living here in Bali and building this project in public has taught me that the messy, unglamorous parts are actually super valuable to share.
Most tutorials show you the perfect end result. They don't show you the part where your admin tables look completely different from each other, or where your database queries aren't pulling the right information. That's the real stuff though.
The challenge I was facing
So basically what happened was this: I had two main sections in my admin dashboard - one for dining listings and one for accommodation stays. The dining table looked clean and organized, but the stays table? It was a hot mess.
Different layouts, inconsistent styling, and some of the data wasn't even displaying correctly. Every time I switched between the two sections, it felt jarring. Like walking into two different websites.
I'm not gonna lie, this was one of those things I kept putting off because it seemed tedious. But it was driving me crazy every time I had to use the admin panel.
What I tried first (and why it almost worked)
My first instinct was to just ask Cursor AI to "make the stays table look like the dining table." Simple enough, right?
Here's where it gets interesting though - Cursor has this new feature where it plays a sound when it's done processing. This is actually pretty cool because I can work on other stuff (like my SEO consulting) while it's running in the background.
The initial attempt worked... sort of. The layout looked better, but then I realized the data wasn't displaying properly. Location showed as "unknown," category showed as "unknown," even though all that information was stored in the database.
The breakthrough moment
This is where I had to get more specific with my prompts. Instead of just asking for visual changes, I needed to understand why the data wasn't connecting properly.
The issue was with how the tables were joined. The dining table was correctly pulling information from related tables (location table, category table, etc.), but the stays table wasn't set up the same way.
Here's how I actually fixed it
Step 1: Analyze the working table structure
I told Cursor to look at how the stays form was fetching data and compare it to the dining table structure. This gave me a clear picture of what was missing.
The dining table was properly joining multiple database tables to display comprehensive information. The stays table was trying to display the same info but wasn't making those connections.
Step 2: Fix the database queries
Once I understood the problem, the fix was actually pretty straightforward. I asked Cursor to "take an example on how the stays table joins the different tables" and apply that same logic to fix the unknown data issue.
This took a few iterations because I had to be specific about which fields should pull from which tables. But once it clicked, everything started displaying correctly.
Step 3: Standardize the card designs
The next part was making the front-end cards consistent too. I liked the dining page cards better than the stays page cards, so I decided to implement that design across both sections.
The tricky part here was keeping the same functionality (like the bookmark feature) while changing the visual design. I also decided to change the bookmark icon to a heart icon because it felt more intuitive.
Step 4: Match the category sections
The last piece was making sure the category cards looked consistent between both pages. This was mostly visual cleanup, but it made a huge difference in how professional the whole thing felt.
The stuff that went wrong
Oh man, where do I start? First, I couldn't figure out how to open multiple tabs in Cursor. I kept trying different keyboard shortcuts and nothing worked. Turns out I was overthinking it.
Then there was this whole thing where I added a pricing icon that looked terrible, so I had to revert that change. Sometimes you try something and immediately realize it was a bad idea.
The most frustrating part was when the data fixes didn't work on the first try. I had to go back and forth with Cursor, being more and more specific about exactly which tables needed to be joined and how.
How I fixed the problems
The key was breaking everything down into smaller, more specific requests. Instead of asking for broad changes, I started asking for very targeted fixes:
"Please analyze properly and tell me why it's not working"
"Take an example on how the stays table joins the different tables"
"Please make small changes. Should be an easy fix."
Being more direct and specific with AI tools is something I'm still learning. The more context and detail you give, the better results you get.
What it looks like now
Now both sections of my admin dashboard have consistent styling and properly display all the database information. The cards on the front end match between dining and stays pages, just with different color schemes (purple for stays, orange for dining).
The heart icon for bookmarks looks way better than the old bookmark icon, and everything just feels more cohesive. It's one of those changes that seems small but makes the whole experience feel more professional.
Lessons I'm taking from this
Consistency matters more than I thought: Having mismatched UI elements was constantly breaking my flow when using the admin panel
AI tools work better with specific instructions: Vague requests get vague results
Sometimes boring work is necessary: These cleanup sessions aren't exciting, but they're essential for moving forward
Small fixes compound: Each little improvement makes the next development session smoother
What I'm working on next
Actually, I'm about to head to Thailand to visit my parents (haven't seen them in about a year), so the next few episodes might be a bit different. I might not have my usual microphone setup, so the audio quality could be a bit rough.
But when I get back, the plan is to start adding actual listings to the website with my partner Grace. We want to populate it with real content so we can test all the recommendation features and see how the location pages work with actual data.
Final thoughts
You know what's wild about this whole process? I used to think these cleanup episodes were boring and not worth sharing. But honestly, this is where a lot of the real work happens.
Building something in public means showing the messy parts too. The parts where you're just fixing tables and standardizing UI elements. It's not glamorous, but it's necessary.
If you're building something yourself (and I'm genuinely curious - what are you working on?), don't skip these cleanup phases. They might seem tedious, but they set you up for much smoother development later.
Following along with this 60-day challenge? I'd love to hear what you're building - the messy parts and the wins. Sometimes the most valuable conversations happen around the stuff that doesn't work perfectly.