How to build a startup directory website with Claude Code

Rule of thumb: if you want a directory this week and do not care whose software it runs on, rent one. Brilliant Directories or eDirectory will have you live before this guide is finished. If the directory is the product, or the thing that brings people to your newsletter, your fund or your community, the shelf is worth owning, because the meters above are exactly where a growing directory pays and a curated list of companies with their rounds is an asset you should be able to move, export and redesign at will. The honest middle case is a directory whose value is somebody else’s data. There the answer is a subscription, because you may read Dealroom’s rounds and you may not republish them.

* On this template the free-tier lines to watch are images and the pause. The free plan includes 1 GB of file storage, and a cover or gallery image may be up to 10 MB, so a directory with a few hundred companies and their pictures reaches it. It also pauses a project after a week without activity, and a directory nobody edits for a week is normal. Pro, from $25/mo, lifts storage to 100 GB, ends the pause and keeps a daily backup for 7 days, with spend caps on by default.

Prices and rates from supabase.com, developex.com and claude.com, checked September 2026.

Nothing here is worth memorizing. These four just need to exist on your machine. From step 01 on, you say what you want and Claude Code runs the commands.

1. 01

   Set up the project

   An empty app running against your own database, plus a notes file so Claude Code keeps the two rules this build depends on in front of it.

   PromptSet up the projectCopy

   Set up a new React 18 + Vite + TypeScript project with Tailwind and the Supabase JS client. Read VITE_SUPABASE_URL and the publishable key (the sb_publishable_… key, which replaces the older anon key) from .env, and add .env to .gitignore in the same step so neither value reaches GitHub. Add a typed Supabase client under src/lib, then write a short CLAUDE.md describing the stack and the vocabulary for a startup directory (startups, funding rounds, categories, tags, articles, admins) and recording two standing rules: nothing is public until its status is published and the database enforces that rather than the screen, and only an admin may add, change or delete anything.

   Write the publish rule down now. Filtering drafts out in the component is the first thing any assistant will reasonably do, and it would hand every draft to anyone who asked the database directly.

2. 02

   Write the data model and the publish rule, then test it as a stranger

   Ten tables, a trigger that keeps the funding totals right, and the half of the access rules that decides what the public sees. No accounts yet, so the test is an anonymous query.

   PromptWrite the data model and the public rulesCopy

   Write the data model as migrations and show me the SQL before running it. Categories and tags, each with a name and a slug. Startups with a name, slug, short and long description, a category, a funding stage from a fixed list (Seed, Series A through Series E+, IPO, Grant, Acquisition), a status of published or unpublished that defaults to unpublished, an archived flag, logo and cover addresses, a gallery, team size, city and country, external links, and total_funding and funding_amount_latest columns. A startup_tags join table and a startup_social_links table. Funding rounds with a startup, stage, amount, date, lead investor, co-investors, pre and post valuations and notes, plus a trigger that recalculates the startup’s total and latest raise whenever a round is inserted, updated or deleted. Articles with a title, slug, body, featured image, category, author, status and published date, and a news_tags join table. Turn on row-level security on every table with the public half of the rules: anyone may read categories and tags, a startup and its rounds and links when it is published and not archived, and an article when it is published. Nothing else is readable or writable yet. Seed three made-up companies with a round each, leave one unpublished, and show me that an anonymous query returns two.

   The anonymous query is the test that matters. If it returns three, the publish rule lives in the screen rather than the database, and everything after this step inherits the leak.

3. 03

   Add sign-in, roles and the admin gate

   Accounts for the people who edit, a roles table of their own, and the other half of every access rule. There is no sign-up screen, on purpose, because visitors never need an account.

   PromptAdd auth, roles and the admin rulesCopy

   Add Supabase Auth with email and password: a sign-in screen, logout, a persisted session and a useUser hook, and no public sign-up screen. Add a user_roles table with admin and viewer roles, a security-definer has_role function, and a trigger that gives every new account a profile row and the viewer role. Add the admin half of every access rule: an admin may read, add, change and delete every row in every table, drafts included. Build an admin layout that sends anyone without the admin role back to the sign-in screen. Then give me the one SQL statement that promotes my own account to admin, and show me that a viewer account still sees exactly what an anonymous visitor sees.

   Two kinds of account, and one of them can do nothing the public cannot. That is deliberate: a viewer is an account that has not been promoted yet, not a third audience.

4. 04

   Build the directory, the company view and the funding page

   The public side. Cards, filters, a sort menu and a count, a view per company with its rounds, and the funding page. Read only published, unarchived companies, and let the database prove it.

   PromptBuild the directory and the funding pageCopy

   Build the public directory page: a grid of company cards with the logo, name, one-line description, category, stage and total raised. Add a filter sidebar with search over name and description, categories, funding stages, a minimum and maximum amount raised and a location field, plus a sort menu (newest, oldest, most funded, least funded, A to Z, Z to A) and a live count of results with a clear-all button. A card opens a detail view with the full description, links and the company’s funding rounds in date order. Give each company its own address so a link to it can be shared. Read only published, unarchived companies. Then build the funding page: a list of rounds with the company, stage, amount, date and investors, filterable by stage and by amount, sorted by amount by default.

   Ask for the address per company here, even though the template opens a panel. It is the second decision above, and it costs an hour now and a week once the directory has a hundred companies in it.

5. 05

   Build the news section, the admin and the image storage

   The largest step. Articles with a page each on the public side, and on the admin side one screen for every table, four storage buckets with limits, and the one server-side function that checks a logo before it is stored.

   PromptBuild the news section and the adminCopy

   Build the news section and the admin. Public side: a news list of published articles with the featured image, title, category and date, and a page per article at /news/its-slug showing the featured image and the body with its line breaks kept. Admin side, behind the admin layout: a dashboard with counts of startups, articles and accounts, a startups screen with add and edit dialogs, add a funding round, publish or unpublish, archive, and delete a company together with its rounds, links and tags, then an articles screen, a categories screen, a tags screen, and a users screen where a role is switched between admin and viewer. Create four storage buckets (logos up to 5 MB, covers, gallery and article images up to 10 MB, image types only) that anyone may read and only admins may write to. Write an upload-logo edge function that verifies the caller’s session and admin role, checks the startup exists and the file is under 5 MB, uploads with the service key and writes the logo address to the startup. Other images upload directly from the admin under the bucket rules.

   The delete is the part to read carefully. A company that leaves the directory takes its rounds, tags and links with it, or the funding page shows rounds for a company that no longer exists.

6. 06
   Destination

   Add the landing page and the meta, then look at it as a stranger

   The marketing page, a title and share card per page, and demo mode. Then open a private window and try to find the draft.

   PromptAdd the landing page, demo mode, and testCopy

   Add a marketing landing page with a hero, a sector section, a funding section, a trends section and a closing call to action, written as copy I can edit rather than pulled from the database. Give every public page a title and description and the card that shows when the link is shared. Add a demo mode switch on the sign-in screen that opens the admin screens with every write intercepted in the browser and a banner saying changes are not saved. Then open the site in a private window and walk me through it as a stranger: confirm the unpublished company from step 02 is nowhere, confirm an article address opens directly, confirm the admin sends me to sign-in, then sign in, publish that company, and watch it appear.

Review the access rules (row-level security policies) on every table. For each one, tell me in simple terms who can view, add, edit, and delete records, confirm that people can only reach their own data while the right roles can reach more, and flag anything left open that shouldn’t be.

One rule outranks everything above it: your database service key belongs on the server only, never in the app a visitor downloads and never in a repository. The publishable key is meant to be public and the access rules are what protect the data behind it, so if the service key escapes, treat it as compromised and replace it the same day.

Two things decide this, and speed is not one of them. Does the plan allow commercial use, since a directory that runs ads, sells listings or belongs to a fund is a business and Vercel’s Hobby tier is not for one. And does a link to a single article open that article for someone arriving cold, because every host here needs one routing rule for that and the template ships the Vercel version. The host serves one small static folder. Every listing comes from your database.

Add a server-side function called ai that calls my AI provider with the key held in function secrets, never in the browser. It accepts a task name and the text or fields for that task, refuses any caller who is not a signed-in admin, records every call in an ai_calls table (who, which task, tokens in and out, a cost estimate, success or failure), and returns the model’s answer as structured fields the admin screens can fill in. Add a small usage panel to the admin dashboard showing calls and estimated spend this month.

In the add-startup dialog, add a “Draft from website” button that sends the company’s homepage text to the ai function and gets back a one-line and a paragraph description, a suggested category from my categories table, up to five tags, the city and country, and any social links it found. Fill the form with the results for the admin to edit, and never publish anything automatically.

Add a “From announcement” action on the news screen that sends pasted text to the ai function and gets back a draft article (title, slug, body) and, if the text describes a raise, a funding round (stage from my stage list, amount, date, lead investor, co-investors). Show both as prefilled forms for the admin to confirm, match the article to a startup by name with a confirmation step, and leave both unpublished until the admin publishes them.

When an admin saves a startup or an article without tags, call the ai function with the description and get back a suggested category from my table and up to five tags, preferring tags that already exist. Show them as chips the admin accepts or removes before saving, and add a “Suggest tags” button on existing records so the back catalogue can be tidied a page at a time.

Add a “Weekly digest” button on the admin dashboard that gathers the startups, rounds and articles published in the last seven days and asks the ai function for a short digest with a headline, one paragraph, and a bullet per raise with the amount and stage. Save it as an unpublished article and offer a copy-as-text button, since this site does not send email.

Each prompt above picks the model that fits the job. As a rule of thumb, that is Haiku for high volume, Sonnet for everyday writing, and Opus for deeper reasoning. Model names move faster than this page does, so check the current list in the Claude docs (linked in the references below) before you build. Send every one of these prompts through that same ai function, so one key and one set of rules governs all of them.