Introduction
Introduction to DirectoryLaunch — a Next.js and Supabase boilerplate for shipping niche directory sites with submissions, payments and admin tools.
What is DirectoryLaunch?
DirectoryLaunch is a ready-to-launch boilerplate for building directory websites: SaaS catalogs, AI tool lists, job boards, Product Hunt-style launchpads, and more. Everything you normally have to build from scratch — submissions, payments, auth, admin panel — is already wired up.
If you can edit a JSON file and copy-paste some API keys, you can ship a directory. No need to be a full-time developer.
What you'll get after setup
- A working website running on
http://localhost:3000in ~15 minutes - Users can sign up, submit projects, pay for premium listings
- You get an admin panel to approve/reject submissions
- Deploy to Vercel in 5 minutes when you're ready to go live
What you can build
- SaaS directories — curated tool lists with categories and ratings
- AI tool catalogs — trending AI products with plans and filters
- Job boards — listings with submissions, pricing tiers, and search
- Startup launchpads — Product Hunt-style discovery sites
- Resource directories — templates, assets, guides, links
- Local business directories — location-based listings
The tech stack (in one line each)
| Piece | What it does |
|---|---|
| Next.js 16 | The web framework. Pages, routing, server-side rendering. |
| React 19 | UI components. |
| TypeScript | Typed JavaScript — catches bugs before they happen. |
| Tailwind CSS + Base UI | Styling. Accessible, unstyled primitives you fully control. Animated with Motion + GSAP. |
| Supabase | Database + user auth + file storage. All-in-one backend. |
| Stripe | Payments. Collects money from users. |
| Resend | Email delivery. Welcome emails, notifications, etc. |
| pnpm | Package manager. Installs dependencies. Don't use npm. |
The project is configured for pnpm 10.4+. npm install will likely fail with dependency errors. Install pnpm first — it takes 10 seconds.
How customization works
Everything brand-specific lives in the config/ folder. You edit a config file, and the whole site updates — no code changes needed.
config/
├── site.config.ts ← your brand name, URL, social links
├── features.config.ts ← on/off switches for all features
├── plans.config.ts ← your pricing tiers
├── themes.config.ts ← 14 built-in color themes
└── ...10 more files, each controlling one thing
Think of it as a settings panel, but in code.
Prefer AI? You're in the right place
The boilerplate ships with AI-spec files (CLAUDE.md, AGENTS.md, Cursor rules, Copilot instructions) in the project root. That means any modern AI IDE — Claude Code, Cursor, Codex, Aider, Zed, GitHub Copilot — already knows the architecture, file paths, and conventions as soon as you open the project.
Throughout these docs you'll see purple AI Prompt boxes. Each one is a ready-to-paste instruction for your AI assistant — fill the {placeholders}, hit copy, paste into your AI chat, done.
What's next
Want AI to do the heavy lifting? Paste this into your assistant right after cloning — it brands the site and tees up the rest:
Prefer to go step by step? Four steps to launch:
- Requirements — accounts and tools to prepare (5 minutes)
- Getting Access — receive the code after purchase (2 minutes)
- Installation — get it running locally (10 minutes)
- Quick Start — customize it for your brand (15 minutes)
Start with Requirements.