directory.griffen.codes

A dynamic discovery and display system that automatically finds and showcases all active subdomains under griffen.codes with their OpenGraph metadata.

🚀 What is Subdomain Directory?

I had over a dozen projects scattered across different subdomains of griffen.codes, and there was no easy way for visitors to discover them. This project solves that problem by automatically scanning for all subdomains, fetching their metadata, and presenting them in a clean, organized directory.

Check it out here

✨ Key Features

Automatic Discovery

• Vercel API Integration: Queries your Vercel projects to find all configured domains and subdomains
• Certificate Transparency Fallback: Uses crt.sh as a backup discovery method
• Pre-build Caching: Generates a static JSON file during deployment to avoid rate limits

Smart Filtering

• Redirect Detection: Automatically identifies subdomains that redirect elsewhere
• Custom Exclusions: Filter out private or internal subdomains you don’t want public
• Separate Display: Shows active sites and redirects in distinct sections

Rich Metadata Display

• OpenGraph Data: Fetches titles, descriptions, and preview images from each subdomain
• Graceful Fallbacks: Handles missing metadata with sensible defaults
• Responsive Grid: Clean card-based layout that works on any screen size

🎯 Perfect For

• Developers managing multiple projects across subdomains
• Portfolio Sites showcasing a collection of work
• Organizations with distributed services that need a unified directory
• Anyone looking to make their subdomain ecosystem more discoverable

Technology Stack

• Next.js 16: React framework with App Router and dynamic rendering
• TypeScript: Type-safe development experience
• Tailwind CSS: Utility-first styling system
• Vercel API: Primary subdomain discovery method
• OpenGraph Protocol: Metadata extraction standard

How It Works

1. Pre-build Phase: The generate-subdomains script runs before deployment
2. Discovery: Queries Vercel API for all projects and their domains
3. Filtering: Removes excluded subdomains and checks for redirects
4. Caching: Saves results to data/subdomains.json for fast loading
5. Metadata: Fetches OpenGraph data from each subdomain at runtime
6. Display: Renders cards with titles, descriptions, and images

Measurable Impact

This project solved several real problems I was facing:

• Discoverability: Visitors can now find all my projects in one place
• Maintenance: No manual updates needed when adding new subdomains
• Performance: Pre-build caching keeps page loads under 2 seconds
• Reliability: Graceful fallbacks ensure the site always works

🔗 Links

• Live Site: https://directory.griffen.codes

The subdomain directory makes your project ecosystem visible and accessible. If you’re managing multiple subdomains, give it a try and see how it simplifies discovery for your visitors.