How to build a P-SEO Directory in 3-hrs on your tablet for free

Directory websites are aggregations of service providers or products on the internet. They are often lists that mostly get local “near me”-kind of search traffic with regards to a specific topic. A topic can be anything niche enough that also carries some commercial or informational intent from the searching user. To illustrate two examples, you can think of a directory for children-friendly dentists in Amsterdam or sustainability-oriented startup grants in Germany.

Having a well-defined niche as a directory builder is important. So after overthinking mine for a bit, I decided to use AI assistants to create a complete Programmatic SEO (PSEO) directory in just 3 hours. I did so entirely browser-based by using only my tablet and a keyboard.

To be fair, I am decent with programming — not to the degree of being able to work as a coder- but good enough to know databases, APIs and the difference between javascript and typescript for instance. Despite this I hardly used my coding skills in this project which is exactly why I wanted to share this blog post with other non-programmers. These days your ideas can easily be prototyped and deployed without needing to hire someone or going to uni for it.

With that being said, let’s get practical. Here is the exact step-by-step structure I used:

The Lean Stack

• Workspace: GitHub Codespaces (Free cloud container sandbox)
• Database: Supabase (Free tier PostgreSQL)
• Frontend: Next.js 15 (App Router) & TypeScript
• Components & Styling: Tailwind CSS v4 & Shadcn/ui
• AI Collaborators: Gemini CLI + Claude Code Pro (once I ran out of free gemini tokens)

Step 1: Initialize the Sandbox

I started with a completely empty workspace. I asked the github AI in the sidebar to install gemini cli and claude caude. I authenticated myself for both A quick prompt to the Gemini CLI initialized Next.js 15 with Tailwind v4’s CSS-first setup. I installed a few essential Shadcn/ui building blocks (those are design components) — <Card>, <Button>, and <Badge>—so I wouldn't have to waste time hardcoding UI elements from scratch. The first prompt should include the technologies, databases and libraries I mentioned so far, as well as your intention of what kind of site you are building. It is also important to mention PSEO at the start so your foundation is complete from the get-go. To create the prompt, take some time to spar with AI about your end goal with this directory, design preferences and what your budget is now as well as if your directory takes off one day and you might have to scale your database or integrate payment or user-authentication services.

Step 2: Structure the Database

I created a free Supabase instance (you get two of those with an account on supabase.com). To make the directory scale, I asked Gemini to create a clean relational schema for my directory idea. This is basically a map of tables that show how the real world is represented in the database. E.g.:

• Dentist (has a: name, adress, phone number, etc..) — -[and each dentist can have multiple doctor entities]
• Doctor (has a: name, title, working hours etc..)
• City (has a: name, geo location) — -[and multiple dentists can belong to a city]

Even if you do not entirely grasp the concept of databases and schemas, with your knowledge of the real world niche you are serving, you can critically challenge Gemini with it’s schema ideas by asking questions such as: “Why should a doctor have working hours if they can be called up spontaneously outside of their schedule?” -> then let the AI adjust it’s schema to your liking

In codespaces you have to paste your supabase API keys into an .env-file. This is in order for the app to have database access. This is one of the few manual tasks that AI can not do for you in this whole setup. You can ask it to create the file and the key placeholders for you.

Step 3: Automated Data Harvesting

Instead of manually copying and pasting data on Dentists (to continue with our example), I let Gemini write a TypeScript pipeline to extract data from a list of different websites. This is exactly where the directory idea takes shape as you are actively merging and normalizing information from different sources. In the end this is the value visitors gain: a one-stop-shop where they may even be able to book appointments or register their child online in your advanced build. The data-extraction-script also matched the new data that was coming in against my database. This way I was seeding hundreds of real corporate branches in my niche directly into the database tables. Important disclaimer: With some websites this will be a bit harder. Scraping is easy to do if the website you are accessing is served via static html. However, many modern site load the content that you are after dynamically via javascript. In that case you have to instruct your AI companion to write you a headless scraper using playwright (as an example). Sounds complicated, but just do it: create the files, paste and run the code, and if errors come up just feed them back to your assistant and find a solution that gets you closer to your goal.

Step 4: The pSEO Routing Loop

Next came the core SEO mechanic. I created a 2-level folder structure: src/app/[city]/[dentist]/page.tsx. This will end up defining your URL which you see at the top of the browser in the search bar. The brackets you see around some folder names signify that those are placeholders for the dynamic content from our database: they change depending on the content the user wants to see. By using Next.js generateStaticParams(), the site cross-multiplies our cities and languages at build time. It converts them into flat, lightning-fast static HTML pages that Google search bots can crawl easily.

Step 5: The Premium Makeover

With the routing working, I ran the server with the comman npm run dev To my surprise the initial layout still looked a bit squished and unaligned. That’s when I ran out of free gemini-tokens and used Claude Code to act as a ui designer. I described some of the spacing issues I saw and Claude wrapped the content into centered containers, added soft glassmorphic borders (I dont even know what that is), and inserted a bilingual SEO contextual footer at the bottom of each listing.

Step 6: Set Up the Google Portal

To ensure Google doesn’t miss a single page, I built an automated sitemap.ts file. It connects directly to a cookie-free, static Supabase client and dynamically outputs an XML sitemap of every single layout variation on the fly.

The Next Step

Building a solid directory doesn’t require a massive budget or months of work anymore. I’m not an expert at directories but by pairing a good database structure with an intentional AI workflow, I managed to build my first directory.

The next step after your local build is to deploy your directory with Vercel, maybe secure it with a free cloudflare account and (most importantly) place some backlinks on other sites (which is what I’m doing here). Then see how it does… I’ll report in a few months ;)