Overview
A wiki for the Frieren TCG, and my first project with React and Next.js. It covers the game in detail: its cards and characters, its mechanics, strategies and more.
What's in it
- Characters and cards: 17 characters and their cards, each with its own page. The game data is written as typed TypeScript modules, so a missing or misnamed field fails the build instead of showing up on the site.
- Mechanics: an explainer for each game mechanic, such as Graze, Empower and Chain Attack, with an overview, the exact rules and worked examples.
- Damage calculator: pick two characters and their moves, and the calculator logs each turn's damage (
max(1, move + attack − defense)) so you can play out a matchup before trying it. - Strategies, decks, news and tournaments: deck lists, per-character strategy guides, and news posts tagged as patch, balance, tournament, community or feature.
Community contributions
The wiki is meant to grow with the community, without letting anyone publish straight to it:
- Players sign in with Discord (NextAuth with a Prisma adapter).
- They submit a mechanic, a news post or a strategy guide through forms validated with Zod, both in the browser and in the API route. Unauthenticated requests are rejected.
- Submissions are saved to PostgreSQL as unpublished.
- Users with the admin role review them in an admin dashboard and approve or reject each one.
Contributors can also go back and edit their own submissions.
Built with
Next.js App Router with React and TypeScript, Tailwind CSS with Radix UI primitives, Prisma on PostgreSQL, and MDX for long-form content. It's hosted on Vercel.