Building Geothermal.contractors: A Full-Stack Directory Platform with a 3D Globe, Stripe Subscriptions & Automated SEO

The Challenge: No Centralized Hub for a Booming Trade

Ground-source heat pumps reduce household energy consumption by 40–70 percent, qualify for federal tax credits, and last two to three times longer than conventional HVAC systems. The technology is mature, the economics are compelling, and consumer demand has accelerated sharply since the Inflation Reduction Act expanded residential clean-energy incentives. Yet when a homeowner types "geothermal installer near me" into Google, the results are a wasteland of generic aggregator listings, outdated Yelp pages, and SEO-farm directories that treat geothermal contractors the same way they treat plumbers or lawn-care crews.

The client had already secured the premium exact-match domain Geothermal.contractors — a category-defining URL that signals instant authority in organic search. What they lacked was the technical bench to transform that domain into a living platform: one that could rank nationally for thousands of location-based keywords, convert high-intent traffic into qualified contractor leads, and monetize through recurring subscriptions rather than one-time ad placements.

They came to us with three non-negotiable requirements. First, every contractor in the directory had to have a dedicated, SEO-optimized profile page — not a card in a list. Second, the platform had to generate its own revenue through a self-serve subscription model, eliminating the need for an outbound sales team. Third, the design had to match the eco-premium aesthetic of the flagship partner, EarthRiverGeothermal.com, pixel for pixel. This was not a WordPress theme project — it was a ground-up SaaS build.

Our Solution: A Revenue-Generating Directory Built to Dominate Search

We architected Geothermal.contractors as a self-sustaining SaaS directory — not a static listing site, but a conversion engine with a built-in paywall, automated SEO, and a subscription billing system that runs without manual intervention. Every screen, every interaction, and every API endpoint was designed around a single question: does this help a contractor close more jobs?

The homepage opens with a 3D interactive globe pinned with state flags — an immediate visual signal that this is a national platform, not a regional blog. Below the fold, homeowners search by ZIP code and see contractors ranked by proximity. Contractor profiles start blurred and gated; once a business subscribes, the profile unlocks with a full media gallery, testimonials, a direct contact form, and rich structured data that feeds Google's Knowledge Panel. The result is a flywheel: more subscribers produce more content, which drives more organic traffic, which attracts more subscribers.

Development Approach: Four-Month Sprint Cadence with a Senior USA Team

We staffed this engagement with a six-person team — lead architect, two senior frontend engineers, a backend and database specialist, a UX designer, and a dedicated project manager — all based in the United States. No offshore relays, no timezone lag, no context lost in translation. Work moved in tight two-week sprints across a four-month delivery window, with stakeholder demos every other Friday.

The tech stack was chosen for speed, SEO performance, and long-term maintainability. Next.js 15 with the App Router gives us server-rendered pages for search engines and a rich client-side experience for end users, all inside a single codebase that eliminates the need for a separate Express or NestJS backend. TypeScript enforces type safety from the database layer to the UI. Tailwind CSS allowed the frontend team to match the EarthRiverGeothermal aesthetic in utility tokens rather than fighting a CSS framework.

Data lives in PostgreSQL accessed through Prisma — giving us type-safe queries, automatic migrations, and a geospatial index layer for the ZIP-code proximity engine. Stripe manages all subscription billing, webhooks, and dunning. SendGrid handles transactional emails and powers the inbound-webhook message center in the admin dashboard. Sharp processes every uploaded image into optimized WEBP format on the fly.

Under the Hood: Engineering That Compounds Value

WebGL Globe with Graceful Degradation

The homepage hero is a slowly rotating 3D globe rendered in WebGL through @react-three/fiber. Each of the 50 U.S. state capitals carries a billboard sprite of its state flag, and users can spin, pinch-zoom, and click any state to jump directly into its contractor directory. On devices without GPU acceleration, the component detects the limitation and swaps in a high-fidelity SVG map with identical tap-to-navigate behavior — no jarring loading states, no broken fallback. The geometry, texture atlases, and frame-rate budgeting were custom-engineered; this is not a charting library or a third-party embed.

Blurred-Profile Paywall & Subscription Lifecycle

Every contractor in the database receives a profile page modeled after a LinkedIn business profile. Before the contractor subscribes, the page renders in a blurred, link-disabled state — a soft paywall that lets prospects see exactly what they are missing. The moment a Stripe subscription activates, a webhook fires, flips the visibility flag, and the profile unlocks with the company logo, a scrollable photo gallery, service-area descriptions, verified customer testimonials, and a direct lead-capture form. Cancellation reverses the process automatically. No manual moderation required.

Haversine Proximity Engine

When a homeowner enters a ZIP code, the backend resolves it to latitude and longitude, runs a Haversine-formula distance calculation against every contractor record, and returns results sorted by proximity — all in under 50 milliseconds thanks to a PostgreSQL geospatial index. Contractors within 25 miles receive a "Nearby" badge. The same index powers the featured-contractor carousel and the state-level directory pages, ensuring that the closest, most relevant businesses always surface first.

SEO Automation Layer

Rather than relying on manual metadata entry, we built an automation layer that handles optimization at publish time. Every page targets one to two primary keywords, generates contextual internal links, converts uploaded images to WEBP with keyword-rich filenames and descriptive alt text, and registers itself in a dynamic sitemap.xml served with a styled XSLT view. Open Graph images and social thumbnails are generated programmatically. Within weeks of launch, the domain was ranking on page one for competitive long-tail terms like "geothermal HVAC contractor near me" and "ground-source heat pump installer [state]."

Cost Breakdown: Every Dollar Itemized

Radical cost transparency is a core operating principle. Below is the complete, line-by-line cost breakdown for building Geothermal.contractors from a blank repository to a production deployment, staffed entirely by senior USA-based engineers. No pre-built templates were used. Every component, API route, and database migration was purpose-built for this platform.

Revenue Model & Three-Year Projections

A directory platform lives or dies on subscriber economics. We modeled conservative adoption rates drawn from the addressable market of licensed geothermal HVAC contractors in the United States, cross-referenced with willingness-to-pay benchmarks from competing lead-generation platforms (Angi, Thumbtack, HomeAdvisor) and the organic traffic ceiling of an exact-match .contractors domain with best-in-class SEO.