One Piece Archive
Character database
- Year
- 2024 — 26
- Built with
- Next.js 14, React 18, TypeScript, Tailwind CSS 3 +2 more ↓
- Links
- Live site ↗Source ↗
(01) Overview
A dossier for the pirates, allies and outlaws of One Piece. Pick a figure from the roster and their record opens: portrait, bounty in berries, status, age, height and blood type.
(02) Features
- 01The recordA featured dossier for the selected figure: portrait, epithet, origin, current bounty and vitals.
- 02The rosterTen figures to a page. Page one is always the Straw Hat crew; from page two it is the whole archive.
- 03SearchLook anyone up by name, and page through the results the same way.
- 04Honest failureIf the upstream API is down or answers with something unexpected, the page says so instead of breaking.
(03) Screens
(04) On a phone
Same app, smaller screen.
Captured from the live site at 390 pixels wide — the width of most phones in a hand.
(05) Stack
Six tools, and the job each one does here.
- FrameworkNext.js14App Router, with a route handler for paging and search
- UIReact18Client-side roster, selection and search
- LanguageTypeScriptType guards check every API response at runtime
- StylingTailwind CSS3Alongside hand-written dossier styles
- ServicesOne Piece APICharacters, bounties and portraits
- HostingVercelProduction hosting
(06) Under the hood
- 01
The first page is rendered on the server, so the Straw Hats are in the HTML before any JavaScript runs.
- 02
The crew page is assembled from ten searches run in parallel, matched by name and de-duplicated by id.
- 03
Later pages and searches go through a route handler that validates the page number and the query before calling upstream, cached for sixty seconds.
- 04
The API is third-party, so its shape is never assumed: every record passes a type guard before it is rendered, and loading and results are announced to screen readers.
Next case
Twitter Clone
