About Sumi 墨
Sumi (Japanese for ink) is a calm, editorial way to discover anime — browse what's airing, see what's trending, search the full catalog, and check the week's schedule. It's a portfolio and learning project, built to feel like a film/editorial site rather than a generic dashboard.
How it works
Browse and detail pages read live from the AniList GraphQL API through a single server-side client that handles rate limiting (request spacing + 429 backoff) and caches responses, so AniList is never called from the browser. Search is different: because AniList only matches whole words, titles are indexed in Supabase Postgres with a trigram index for fast partial and fuzzy matching. The index is populated from an openly-licensed dataset (refreshed manually when needed), plus a weekly top-up of missing recent titles from AniList (bounded — not a bulk catalog mirror). If search still misses a title, hybrid search queries AniList live.
Performance notes
Sumi runs on Vercel's serverless platform. After a period of no traffic, the first request can hit a cold start — the function spins up and fetches fresh AniList data, so that initial load may take a second or two. Once warm, navigation is fast: pages stream a skeleton immediately, links are prefetched on hover, and AniList responses are cached, so repeat visits feel instant.
Stack
- Framework
- Next.js (App Router) + TypeScript
- Styling
- Tailwind CSS v4 — warm-dark editorial theme
- Data
- AniList GraphQL API (typed via graphql-codegen)
- Search
- Supabase Postgres + pg_trgm trigram index
- Client state
- TanStack Query (search + infinite browse)
- Hosting
- Vercel
Credits
- Anime data from AniList. Sumi is an unofficial, non-commercial project and isn't affiliated with AniList.
- Search index built from anime-offline-database (Open Database License, ODbL 1.0).
Source
The code is on GitHub. Tracking, a richer calendar, and stats are planned for later phases.