Overview
Kaizen is a place to browse anime and manga: the season's 24 most-watched shows on one page, the 24 highest-rated manga on the other. Each page opens on a spotlight of banner art, then a top-ten shelf, then the full list, filterable by genre. Any title opens a detail sheet with its score, audience, studio or authors, length, status, other names, and synopsis.
First built in 2023, it was rebuilt from the ground up in 2026: a new data source, a new design, TypeScript throughout, and an end-to-end test suite.
The hard part
The original version fetched from the Jikan API in the browser, so every visitor spent the API's rate limit, and when Jikan went down the site went down with it. The rebuild moves all data to the server with AniList's GraphQL API: one query per page, built ahead of time and refreshed daily, so visitors never wait on the API and never touch its limits. A failed refresh throws instead of rendering an empty page, which keeps the last good version live until the source recovers.
Highlights
- One query, exactly the fields used. GraphQL fetches every title's covers, banner, scores, studios or authors, and synopsis in a single request, mapped into the app's own types so the interface never depends on the API's shape.
- A spotlight that respects the reader. Autoplay runs on a CSS animation that pauses on hover or focus, steps by keyboard and swipe, and never starts with reduced motion turned on.
- An accessible detail sheet, built on the native dialog element: it traps focus, closes on Escape or the backdrop, and hands focus back to the title that opened it.
- Lighter than before. The rebuild drops the carousel, smooth-scroll, and icon libraries, and moves from Next.js 13 and JavaScript to Next.js 16, React 19, TypeScript, and Tailwind CSS 4.
- 29 end-to-end tests with Playwright, in desktop Chrome and on an iPhone in WebKit, run against a production build on recorded API responses so they are fast and deterministic.