How to Connect your Directory to Supabase (Day 12 Learning in Public)
So here's the thing about building a travel directory - you can create the prettiest frontend in the world, but if it's not connected to a database, you're basically showing people a fancy brochure that doesn't actually work.
Quick summary
Today I tackled connecting my Bali travel directory to Supabase, and honestly? It was messier than I expected. Between database structure decisions, admin dashboard creation, and figuring out how to handle different listing categories, this turned into one of those "simple task becomes 6-hour adventure" kind of days.
Why I'm sharing this database connection story
Living here in Bali and building this directory, I'm constantly reminded that the real learning happens when things don't go according to plan. Yesterday I had these beautiful listing pages - homepage, about page, stay listings - but they were all placeholder content. Pretty, but useless.
I needed to connect everything to Supabase so my partner could actually start adding the places we've visited. Plus, I wanted to build an admin dashboard where we could manage all this content without touching code.
The challenge I was facing
You know what's funny? I thought this would be straightforward. I had the frontend pages, I had Supabase set up, I just needed to connect them, right?
Wrong.
The moment I started digging into the database structure, I realized I hadn't thought through how categories would work. Should hotels, resorts, villas and glamping all go in one categories table? What about restaurant cuisines and spa treatments - do those go in the same table?
And then there's the whole client component versus server component thing in Next.js that I'm still wrapping my head around.
What I tried first (spoiler: it didn't work)
My first approach was pretty naive. I figured I'd just create some basic database queries and connect the stay pages directly.
I started by looking at my existing tables: listings, categories, locations. Seemed simple enough.
But then I realized the categories table was empty. No hotels, no resorts, nothing. And the locations table? Also empty. I was trying to connect a frontend to a database that had no actual data.
Classic rookie mistake, honestly.
The breakthrough moment
This is where using Claude (the AI assistant) actually saved me hours of work. Instead of manually figuring out database relationships and writing all the connection code, I decided to be smart about it.
I gave Claude access to my project files and said: "Look, I have these frontend pages and this database structure. Help me connect them properly."
What happened next was pretty cool. It analyzed everything and started making suggestions about database structure, created service files for Supabase connections, and even built out an admin dashboard.
Here's how I actually built the connection
Step 1: Fixed the database structure first
Before connecting anything, I needed actual data. Claude helped me create SQL scripts to populate the categories and locations tables.
For categories, we went with: Hotels, Resorts, Villas, and Glamping as the main accommodation types. Later we'll add dining, wellness, and activities.
For locations, we mapped out Bali by region: South Bali, Central Bali, East Bali, North Bali, West Bali, and the Gili Islands. Each location got proper coordinates too.
The tricky part was deciding whether to use one categories table for everything (hotels AND restaurant cuisines) or separate them. We ended up adding a "type" field to distinguish between accommodation categories and dining categories.
Step 2: Created the database services
This is where the technical stuff happens. I needed functions to fetch data from Supabase and handle all the CRUD operations (Create, Read, Update, Delete).
Claude created a stays service that handles:
Fetching all stays with filtering
Getting individual stay details
Managing the relationship between stays, categories, and locations
The cool thing is it set up proper TypeScript types for everything, so I get nice autocomplete and error checking.
Step 3: Built the admin dashboard
Here's where I got excited. Instead of having to manually add data through Supabase's interface, I now have a proper admin dashboard built into the site.
The dashboard includes:
Overview with total counts (stays, categories, locations)
Individual management pages for each content type
Forms to add new listings
Edit and delete functionality
I can see at a glance that I have 4 categories and 26 locations in Bali. Pretty satisfying, actually.
Step 4: Connected the frontend pages
The final step was updating the actual listing pages to pull from the database instead of showing placeholder content.
Now when someone visits the stays page, it actually queries Supabase and shows real data. The filters work with the database. The individual stay pages pull the correct information.
Well, mostly. There are still some bugs to work out.
The stuff that went wrong
Oh man, where do I start?
First, there was this weird issue with client components versus server components in Next.js. For some reason, the code kept trying to use server components where it needed client components, and I kept getting errors.
Then there was the categories confusion. I spent way too long trying to figure out if parent categories should use a parent_id field or the type field I added. Still not 100% sure I got that right.
The admin dashboard had this bizarre purple background that I couldn't figure out. Minor thing, but it bugged me.
And don't get me started on the image upload functionality. We need it, but it's not working yet.
How I fixed the problems (sort of)
The client/server component issue? Honestly, I just went with what worked. I'll research the proper way to handle this later, but for now, it functions.
For the categories structure, I decided to keep it simple: one categories table with a type field to distinguish between accommodation, dining, wellness, etc. We can always refactor later.
The purple background got fixed with a simple prompt to Claude: "Please remove the purplish background and use white instead."
The image upload? That's next episode's problem.
What it looks like now
I now have a functional admin dashboard where I can:
See overview stats (4 categories, 26 locations, 0 stays so far)
Add new categories and locations
Edit existing data
Delete items (though that's still buggy)
The frontend stays page now shows "0 places to stay" instead of placeholder content, which means it's actually connected to the database. Small win!
The individual stay pages are ready to display real data once we add some listings.
Lessons I'm taking from this
Database structure decisions are harder than they seem at first
Having an AI assistant analyze your codebase is incredibly helpful
Sometimes "good enough" is better than perfect, especially when you're building in public
The boring backend work is just as important as the pretty frontend
You know what's interesting? I used to think the hard part was making things look good. But honestly, getting the data flow right and building proper admin tools - that's where the real work is.
What I'm working on next
Next episode, I want to create a proper multi-step form for adding new stays. Right now the form exists but it's pretty basic.
I also want to add some actual listing data so we can test the full flow from admin dashboard to public listing pages.
And I'm thinking about adding a calendar feature where hotels and resorts can request us to visit and review their places. That could be a cool way to automate some of the business development side.
Final thoughts
Building a travel directory is teaching me that the technical stuff is only half the battle. The other half is thinking through all the workflows and user experiences.
Like, how do we handle different types of accommodations? How do we organize categories? How do we make it easy for my partner to add content without touching code?
These aren't just technical questions - they're business questions that affect how the whole platform works.
Anyway, if you're building something similar or just curious about the process, I'm documenting everything as I go. Sometimes it's messy, sometimes things break, but that's the real experience of building something from scratch.
Following along with this 60-day challenge? I'm sharing all the wins, failures, and random discoveries as they happen. The goal isn't just to build a travel directory - it's to learn in public and hopefully help others who are on similar journeys.