Build a directory listing website that earns online

A developer released ToolDir, a directory listing website template built with Next.js 15, Supabase, and Stripe. The boilerplate enables creators to quickly launch a public directory site that accepts tool submissions, sells launch slots, publishes a blog, and manages everything from an admin panel. The template uses a Pages Router architecture with TanStack React Query, Redux Toolkit, TipTap, and Framer Motion.

A starter kit to quickly make your own directory listing website using Nextjs, Supabase and Stripe This blog tells the story about ToolDir https://tooldir.buildsaas.dev/ , the directory listing website template built using Nextjs, Supabase and Stripe, a full-stack template to quickly build your directory listing website platform that can earn online. Directory listing websites are boring, but in 2026, we got tonnes of SaaS submission websites, AI tool listing websites, prompt directories, Design md directories, and even React frontend UI directories. Each directory has almost the same pattern of building, and every time we do the same process as defined Below is our ToolDir LLM.txt for the directory template. Copy the text and paste it into Claude to get more details about our listing directory template, its features, and how to create one on your own. ToolDir — LLM context file Purpose: help coding agents understand this repo quickly without exploratory scanning. Last cleaned for launch template readiness. 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 | Route | File | Role | |-------|------|------| | / | pages/index.js | Directory home | | /tool/ slug | pages/tool/ slug .js | Tool detail | | /categories/ slug | pages/categories/ slug .js | Category filter | | /submit | pages/submit.js | Multi-step submission | | /pricing | pages/pricing.js | Launch slot calendar | | /dashboard | pages/dashboard.js | User submissions | | /blog , /blog/ slug | pages/blog .js | Public blog | | /contact , /privacy , /terms-and-conditions | legal | | /auth/callback | Supabase OAuth | | /robots.txt , /sitemap.xml | SEO | Admin routes keep | Route | Role | |-------|------| | /admin | Shell + tabs | | /admin/blogs/new , /admin/blogs/ id | Nested blog editor | | /admin/editor/blog | Legacy redirect into nested editor | 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 bash npm install npm run dev http://localhost:3002 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, check the demo https://tooldir.buildsaas.dev/ Once checked, buy the template 😃 https://shreyvijayvargiya.gumroad.com/l/nextjs-supabase-directory-boilerplate?layout=profile Let me explain what this template contains 7 steps and your directory website is ready with database, authentication and payment integrated. 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 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. The template is built using the latest technology stack All tech stacks are universally accepted and open-source, making it robust by nature. 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. Cheers Shrey If needed, custom template, shoot me an email at shreyvijayvargiya26@gmail.com mailto:shreyvijayvargiya26@gmail.com