DEV Community: xiazai77

Building a Game Wiki: Heartopia.live Tech Stack

xiazai77 — Mon, 13 Apr 2026 12:26:23 +0000

I built a game wiki for Heartopia — a cozy life sim that blew up earlier this year — and wanted to share the tech decisions behind it. Not because the stack is groundbreaking, but because building a game wiki has constraints that don't apply to typical web projects, and the choices I made were driven by those constraints.

The site is Heartopia.live. It covers codes, recipes, characters, an interactive world map, collection tracking, and event guides across 8 languages. Here's what powers it and why.

Why Static Export

The single most important decision: Next.js with static export (output: 'export'). No server. No serverless functions. Just HTML, CSS, and JS files deployed to a CDN.

Why? Game wikis have a specific traffic pattern. When a new update drops or an event starts, traffic spikes hard — sometimes 10x normal volume — for 48 hours, then drops back down. A server-based setup means either paying for capacity you don't need 95% of the time, or scrambling to scale during spikes.

Static files on a CDN handle traffic spikes for free. Cloudflare Pages serves the whole site. Zero cold starts, zero scaling concerns, near-zero cost. The trade-off is no server-side logic, but for a wiki that's mostly read-heavy content, it's the right call.

// next.config.js
const nextConfig = {
  output: process.env.NODE_ENV === 'production' ? 'export' : undefined,
  trailingSlash: true,
  images: { unoptimized: true },
}

The trailingSlash: true is for clean URLs on static hosting. images.unoptimized because Next.js image optimization requires a server — with static export you handle images yourself.

One nuance: I only enable output: 'export' in production. During development, keeping it dynamic means proper 404 handling and HMR work normally. Caught this the hard way after wondering why dev mode was broken.

Next.js 14 + React 18

Nothing fancy here. App Router, TypeScript, standard file-based routing. The [lang] dynamic segment handles i18n:

src/app/[lang]/codes/page.tsx
src/app/[lang]/recipes/page.tsx
src/app/[lang]/world-map/page.tsx

Each page gets the language from the URL parameter and loads the corresponding translation file. No i18n library — just JSON files and a getDictionary() function. For a site with mostly static content, this is simpler than setting up next-intl or similar.

8 Languages Without an i18n Library

The site supports English, Chinese, Thai, Portuguese, Indonesian, Spanish, French, and German. I went back and forth on whether to use an i18n framework and decided against it.

The approach: one JSON file per language, loaded at build time. Each page calls getDictionary(lang) which returns the typed translation object. TypeScript catches missing keys at compile time.

// Simplified version
const dictionaries = {
  en: () => import('./locales/en.json'),
  zh: () => import('./locales/zh.json'),
  th: () => import('./locales/th.json'),
  // ...
}

export const getDictionary = async (lang: string) =>
  dictionaries[lang]()

For translation itself, I use LLM translation directly — no scripts, no regex replacement. Read the source file, translate the full content, write the target file. It's more accurate than automated pipelines for game-specific terminology.

The rule I enforce: no hardcoded language checks anywhere in components. No lang === 'en' ? 'Save' : '保存'. Every UI string comes from the dictionary. This makes adding a new language a matter of adding one JSON file instead of touching every component.

Data Architecture

Game wiki data changes on a different cadence than the site code. New codes drop daily. Recipes and characters change with game updates. Event content is seasonal.

I keep game data in separate JSON/TS files in a data/ directory, not in a CMS or database. For a statically exported site, this means data changes require a rebuild, but the build takes under 30 seconds so it's fine. A GitHub push triggers a Cloudflare Pages build automatically.

src/lib/data.ts          // Data loading utilities
src/data/codes.json      // Gift codes (updated frequently)
src/data/recipes.json    // Cooking recipes
src/data/characters.json // NPC data
src/data/fish.json       // Fish collection

The alternative was a headless CMS, but for a solo-maintained wiki where I'm the only editor, JSON files in a repo are faster to update than any CMS dashboard.

Interactive World Map

The world map page is the most complex component. Players use it to find fish spawns, bug locations, forageable items, and more. It needs to be filterable, zoomable, and fast.

I went with a custom implementation using CSS transforms for pan/zoom rather than pulling in Leaflet or MapLibre. The game map is a single large image (not tiles), so a full mapping library would be overkill. Custom markers are positioned with percentage-based coordinates relative to the map image.

The filter system lets users toggle categories on and off — show only fish, show only bugs, etc. State is managed with React useState, no external state library needed.

Collection Tracker

The tracker lets players check off items they've found across 7 categories (fish, bugs, birds, crops, flowers, forageables, wild animals). Progress is saved to localStorage.

Simple but effective. No auth required, no server storage, works offline. The main UX challenge was making 200+ checkboxes across 7 tabs not feel overwhelming — solved with search, category filters, and a progress bar per category.

Styling

Tailwind CSS. No component library. For a content-heavy wiki, custom styling is faster than fighting a component library's opinions about how things should look. Tailwind's utility classes make responsive design straightforward, and the built-in dark mode toggle was trivial to implement.

Deployment

Cloudflare Pages. Push to main → automatic build → deploy to global CDN. SSL, custom domain, and edge caching are all handled automatically. Cost: $0 on the free tier, which handles the traffic levels a game wiki gets.

The deploy pipeline:

git push origin main
→ Cloudflare Pages detects push
→ Runs `npm run build` (Next.js static export)
→ Deploys /out directory to CDN
→ Live in ~60 seconds

SEO Considerations

Game wikis live and die by search traffic. A few things that matter:

Trailing slashes and consistent URLs. Pick one format and stick with it. trailingSlash: true in Next.js config ensures every URL ends with /.

Proper hreflang tags. With 8 languages, search engines need to know which version to show which users. Each page generates <link rel="alternate" hreflang="xx"> tags for all language variants.

Dynamic meta tags. Every page has unique title and description pulled from the translation files. No hardcoded English meta tags on non-English pages.

Sitemap generation. src/app/sitemap.ts generates a sitemap with all pages across all languages. This is critical for getting non-English pages indexed.

What I'd Do Differently

Start with fewer languages. I launched with 8 and maintaining translations across all of them for every content update is time-consuming. Starting with 2-3 and adding more based on actual traffic data would have been smarter.

Add search earlier. A wiki without search is frustrating once it passes ~20 pages. I added it later and it immediately became one of the most-used features.

Track data freshness. Codes expire, events end, game mechanics change. I don't have a great system for flagging stale content yet. Something like a lastVerified date per data entry would help.

Numbers

The whole thing runs on: Next.js 14, React 18, TypeScript, Tailwind CSS, Cloudflare Pages. No database, no CMS, no auth, no server. Build time under 30 seconds. Monthly hosting cost: $0.

For a game wiki that needs to be fast, handle traffic spikes, support multiple languages, and be easy to update solo — this stack does the job. Nothing clever, nothing trendy. Just the right tool for each specific constraint.

I Built 41 Free Browser-Based Developer Tools — Everything Runs Client-Side

xiazai77 — Wed, 11 Mar 2026 15:11:29 +0000

Last year I got frustrated.

I was debugging a JWT at 2am (classic), and the first three "free JWT decoders" I found all wanted me to create an account. The fourth one worked but pasted my token into some analytics endpoint — I spotted it in DevTools. Cool. Love that for me.

So I built my own. And then I kept going.

41 tools later, here's PureKit — a collection of browser-based developer tools where your data literally never leaves your machine.

Why I Built This

Here's my problem with most online dev tools:

"Free" with an asterisk. Free until you hit a daily limit, need to remove a watermark, or want to process more than one file.
Uploading sensitive data to random servers. I've seen JWT decoders that send your token to their backend. PDF tools that upload your documents to process them "in the cloud." No thanks.
Account walls everywhere. I just want to format some JSON. I don't need a relationship with your product.

I wanted tools that are actually free, actually private, and just work when you open them.

The Tech

The whole thing is built with Next.js and deployed on Cloudflare Pages.

The core principle: everything happens in the browser. No file uploads to servers, no API calls with your data. When you paste JSON, it gets formatted in your browser tab. When you compress an image, the Canvas API and Web Workers handle it locally. Your files never touch my servers because there's nothing on my servers to touch them.

Some specific tech decisions that might be useful if you're building something similar:

PDF processing was the trickiest part. I'm using pdf-lib and pdf.js (Mozilla's library) running entirely client-side. Getting PDF merge to work without a backend took some wrestling — especially handling encrypted PDFs and different PDF versions. The gotcha: pdf-lib can't render PDFs, and pdf.js can't modify them, so you end up using both and bridging between their different document models. Not fun, but it works.

Image compression uses the Canvas API to re-encode images. The trick is drawing the image to a canvas element and then exporting it with a lower quality setting via canvas.toBlob(). For format conversion (say, PNG to WebP), same idea — draw to canvas, export as the target format. Web Workers keep the UI from freezing when you're processing large batches.

Code formatting (JSON, SQL, HTML, CSS, JS, XML) — I tried writing my own parser for JSON formatting at first. Don't do that. Just use Prettier for the code formatters and a proper SQL parser for SQL. I wasted two weekends on edge cases before I gave up and used battle-tested libraries. Sometimes the boring answer is the right one.

Some Tools Worth Checking Out

Here are the ones I use most myself:

🔍 JWT Decoder

Paste a JWT, instantly see the header, payload, and signature. No server call — it's just base64 decoding in JavaScript. I built this one first because the existing options kept making me nervous about where my tokens were going.

→ purekit.dev/en/jwt-decoder

📝 JSON Formatter

Formats, validates, and lets you explore JSON with collapsible tree view. Handles big payloads without choking — I tested it with 50MB JSON files during development (my browser was less happy about that, but it worked).

→ purekit.dev/en/json-formatter

📄 PDF Merge / Split / Compress

This is the set I'm most proud of. Merge multiple PDFs, split pages out, or compress file size — all in the browser. Most "free" PDF tools either upload your files or limit you to 3 operations per day. These have no limits because there's no server cost per operation.

→ purekit.dev/en/pdf-merge

🖼️ Image Compressor & Format Converter

Drop images in, get smaller files out. Supports JPEG, PNG, WebP. You can batch process multiple images and adjust quality. The format converter lets you go between formats — handy when you need WebP for the web but your designer gave you PNGs.

→ purekit.dev/en/image-compressor

⏰ Cron Expression Builder

This one saves me every time I set up a scheduled job. Visual builder where you click what you want (every Monday at 9am, every 5 minutes, etc.) and it generates the cron expression. Also works in reverse — paste a cron expression and it tells you in plain English what it does.

→ purekit.dev/en/cron-expression-builder

🔤 Regex Tester

Write regex, paste test strings, see matches highlighted in real time. Shows capture groups and explains what each part of your regex does. I know regex101 exists — I just wanted one that doesn't phone home with my test data.

→ purekit.dev/en/regex-tester

🎲 Mock Data Generator

Generates fake JSON data based on a schema you define. Names, emails, addresses, dates, custom patterns. Useful when you need to seed a database or test an API but don't want to write a script for it.

→ purekit.dev/en/mock-data-generator

The Full List

Beyond those, there's a bunch more:

Formatters: JSON, SQL, HTML, CSS, JavaScript, XML
Encoders: Base64, URL encode/decode
Generators: UUID, Hash (MD5/SHA), Password, Lorem Ipsum, QR Code, Favicon, Placeholder Images
Converters: Unix Timestamp, Color (HEX/RGB/HSL), YAML↔JSON↔TOML, JSON→CSV, Markdown↔HTML, HTML↔Markdown, Number Base, Image Format, Image→Base64, Image→PDF, PDF→Image, SVG→PNG
Text Tools: Case Converter, Word Counter, Diff Checker
Data Tools: CSV Cleaner, Mock Data Generator
PDF Tools: Merge, Split, Compress
Encoders: HTML Entity Encoder/Decoder

41 tools and counting. I add new ones when I find myself googling "free online [thing]" for the third time.

On Privacy

I want to be straightforward about this: your data stays in your browser. Period.

There's no analytics tracking what you paste into the tools. There's no "we may share anonymized data" clause. The tools literally can't see your data because the processing happens in JavaScript on your machine.

I built this the way I'd want a tool to work if I were the one pasting production JWT tokens or company documents into it. If I wouldn't trust a tool with my own data, I'm not going to ask anyone else to.

What's Next

I'm going to keep building more tools as I run into problems that need them. Some things I'm thinking about:

API request tester (like a lightweight Postman in the browser)
JSON schema validator
SVG optimizer
More code formatters (YAML, Markdown, etc.)

If there's a tool you wish existed as a simple browser-based utility, I'd genuinely like to hear about it. Drop a comment or hit me up.

The whole thing is free and will stay free. No premium tier coming. No "upgrade to unlock" nonsense. Just tools.

Check it out: purekit.dev

Thanks for reading. If you found this useful, a bookmark or a share goes a long way for a solo project like this. Happy coding.