Build a directory listing website that earns online

Product

ToolDir is a Next.js 15 (Pages Router) AI tool directory boilerplate. Buyers launch a public directory site, accept tool submissions, sell launch slots, publish a blog, and manage everything from /admin.

This is NOT a generic multi-tenant SaaS CMS. Older SaaS modules (email campaigns, waitlist, kanban, products catalog, forms builder, cron, codegen) were removed.

Tech stack

• Next.js 15 Pages Router (pages/), React 18, Tailwind, shadcn/ui
• Supabase (Auth + Postgres + Storage)
• TanStack React Query for server state
• Redux Toolkit only for subscription/customer client state
• TipTap for blog CMS
• Stripe one-time Checkout for launch slots (server builds price_data; no Price ID catalog required)
• Set STRIPE_TEST_ZERO=true (+ NEXT_PUBLIC_STRIPE_TEST_ZERO) to force $0 checkout while wiring webhooks/admin
• Resend for optional slot-payment receipt (sendSlotPaymentEmail)
• Framer Motion for marketing motion

Critical architecture note

app/ is NOT the App Router.

• pages/ = real Next.js routes and API handlers
• app/admin/ = admin UI components
• app/frontend/ = marketing site components (Navbar, Footer, directory UI)
• components/ui/ = shadcn primitives
• lib/ = APIs, hooks, config, data seeds, store, utils

Public routes (keep)

Admin routes (keep)

Admin tabs (sidebar): analytics, users, submissions, payments, invoices, pricing-slots, blogs. Tab id forms was renamed to submissions (legacy forms still opens SubmissionsTab).

API routes (keep)

• /api/directory-tools/publish — approve submission → listing
• /api/directory-tools/seed — seed from lib/data/tools.js
• /api/tool-submissions/create — public submit
• /api/pricing-slots/upsert — admin slot CRUD
• /api/storage/upload-image — Supabase Storage uploads
• /api/messages/create — contact form
• /api/stripe/checkout — one-time Checkout for launch slot (price_data, optional $0 via STRIPE_TEST_ZERO)
• /api/stripe/webhook — marks submission paid, upserts payments / customers / users, sends Resend receipt

Removed: /api/stripe/cancel-subscription (no SaaS subscriptions).

Core modules (do not delete)

lib/api/directoryTools.js
lib/api/toolSubmissions.js
lib/api/pricingSlots.js
lib/api/blog.js
lib/api/storage.js
lib/api/auth.js
lib/hooks/useDirectoryTools.js
lib/hooks/useBlogs.js
lib/hooks/usePricingSlots.js
lib/data/tools.js
lib/data/pricing-slots.js
lib/data/testimonials.js
app/frontend/marketing/*
app/admin/components/SubmissionsTab.jsx
app/admin/components/PricingSlotsTab.jsx
app/admin/components/BlogTab.jsx
app/admin/components/BlogTiptapEditor.jsx
app/admin/views/BlogEditorView.jsx

Data model (Supabase)

Primary tables: directory_tools, tool_submissions, pricing_slots, blogs Billing/admin: users, customers, payments, checkouts, invoices, messages, app_analytics Storage bucket: saas-starter-storage (name kept for compatibility)

See supabase-migrations.sql (single file: tables + payment columns + Storage bucket).

When Supabase is empty / unset, directory listing can fall back to mock data in lib/data/tools.js.

Supabase Storage

Bucket name: saas-starter-storage (constant STORAGE_BUCKET in lib/api/storage.js). TipTap editors call uploadBlogEditorImage → direct Storage upload, fallback POST /api/storage/upload-image. Paths: blogs/content/, blogs/{id}/content/, blogs/banners/, blogs/{id}/banner-*. SQL: run supabase-migrations.sql once (includes Storage bucket saas-starter-storage).

Environment variables

Required for core:

• NEXT_PUBLIC_SITE_URL
• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_KEY

Payments:

• STRIPE_SECRET_KEY
• STRIPE_WEBHOOK_SECRET
• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY (optional if you only start checkout server-side)
• STRIPE_TEST_ZERO=true — charge $0 in Checkout for local testing
• NEXT_PUBLIC_STRIPE_TEST_ZERO=true — show $0 copy on submit UI

Optional:

• RESEND_API_KEY, RESEND_FROM_EMAIL
• NEXT_PUBLIC_POSTHOG_KEY, NEXT_PUBLIC_POSTHOG_HOST
• NEXT_PUBLIC_APP_URL (legacy Stripe fallback; prefer SITE_URL)

Use .env.local locally. .env* is gitignored.

Intentional dual editors

• BlogTiptapEditor.jsx — canonical nested route editor (/admin/blogs/*)
• TiptapEditor.jsx — still used by BlogTab modal list workflow

Do not delete either without consolidating BlogTab first.

What was removed for launch

Do not reintroduce these without a product need:

• Forms builder (FormsTab, /api/forms/*, forms / form_submissions tables)
• Email campaigns, subscribers, waitlist, kanban/tasks, idea DB, changelog, cron, assets CMS
• Builder zip/AST APIs, roles-config codegen (modules-config, generate-*)
• Unused deps: octokit, archiver, simple-git, nginx, react-toastify, @vercel/analytics, @stripe/stripe-js, unused Radix accordion/checkbox/avatar/tabs/tooltip/switch/scroll-area

Conventions for agents

1. Prefer Pages Router for new pages under pages/.
2. Put reusable marketing UI in app/frontend/marketing/.
3. Put Supabase access in lib/api/*; use React Query hooks in lib/hooks/*.
4. Do not change visual theme / CSS / layout unless the task is design work.
5. Do not commit .env files.
6. Keep packaging lean — delete orphan modules instead of leaving stubs.
7. Brand copy is ToolDir, not "SAAS Starter".

Local commands

npm install
npm run dev     # http://localhost:3002
npm run build
npm run lint
npm run pack    # clean buyer zip → dist/tooldir.zip

When I was building this boilerplate, I wrote the LLM text to help everyone ask questions related to the boilerplate on Claude or chatgpt.

Once done, <a href="https://tooldir.buildsaas.dev/" rel="noopener ugc nofollow" target="_blank">check the demo</a>

Once checked, <a href="https://shreyvijayvargiya.gumroad.com/l/nextjs-supabase-directory-boilerplate?layout=profile" rel="noopener ugc nofollow" target="_blank">buy the template 😃</a>

Let me explain what this template contains

How to build your Directory website in seconds?

1. You will get the zip file
2. Unzip it and run some commands (All details are in the Readme.md file in the zip)
3. Once run, add the supabase migration SQL in supabase SQL editor to create the database tables
4. For authentication, simply enable supabase Google and Email as a sign-in provider and add Google Cloud Console credentials, such as Client ID and Client secret, along with the OAuth callback URL (Details are in the readme file)
5. Add the Stripe secret key from the Stripe dashboard to enable payment for the early submission booking slot
6. Change and customise the pricing, landing page and blogs as per your project needs
7. Deploy the app and put the env keys containing supabase key and the Stripe key on the deployment server

7 steps and your directory website is ready with database, authentication and payment integrated.

Admin Panel to Manage Directory Website Business

That is not enough

Inside the zip folder, you can find app/admin folder, this contains the admin panel to write blog, review submissions, check payments and website analytics and update pricing for each slot, all reflects directly on the website within the admin panel.

https://tooldir.buildsaas.dev/admin

This makes it easy for you to run the entire directory website content, manage users and view analytics without touching code.

Tech Stack

The template is built using the latest technology stack

1. Nextjs
2. Shadcn for UI components
3. Tailwind for styling
4. framer motion for animation
5. Lucide React for icons
6. Supabase for the database
7. Supabase storage for images
8. Stripe for payment
9. Resend for emailing

All tech stacks are universally accepted and open-source, making it robust by nature.

Conclusion

Directory listing websites are in trend, and making one is a good way for you to earn money online. ToolDir ease the pain in making the entire website and saved almost $2k as a developer's costs; it works well with AI agents like Cursor, v0 or Lovable or Bolt.

Check the demo

Get the template

Cheers

Shrey

If needed, custom template, shoot me an email at shreyvijayvargiya26@gmail.com