Directory Websites

184 - How Whalesync Built a 1,000+ Listing AI Tools Directory in 1 Week (No-Code Stack Breakdown)

Learn how the Whalesync team built a fully synced AI tools directory using Airtable, Webflow, and Whalesync in just 7 days. Step-by-step breakdown of the tech stack, data collection, and SEO strategy.

Connor FinlaysonMarch 27, 20253 min read

What is Whalesync?

Whalesync lets you sync data between tools like Airtable, Webflow, Notion, and Supabase — making it easy to manage content across platforms. Unlike traditional automation tools like Zapier or Make, Whalesync is built for syncing at scale. That’s why it’s become a go-to for no-code builders, especially when working on large directories.

Why Whalesync Focused on Syncing (Not Automation)

Matt and his co-founder Curtis started Whalesync after hearing one recurring problem from no-code builders: “I’ve got 20 zaps set up, but the one with 30 steps that syncs Airtable to Webflow keeps breaking.” Instead of trying to build logic-heavy workflows, users just wanted to sync their backend to their frontend—without constant triggers or patchy workarounds. That’s the niche Whalesync jumped into.

Building the AI Tools Directory

Whalesync wanted to scratch their own itch: AI tools were popping up everywhere, but keeping track was a mess. So they decided to build a searchable, filterable AI directory.

The Stack:

Search + Filtering: How It Works

They used custom scripts to power search and filtering on the site. While they considered tools like Jetboost or Finsweet Attributes, they opted for a native JavaScript setup to keep things fast and flexible. Matt gives a shoutout to Corey Moen, the Webflow designer behind their setup.

How They Collected & Enriched 1,000+ Listings

Here’s their step-by-step data collection and enrichment workflow:

  1. Collect URLs – Gather a big list of tool names and homepages.
  2. Scrape Metadata – Use Google Sheets with XMLIMPORT to pull the site title, meta description, and H1.
  3. Generate Descriptions – Use Airtable AI to write short, clear descriptions (under 100 characters). They referenced the title, H1, and description fields in the AI prompts.
  4. Add Images – Use the Airtable Web Clipper extension to grab thumbnails from each site.
  5. Tag Tools – Start by tagging 300 tools manually with ChatGPT, then train Airtable AI to tag the rest.
  6. Use Airtable Views – Only listings with complete data (description, tags, role, image) were synced to Webflow via a special Airtable view. Pro tip: You can also use filters instead of views in Whalesync for more flexible two-way syncing.

Why Airtable (Not Notion or Supabase)

While both Notion and Supabase were options, they went with Airtable for two reasons:

  • Scalability – Easier to manage 1,000+ rows of structured data.
  • Interface – More flexible views and extensions (like Web Clipper). That said, Matt notes more technical users are starting to use Supabase + Airtable, where Supabase is the backend and Airtable is the admin panel.

SEO Strategy: CMS-Driven Pages

Although the first version of the directory focused on one listing page, Matt shared plans to expand into:

  • CMS pages for tags and categories (e.g. “AI tools for finance” or “CRM AI tools”)
  • Programmatic SEO landing pages (similar to what Coinbase and Zapier do) Whalesync’s own YouTube tutorial walks through how to create these types of landing pages automatically using their stack.

Common Whalesync Use Cases (Besides Directories)

Besides directories, Matt highlighted two fast-growing use cases:

  1. Programmatic SEO – Build thousands of SEO-optimized landing pages.
  2. Local SEO Pages – E.g. “Best yoga studios in Toronto” – powered by filtered CMS collections. Bonus: You can also use DataFetcher + Whalesync to sync external APIs into Webflow via Airtable.

Ready to learn more?

Check out our courses for step-by-step guidance

View Courses