Aperture - AI Tools Directory

Quick Start

Requirements: Node.js 18+. The template uses npm and is fully static - no database, API keys, or environment variables are required to run it.

Download and unzip

After purchase, download the zip from your order confirmation email and unzip it into your projects folder.

Install dependencies

npm install

Start the dev server

npm run dev

Open http://localhost:3000. Key routes:

/explore - faceted browse with filters and sort
/tool/[slug] - individual tool page
/alternatives/[slug] - programmatic comparison pages
/collections, /blog, /submit, /pricing, /about, /saved

Press Cmd+K (or Ctrl+K) anywhere to open the search palette.

Build, test, and ship

npm run build
npm start

# optional
npm test        # Vitest unit tests
npm run typecheck

Every category, tool, alternatives, collection, and blog page is statically generated at build time.

Folder Structure

Next.js App Router, static-first. All content is read from a typed mock-data layer in src/lib - swap it for your own API and the pages keep working. There are no image assets: screenshots are CSS mockups (AppPreview) and tool logos are gradient app-icons (ToolIcon).

src/
├── app/
│   ├── layout.tsx              # Fonts (Instrument Serif, Geist, Geist Mono), providers, JSON-LD
│   ├── globals.css             # Design tokens (@theme) + flash-free dark mode
│   ├── page.tsx                # Home - hero, trending, spotlight, categories, collections
│   ├── explore/page.tsx        # Faceted browse (ExploreView)
│   ├── category/[slug]/        # Category landing (generateStaticParams + ItemList JSON-LD)
│   ├── tool/[slug]/            # Tool detail (SoftwareApplication JSON-LD)
│   ├── alternatives/[slug]/    # "X alternatives" comparison pages
│   ├── collections/            # Collections index + [slug] detail
│   ├── blog/                   # Blog index + [slug] post (Article JSON-LD)
│   ├── submit/page.tsx         # Multi-step submit form (mock)
│   ├── pricing/page.tsx        # Featured-placement pricing
│   ├── about/page.tsx          # About
│   ├── saved/page.tsx          # Saved-tools library (localStorage)
│   ├── sitemap.ts              # Generated sitemap
│   └── not-found.tsx           # 404
├── components/                 # ListingCard, ToolIcon, AppPreview, CommandPalette,
│                               # ExploreView, FilterSidebar, CategoryTile, ...
└── lib/
    ├── catalog.ts              # Tools, categories, collections (the data)
    ├── queries.ts              # Lookups, filtering, sorting, search (+ queries.test.ts)
    ├── saved-tools.ts          # Bookmark reducer (+ saved-tools.test.ts)
    ├── blog.ts                 # Blog posts
    ├── seo.ts                  # JSON-LD builders
    ├── site.ts                 # Site name + URL config
    └── types.ts                # Tool / Category / Collection types

Client components: ExploreView, CommandPalette, SavedToolsProvider, ThemeProvider, SubmitForm, and Gallery. Everything else renders on the server.

Customization

Brand color (reskin in one place)

Edit --color-accent (and its value under .dark) in src/app/globals.css. Every accent - links, buttons, active filters, the featured treatment - updates from those two variables.

Catalogue and blog data

Tools, categories, and collections live in src/lib/catalog.ts as typed arrays (shapes in src/lib/types.ts); blog posts are in src/lib/blog.ts. The shapes are API-ready, so you can replace the arrays with a fetch from your own source.

Icons and screenshots

Each tool shows a category app-icon from ToolIcon.tsx (a category-to-icon map). The product-screenshot mockups are rendered in CSS by AppPreview.tsx - replace it with a real next/image once you have real screenshots.

Fonts and site config

Fonts load in src/app/layout.tsx (Instrument Serif, Geist, Geist Mono). Your site name and canonical URL live in src/lib/site.ts (or set NEXT_PUBLIC_SITE_URL).

Deployment

Fully static with no server dependencies. Deploy to Vercel, Netlify, Cloudflare Pages, or any host that runs Next.js.

Set your site URL

# .env.local
NEXT_PUBLIC_SITE_URL=https://your-directory.com

This makes canonical URLs, the sitemap, and JSON-LD point at your domain. It is the only variable, and it is optional for local use.

Deploy

On Vercel, import the repo and ship - no build configuration needed. No database or API keys are required to go live.

Still stuck?

Email us at support@thekitbase.app with your order number and we'll help you get set up.