DEV Community: Chen Tao

Building a Roblox Game Guide with Next.js 16, Tailwind CSS v4, and a Single-Source-of-Truth Routing System

Chen Tao — Thu, 30 Jul 2026 03:16:10 +0000

I recently built Catch a Brainrot Guide, a fan-made resource hub for a Roblox creature-collection RPG. Here's a walkthrough of the tech stack and some architectural decisions that made the project interesting.

Stack

Next.js 16 (App Router, static export)
React 19
Tailwind CSS v4 — the new @theme directive means no more tailwind.config.ts
TypeScript 5.7
Cloudflare Pages for deployment

Single Source of Truth for Routes

All 20+ page routes live in one file: src/lib/routes.ts. Every route is typed with its path, label, sitemap priority, changefreq, and nav/footer placement.

export const ROUTES: RouteDef[] = [
  { path: '/tier-list', label: 'Tier List', priority: 0.9, changefreq: 'daily', nav: 'brainrots', footer: 'quick' },
  { path: '/guide/how-to-play', label: 'How to Play', priority: 0.8, changefreq: 'weekly', nav: 'guides' },
  // ... 20+ pages
];

The Navbar, Footer, and sitemap.ts all import from this single array. Adding a new page means one entry in routes.ts — everything else syncs automatically.

// sitemap.ts — auto-syncs from ROUTES
export default function sitemap(): MetadataRoute.Sitemap {
  return ROUTES.map((route) => ({
    url: route.path === '/' ? GAME.domain : `${GAME.domain}${route.path}`,
    lastModified: new Date(),
    changeFrequency: route.changefreq,
    priority: route.priority,
  }));
}

Tailwind CSS v4: Bye-Bye tailwind.config.ts

Tailwind v4 moves configuration into native CSS via @theme:

@import "tailwindcss";

@theme {
  --color-background: #0a0a0f;
  --color-foreground: #f1f5f9;
  --color-primary: #8b5cf6;
  --color-card: #14141f;
  --color-glass-border: rgba(255, 255, 255, 0.08);
}

SEO Architecture (Three Layers)

1. Global Metadata (layout.tsx)

Title templates, Open Graph, Twitter cards, robots directives, and canonical URL are set once in the root layout.

export const metadata: Metadata = {
  title: { default: `${GAME.name} - Roblox Game Guide, Codes & Wiki`, template: `%s | ${GAME.name}` },
  robots: { index: true, follow: true },
  alternates: { canonical: GAME.domain },
};

2. Page-Level JSON-LD Schemas

Every page injects context-specific structured data — BreadcrumbList, FAQPage, or Article schemas.

const breadcrumbSchema = generateBreadcrumbSchema([
  { name: 'Home', url: '/' },
  { name: 'Tier List', url: '/tier-list' },
]);

3. IndexNow Auto-Submission

After each build, a script parses sitemap.xml and pushes all URLs to the IndexNow API (accepted by Bing, Yandex, Naver). No registration required.

const payload = {
  host: 'catchabrainrot.site',
  key: 'your-key',
  urlList: allUrls,
};
await fetch('https://api.indexnow.org/indexnow', { method: 'POST', body: JSON.stringify(payload) });

YouTube Embed: Facade Pattern

Instead of loading a 1MB+ YouTube iframe on page load, I use a facade — a static thumbnail with a play button that swaps to the real iframe only on click.

export default function YouTubeEmbed({ videoId, title }: Props) {
  const [loaded, setLoaded] = useState(false);
  const thumbnail = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
  return loaded ? (
    <iframe src={`https://www.youtube.com/embed/${videoId}?autoplay=1`} />
  ) : (
    <button onClick={() => setLoaded(true)}>
      <img src={thumbnail} loading="lazy" fetchPriority="low" />
      <PlayIcon />
    </button>
  );
}

The "Honest Codes" Pattern

A common SEO play in Roblox guide sites is to fabricate fake codes to trap search traffic. I went the opposite direction: the /codes page transparently states the game has no code redemption system yet, and redirects users toward the official Discord for updates. It ranks well and earns trust — a better long-term play than fake codes.

AI-Assisted Development

The repo includes an AGENTS.md that defines an SEO workflow: when a keyword research report lands, the agent analyzes priorities, checks existing coverage, generates new pages, updates sitemap/nav, runs an SEO audit, builds, and logs results. This turns keyword research into a semi-automated pipeline from idea to deployment.

Deployment

Static export to Cloudflare Pages, with IndexNow submission running post-build.

Takeaways

Single source of truth for routes eliminates maintenance drift
Structured SEO from day one beats retrofitting later
Honesty as a content strategy builds trust and ranks better than fabricated content

The full site is live at catchabrainrot.site. Questions or thoughts? Drop a comment below.

Building a Lightning-Fast Roblox Gaming Guide Site with Next.js 16 SSG & IndexNow Automation

Chen Tao — Sat, 25 Jul 2026 10:59:34 +0000

Building a specialized wiki or gaming guide platform requires balancing speed, SEO indexing efficiency, and mobile-first UX. In this technical case study, I'll walk through how we engineered Animal Hospital Guide & Tools, a high-performance gaming wiki built for Roblox horror game enthusiasts, compiled into 50+ pure static HTML routes using Next.js 16 Turbopack and automated search engine indexation.

1. Why SSG Over SSR for Gaming Guides

Gaming guide sites experience extreme traffic spikes whenever new game updates or active codes are released. Server-Side Rendering (SSR) adds CPU overhead and latency during peak traffic.

By utilizing Static Site Generation (SSG) with Next.js App Router, every page (from the Roblox Animal Hospital Active Codes Tracker to the Animal Hospital Class Power Rankings Tier List) is pre-rendered at build time into optimized HTML files.

// src/app/sitemap.ts
import { MetadataRoute } from 'next';
import gameConfig from '@/data/game.config.json';

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://animalhospital.blog';
  const currentDate = new Date().toISOString();

  return gameConfig.routes.map((route) => ({
    url: `${baseUrl}${route.path === '/' ? '' : route.path}`,
    lastModified: currentDate,
    changeFrequency: route.changefreq as any,
    priority: route.priority,
  }));
}

2. Instant Search Engine Indexation via IndexNow API

For gaming hubs, search engine indexing speed is critical. Instead of waiting days for search crawlers to discover new updates, we built a Python automation pipeline using the IndexNow Protocol (supported by Microsoft Bing, Yandex, and Seznam).

Whenever static pages are exported, our build script broadcasts the URL matrix directly to IndexNow endpoints:

import json
import urllib.request

HOST = "animalhospital.blog"
KEY = "a8d9e2f47c1b569302e1f487b39c05e1"
INDEXNOW_ENDPOINT = "https://yandex.com/indexnow"

def submit_urls(urls):
    payload = {
        "host": HOST,
        "key": KEY,
        "keyLocation": f"https://{HOST}/{KEY}.txt",
        "urlList": urls
    }
    req = urllib.request.Request(
        INDEXNOW_ENDPOINT,
        data=json.dumps(payload).encode("utf-8"),
        headers={"Content-Type": "application/json; charset=utf-8"}
    )
    with urllib.request.urlopen(req) as resp:
        if resp.status in [200, 202]:
            print("🚀 Successfully broadcasted 50+ URLs to IndexNow network!")

This guarantees that pages like the interactive Animal Hospital Anomaly Finder & Walkthrough get indexed within minutes of deployment.

3. Mobile-First UI Defenses: Zero Scrollbar Eraser

A common flaw in mobile WebApp navigation is native browser scrollbars cluttering top navigation bars. To solve this, we enforced CSS scrollbar erasure while preserving smooth touch panning:

/* In globals.css */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

Paired with a responsive 2-column mobile drawer overlay, users on mobile devices experience zero layout shift (Zero CLS) and crisp navigation.

4. Key Takeaways & Stack Summary

Framework: Next.js 16 (App Router + Turbopack)
Styling: Tailwind CSS v4 + Vanilla Glassmorphism
Hosting: Cloudflare Pages (Zero-Cold Start Global CDN)
SEO: Automated IndexNow Push + Schema JSON-LD Injection

Check out the live platform at Animal Hospital Guide to see the performance and static pre-rendering in action!

How I Built a Game Wiki with 38 Pages Using Next.js Static Export

Chen Tao — Wed, 22 Jul 2026 02:34:27 +0000

I recently built Gakuran Guide (gakuranguide.wiki), a comprehensive wiki for a Roblox fighting game. It has 38 static pages, rich SEO metadata, and builds in under 30 seconds. Here's how.

The Stack

Next.js 14 with App Router
Static Export (output: 'export')
Tailwind CSS for styling
JSON-LD Structured Data for every guide page
Dynamic Sitemap with auto-detection of all routes

Why Static Export?

The Gakuran game data changes weekly, but I rebuild weekly — making SSR/ISR overkill. Static export means:

Files served from a CDN (Cloudflare Pages — free)
No server costs. Zero.
100/100 Lighthouse scores
No hydration issues

JSON-LD: Rich Results Without SSR

Every guide page has structured data:

export default function GuidePage() {
  const buildDate = new Date().toLocaleDateString('en-US', {
    month: 'short', day: 'numeric', year: 'numeric'
  });

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Article",
            "headline": "Fighting Styles Tier List",
            "dateModified": buildDate,
            // ...
          })
        }}
      />
      {/* page content */}
    </>
  );
}

Since new Date() runs at build time for static export, the date is always fresh without any runtime overhead.

Auto-Updating Build Dates

Every page has an "Updated [date]" badge. No cron, no API — it's just:

const buildDate = new Date().toLocaleDateString('en-US', {
  month: 'short', day: 'numeric', year: 'numeric'
});

Rebuild → new date. Simple.

SEO Results (3 weeks in)

First-page Google ranking for "gakuran tier list"
Featured snippet for "gakuran codes"
All 38 pages indexed within 48 hours

Key Takeaways

Static export is underrated. For content sites, it's faster and cheaper than SSR
JSON-LD works perfectly with static export. Just bake it in at build time
Incremental improvement works. Ship the first 10 pages, then add more
Footer architecture matters. Every page should be reachable via footer links — we fixed this mid-project

Full site: gakuranguide.wiki

Happy to answer questions about building game wikis with Next.js!

How I Built a Multi-Dimensional Search Engine for East Asian Political Data (And Survived the Fragmentation)

Chen Tao — Sat, 18 Jul 2026 14:52:20 +0000

If you have ever tried to aggregate or analyze geopolitical data from Northeast Asia—specifically Japan and South Korea—you already know the painful truth: the data is heavily siloed, structured inconsistently, and trapped behind deep language barriers.

While working as a current affairs analyst, I grew tired of manually cross-referencing outdated spreadsheets, clunky government PDFs, and fragmented official portals just to find simple statistics (e.g., "How many female lawmakers in the Japanese Diet have served fewer than three terms?").

To solve this, I built East Asia Insights, a free, localized, and multi-dimensional lookup directory for Japanese and South Korean parliamentarians.

Here is a look behind the curtain at the data engineering challenges I faced and how I tackled them.

The Core Challenge: Data Fragmentation & Anti-Scraping Government websites in Japan (The National Diet) and South Korea (The National Assembly) don't offer unified, developer-friendly REST APIs. The data challenges included:

Inconsistent HTML Structures: Legacy server-rendered tables that change classes depending on the political party.

Localized Traps: Dynamic localized scripts that render text based on specific local encodings.

Temporal Decay: Politician profiles, faction realignments, and constituency boundary changes happen constantly, meaning static data decays within months.

The Architecture: From Raw Scrapes to Structured JSON To keep the search engine lightning-fast and up-to-date, I built a lightweight pipeline focused on predictability:

[Target Gov Sites] -> [Python Scrapers (BeautifulSoup/Playwright)] -> [Data Normalization Pipeline] -> [Structured JSON/Markdown Engine] -> [Ghost/Frontend UI]
Step 1: Normalizing the Schema
Every politician, regardless of country, is normalized into a strict, unified data model. Here is a simplified abstraction of our data structure:

JSON
{
"id": "jp_diet_04912",
"name": {
"localized": "高市早苗",
"english": "Sanae Takaichi"
},
"country": "Japan",
"house": "Representatives",
"constituency": "Nara 2nd District",
"gender": "Female",
"tenure_years": 30,
"last_updated": "2026-04"
}
Step 2: Overcoming the Multi-Dimension Filtering Bottleneck
Instead of forcing users to rely on basic keyword search, the frontend engine handles multi-dimensional cross-filtering. Users can instantly filter by:

Constituency/Region

Gender representation

Tenure windows (Years in office)

This instantly turns a tedious research task into a 2-second query.

Key Takeaways for GovTech Projects Building this taught me a few invaluable lessons about dealing with public records:

Expect Schema Drift: Government portals love to redesign without warning. Your scrapers must include robust error-handling and field validation to alert you when a selector breaks.

Localization is More Than Translation: Mapping localized constituencies to standard geographical naming conventions requires a dedicated translation layer, not just generic LLM API calls.

Check Out the Tool (And Share Your Feedback!)
The database is fully updated to the latest 2026 political records and is completely free to use.

👉 Explore the database here: East Asia Insights - Japan & SK Politician Lookup

If you are a data engineer, researcher, or anyone interested in open-source data and GovTech, I would love to hear your thoughts. How do you handle scraping and structures on legacy government websites? Let’s discuss in the comments below!

I built a lightweight Football Manager alternative because I don't have time for heavy games

Chen Tao — Tue, 07 Jul 2026 03:35:36 +0000

Hi guys, I am a web developer from China.

Today I want to show you my side project: 38-0 League. It is a football (soccer) simulation game on web.

I used to play a lot of Football Manager. But now I have a full-time job, I don't have time to play 5 hours just for half season. Sometimes I just have a stupid idea in my head: "What if Arsenal play in La Liga?" or "What if Haaland play in League 2?".

So I write this game. You can custom teams, players, and just click one button. It will simulate 38 matches very fast.

Here is some technical problems I met and how I fix them. Maybe it can help you if you build similar things.

1. Heavy Calculation in Browser

Because I have no money to buy strong backend server, all match simulation runs in user's browser.
Simulating 380 matches (20 teams play each other 2 times) is actually very fast in JS. The slow part is React rendering. At first, when I click "Simulate Season", the page freeze for 2 seconds. This is because I try to put all match logs and events into DOM state at same time.
Solution: I separate the logic and UI. The simulation function just return a big JSON object in memory. React only render the final League Table. The match details are lazy loaded. If you don't click the specific match, it never renders.

2. Cheap Leaderboard using Cloudflare D1

I want a leaderboard so players can compete. But Redis or AWS RDS is too expensive for a free game.
I try Cloudflare D1. It is serverless SQLite on edge. It is amazing!
I write a Cloudflare Worker to receive high score from client, check a simple secret token, and save to D1 database. The latency is very low because the worker runs near the user. And the free tier gives me 100,000 writes per day. Very enough for me.

3. SEO for SPA (Multi-language)

This is my biggest headache. I use Vite + React. Google crawler don't like it.
I want people from Spain or Brazil to find my game, so I need /es and /pt routes. I didn't use Next.js because I don't want to rewrite all my code. So I write a post-build Node script.
After npm run build, the script copy index.html into many folders, and replace the <title> and <meta> tags with correct language text statically. It's a bit dirty hack, but Google Search Console finally start to index my pages!

4. Ads vs PageSpeed

To pay the domain name, I put some Adsterra banners. But these ad scripts destroy my Core Web Vitals. My LCP and TBT become red in Lighthouse.

How I fix: I delay the ad script. I use a simple event listener. Only when user scroll or move mouse, I append the ad `<script>` to document body. So Lighthouse sees a clean page, and real users still see the ads. Win-win.

If you like football, please try it here: 38-0.one
You can try the Sandbox mode to make your own crazy league. Let me know if you find bugs or have ideas! Thanks!

Evolving my React Football Simulator: From getting crushed in 7-0 to the ultimate 8-0 World Cup challenge

Chen Tao — Thu, 25 Jun 2026 08:55:46 +0000

A few days ago, I wrote about building a hardcore football draft simulator in React where the RNG was so punishing that I couldn't even beat my own game using underdog teams.

The feedback was awesome, but I quickly realized the game had limitations. The UI was a bit basic, the performance on mobile had quirks due to third-party scripts, and honestly, the concept needed to be bigger. With the 2026 World Cup on the horizon, I decided to tear down the codebase and rebuild it into something much more ambitious.

Today, I’m launching the evolved version: 8-0.online. Here is exactly what changed under the hood and how I scaled the architecture from a simple draft tool to a multi-mode simulator with a 100/100 Lighthouse score.

1. The Core Shift: From a Single Draft to 4 Game Modes
The original "7-0" version was a simple randomized draft. It was fun, but it got repetitive. For the new 8-0 version, I restructured the state management to support multiple isolated game flows. I introduced 4 entirely new modes, including:

2026 Random XI: Pure chaos. You get what you get.
The Redemption Tournament: A mode with slightly different risk/reward mechanics.
Tech difference: Instead of a monolithic match simulation hook, I had to decouple the simulation logic from the drafting phase, allowing different rulesets to be injected dynamically depending on the selected mode.

2. UI/UX Overhaul: Cinematic Dark Mode & Mobile App Shell
The old version had a standard, functional UI. For 8-0, I wanted a premium, cinematic feel. I completely ripped out the old CSS and implemented a comprehensive Dark Mode across the entire app.

Tech difference: I built a mobile-first App Shell with a cinematic fade-out splash screen. I also had to hunt down and refactor dozens of hardcoded inline styles that were causing contrast issues. The result is a much denser, more immersive UI that actually feels like a high-end gaming dashboard rather than a simple web utility.

3. Hitting 100/100 Lighthouse (Taming Render-Blocking Ads)
One of the biggest headaches in the previous build was mobile web performance, specifically how third-party ad networks (like Adsterra) were destroying my Core Web Vitals.

Tech difference: I implemented a strict lazy-loading strategy for the ad containers. By properly handling the visual whitespace (padding/margin) before the ads load, I eliminated layout shifts (CLS). Combined with ARIA accessibility patches and eliminating render-blocking dependencies, the React SPA now hits a perfect 100/100 on mobile PageSpeed.

4. Taking Multi-lingual SEO to the Next Level (IndexNow)
In my last post, I mentioned using a Node.js post-build script to generate 13 different language static index.html files with hreflang tags. That worked great for structure, but waiting for search engines to crawl all those new 8-0 routes was taking too long.

Tech difference: I didn't want to wait. Instead of manually submitting sitemaps via Bing/Yandex Webmaster UI, I wrote a custom Python automation script to integrate directly with the open IndexNow protocol. Now, whenever I push a new language update or a new game mode, the script pings the API with a custom verification key, forcing instant indexing across major search engines.

Try to beat the RNG (Again)
The game is now fully migrated to its new home at 👉 8-0.online

I still haven't managed to go undefeated in the 2026 Random XI mode with a tier-3 nation. If anyone manages to pull it off, please let me know what tactical setup you used!

Also, I'd love to hear from fellow React devs: how do you typically handle state persistence for multi-step progressive web games without overcomplicating things with Redux?

Building a hardcore football simulator in React (and failing to win my own game)

Chen Tao — Fri, 19 Jun 2026 16:05:51 +0000

I've always found commercial soccer draft games to be a bit too easy and forgiving. You just click some shiny cards and eventually win. So for my recent side project, I decided to build something much more punishing.

The idea was simple: You must win 7 consecutive matches to lift the World Cup, using randomly drafted squads based on real FC 24 player stats.

The Tech Stack

I wanted to keep it lightweight, so I went with pure React + Vite. No heavy state management libraries, just good old React hooks to handle the match simulation logic and RNG purely on the client side.

One of the fun challenges was making it multi-lingual for global football fans. Instead of a backend, I wrote a Node.js post-build script that dynamically generates index.html files with proper hreflang tags for 13 different languages, ensuring it's SEO-friendly out of the box.

The Result

The match simulation turned out to be brutally realistic. I've been trying to win the tournament with the China PR squad, and I keep getting absolutely demolished by France or Brazil in the semi-finals. The RNG has no mercy. 😂

If you want to try the simulation logic (or see if you can break the curse with an underdog nation like China), the game is live here:
👉 7-0 World Cup Draft Simulator

Would love to hear any feedback from fellow React devs on how to better balance client-side RNG for games like this!