How I Built a Chinese Zodiac Compatibility Tool with Next.js

#webdev #programming #ai #productivity

I recently built ZodiacMatch — a free tool that lets you pick two Chinese zodiac signs and get an instant compatibility score. No sign-up, no download, no friction.

Here's how it works under the hood.

## The Problem

Chinese zodiac compatibility is a centuries-old system, but most online tools are either:

Oversimplified — just "good" or "bad" with no detail
Buried in ads — the actual tool is after 3 popups
Slow — multiple page loads to get an answer

I wanted something that loads instantly, answers the question in one click, and gives enough depth to be useful.

## The Data Structure

Chinese zodiac has 12 animal signs. That's 66 unique pairings (12 choose 2). Each pairing needed:

A base compatibility score (0–100)
Element interaction modifiers (Five Elements cycle)
Strengths and challenges
Communication style assessment

Instead of hardcoding all 66, I structured the data as a matrix with dimension scores that combine dynamically. This makes it easy to tweak any dimension without touching every entry.

interface CompatibilityData {
  baseScore: number;
  elementModifier: number;
  strengths: string[];
  challenges: string[];
  communication: string;
}

## Tech Stack

Next.js 14 (App Router) — file-based routing, SSR for SEO
TypeScript — type safety across the board
Tailwind CSS — responsive, mobile-first
Vercel — edge deployment with zero config

## SEO Approach

Each of the 66 pairings has its own page with unique metadata:

/ratings/rat-ox    → "Rat and Ox Compatibility"
/ratings/tiger-rabbit → "Tiger and Rabbit Compatibility"

Every page has:

Unique title and meta description
JSON-LD structured data (VideoGame schema with 2-player context)
Clean URL structure
Breadcrumb navigation

The homepage targets broad keywords ("Chinese zodiac compatibility"), while individual pairing pages catch long-tail searches ("rat and ox compatibility 2025").

## Why No Sign-Up?

The entire tool runs client-side. The compatibility data is a static JSON file — no database, no API calls, no authentication needed. This means:

Zero server cost for the core feature
Instant load — the data is there on page render
No friction — users go from Google search to result in under 2 seconds

## What I'd Do Differently

Multi-language support — Chinese zodiac has huge audiences in Chinese, Vietnamese, and Korean markets. Adding i18n early would have been smart.
More visual — the compatibility results are text-heavy. Animated charts or radar diagrams would make it more engaging.
Content marketing earlier — blog posts about each zodiac sign pair drive consistent long-tail traffic.