ani-client-web

A modern anime & manga discovery website built with Next.js 16 and powered by ani-client — a simple, typed client for the AniList GraphQL API.

Features

• Trending & Top Rated — Browse trending and highest-rated anime/manga with tabbed navigation
• Infinite Scroll — Seamless lazy-loading grids for anime, manga, characters, staff, and studios
• Live Search — Autocomplete search in the navbar with instant AniList results
• Detail Pages — Rich anime/manga detail views with synopsis, stats, genres, studios, characters, streaming links, score distribution, and tags
• Character Browser — Explore popular characters with favorites count and media appearances
• Staff Browser — Discover voice actors, directors, and other staff with career info
• Studio Browser — Browse animation studios and their productions with clickable staff links
• Airing Schedule — See currently airing anime with countdown timers and calendar view
• Recommendations — Get random anime/manga recommendations based on AniList data
• Compare — Side-by-side comparison of up to 4 anime/manga titles
• Stats Dashboard — Genre popularity, studio rankings, format distribution, and score analytics
• Genre Filtering — Browse by genre (Action, Romance, Fantasy, Sci-Fi, Comedy, Horror…)
• Recently Viewed — Track and revisit recently viewed titles (client-side, no account needed)
• Dark / Light Theme — System-aware theme toggle with localStorage persistence
• Responsive Design — Mobile-first layout with hamburger menu navigation
• ISR — Incremental Static Regeneration (15 min revalidation) for fast page loads
• Rate Limiting — API proxy with 60 req/min per IP rate limiting
• Skeleton Loading — Per-route loading.tsx files with skeleton UI
• Error Boundaries — Granular error handling per detail page with retry capability
• SEO — Dynamic metadata, Open Graph, Twitter cards, robots.txt, and sitemap.xml
• Accessibility — ARIA tablist/combobox roles, keyboard navigation, semantic HTML

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack)
UI	React 19
Styling	Tailwind CSS v4
Data	ani-client — AniList GraphQL wrapper
Language	TypeScript 5
Testing	Vitest
Analytics	Vercel Analytics + Speed Insights

Getting Started

Prerequisites

• Node.js 20+
• pnpm (recommended)

Installation

git clone https://github.com/gonzyui/ani-client-web.git
cd ani-client-web
pnpm install

Development

pnpm dev

Open http://localhost:3000 in your browser.

Production Build

pnpm build
pnpm start

Tests

pnpm test          # single run
pnpm test:watch    # watch mode

Powered By

This project is built on top of ani-client — a simple and typed client to fetch anime, manga, characters and user data from AniList. All data displayed on this website comes from the AniList API through ani-client.

pnpm add ani-client

import { AniClient, MediaType } from "ani-client";

const client = new AniClient();
const trending = await client.getTrending(MediaType.ANIME, 1, 20);

License

This project is open source. See the LICENSE file for details.