Animap aggregates data from AniList and MyAnimeList (via Jikan) into a single, unified discovery experience. Search, browse by genre, explore trending titles, and manage a personal watch history — all wrapped in a distinctive retro-terminal CRT aesthetic.

This project intentionally prioritizes the discovery experience — rich metadata, intelligent search, curated visual design — over video streaming.

🚀 Live deployment: Coming soon — configured for Vercel with next-pwa service worker support.

anitube/
├── apps/
│   └── Anitube/                    # Main Next.js 16 application
│       ├── app/                    # App Router pages and layouts
│       │   ├── api/search/         # Search and suggest API route handlers
│       │   ├── anime/[id]/         # Anime detail page (SSR)
│       │   ├── genre/              # Genre index and genre-filtered pages
│       │   ├── search/             # Advanced search page (client-side)
│       │   ├── watch/              # Watch redirect route
│       │   ├── layout.tsx          # Root layout with SEO, fonts, providers
│       │   └── globals.css         # Design system (CSS variables, scanlines)
│       ├── components/
│       │   ├── anime/              # Detail page components (Header, Episodes, Characters)
│       │   ├── home/               # Homepage components (Hero, AnimeCard, Section)
│       │   ├── layout/             # Header and Footer with Framer Motion
│       │   └── player/             # VideoPlayer with keyboard shortcuts
│       ├── lib/
│       │   ├── store/              # Zustand stores (app-store, player-store)
│       │   ├── query/              # React Query provider and client config
│       │   ├── search/             # Client-side search fetch utilities
│       │   └── constants.ts        # Application constants and route definitions
│       ├── e2e/                    # Playwright tests (home, search, layout, anime, nav)
│       └── playwright.config.ts    # E2E test configuration
├── packages/
│   ├── api/                        # @anitube/api — data access layer
│   │   └── src/
│   │       ├── providers/          # AniList (GraphQL) and Jikan (REST) clients
│   │       ├── search/             # Fuzzy search pipeline (normalize, rank, advanced)
│   │       ├── services/           # AnimeService unified facade
│   │       ├── types/              # Canonical and provider-specific type definitions
│   │       └── utils/              # Mappers and pagination helpers
│   ├── ui/                         # @anitube/ui — shared component library
│   ├── eslint-config/              # Shared ESLint configurations
│   └── typescript-config/          # Shared TSConfig base files
├── Dockerfile                      # Multi-stage production build
├── docker-compose.yml              # Container orchestration
├── turbo.json                      # Turborepo pipeline configuration
└── pnpm-workspace.yaml             # Workspace package definitions

flowchart TD
    Browser(["🌐 Browser"])
    SC["Server Components\n(page.tsx, anime/[id]/page.tsx)"] 
    CC["Client Components\n(SearchContent, HeroCarousel)"]
    RQ["TanStack\nReact Query"]
    API["/api/search\nRoute Handler"]
    Cache["unstable_cache\n5min TTL"]
    AS["AnimeService\nFacade"]
    AL["AniList Client\n(GraphQL)"]
    JK["Jikan Client\n(REST + rate limiter)"]

    Browser --> SC
    Browser --> CC
    SC -->|"direct import at request time"| AS
    CC --> RQ --> API --> Cache --> AS
    AS --> AL
    AS --> JK
    AL -->|"graphql-request"| AniListAPI(["graphql.anilist.co"])
    JK -->|"fetch + queue"| JikanAPI(["api.jikan.moe/v4"])

    style AS fill:#6366f1,color:#fff
    style Cache fill:#f59e0b,color:#000
    style AL fill:#02a9ff,color:#fff
    style JK fill:#1d4ed8,color:#fff

flowchart LR
    Q(["User Query"])
    N["1. Normalize\nNFKC + strip punctuation"]
    V["2. Variant Generation\noriginal · stripped · no-spaces"]
    F["3. Fetch Candidates\n3× AniList searches"]
    D["4. Deduplicate\nby AniList ID"]
    R["5. Fuse.js Ranking\nEN 0.35 · romaji 0.30\nnative 0.25 · synonyms 0.20"]
    T["6. Threshold Filter\nscore ≥ 25/100"]
    C["7. Query Correction\nscore ≥ 55 → 'did you mean?'"]
    OUT(["Ranked Results"])

    Q --> N --> V --> F --> D --> R --> T --> C --> OUT

    style Q fill:#10b981,color:#fff
    style OUT fill:#10b981,color:#fff
    style R fill:#6366f1,color:#fff
    style C fill:#f59e0b,color:#000

flowchart LR
    subgraph Zustand Stores
        AS2["AppStore\n─────────────\n• theme\n• watch history\n• favorites\n• continue watching"]
        PS["PlayerStore\n─────────────\n• volume\n• playback rate\n• auto-play"]
    end

    LS[("localStorage")]
    AS2 <-->|"persist middleware\n(partialize)"| LS
    PS <-->|"persist middleware\n(partialize)"| LS

    style AS2 fill:#6366f1,color:#fff
    style PS fill:#8b5cf6,color:#fff
    style LS fill:#374151,color:#fff

This section summarizes the engineering decisions that make this project non-trivial.

• 💪 Strong TypeScript proficiency — strict typing throughout, discriminated unions for provider types, generic utility functions for mappers and pagination, typed GraphQL operations, and a well-defined public API surface with explicit exports.

• 🧠 Non-trivial search algorithm — multi-variant query expansion, fuzzy full-text ranking with weighted fields, relevance scoring, and query correction. This is a custom search pipeline with real information retrieval concepts, not a simple API passthrough.

• 🧱 Clean architectural separation — @anitube/api has zero coupling to React or Next.js. Provider clients, mappers, types, and search logic are independently testable behind a unified service interface.

• 🏭 Production patterns — server-side caching with CDN headers, rate-limiting for the Jikan API, error boundaries with loading/error/not-found states per route, SEO metadata per page, flash-prevention for theme persistence.

• 📦 Monorepo competency — Turborepo task graph with dependsOn, shared TypeScript and ESLint configs, workspace protocol dependencies, Docker with turbo prune --docker.

• 🎨 Cohesive design system — CSS custom properties for theming, Tailwind extensions, reusable animation primitives (.geometric-box, .neon-text, .animate-blink), component-level Framer Motion patterns.

• 🧪 E2E test infrastructure — Playwright tests organized by feature domain (home, search, navigation, anime details, layout) with auto-starting dev server configuration.

• ✅ Code quality enforcement — ESLint flat config, Prettier, Husky pre-commit hooks running lint-staged, TypeScript strict mode across all packages.

• Node.js ≥ 18
• pnpm 9.x (corepack enable to activate)
• Docker (optional, for containerized builds)

# Clone the repository
git clone https://github.com/ArDnath/AniMap.git
cd AniMap

# Install dependencies
pnpm install

# Copy environment variables
cp apps/Anitube/.env.example apps/Anitube/.env.local

# Start all workspace packages in parallel (API + Next.js app)
pnpm dev

The app will be available at http://localhost:3000.

pnpm build

docker compose up --build

pnpm test:e2e    # Playwright E2E tests
pnpm lint        # Lint all packages
pnpm check-types # TypeScript type check
pnpm format      # Prettier format

No API keys required — both AniList and Jikan are public APIs.

Quality-gate configuration files:

• tsconfig.json — strict TypeScript across all packages with shared base configs
• eslint.config.mjs — ESLint 9 flat config with Next.js and React internal presets
• .lintstagedrc.js — runs ESLint fix and Prettier on staged files
• .husky/pre-commit — gates all commits through lint-staged

• Unit and integration tests — Vitest tests for @anitube/api search pipeline, mappers, and service layer
• CI pipeline — GitHub Actions for lint, type-check, build, and Playwright E2E on push/PR
• Accessibility audit — ARIA landmarks, focus management, reduced-motion queries, screen reader testing
• Search suggestions UI — wire /api/search/suggest to a typeahead dropdown in the header
• Infinite scroll — replace pagination with intersection-observer-based infinite loading
• Image optimization — loading="eager" and priority on above-the-fold hero images
• Error monitoring — integrate Sentry for production error tracking
• Analytics — GA and Vercel Analytics (env placeholders already exist)

Contributions are welcome!

# Fork and clone
git clone https://github.com/<your-username>/AniMap.git
cd AniMap

# Create a feature branch
git checkout -b feat/your-feature

# Install and validate
pnpm install
pnpm lint && pnpm check-types && pnpm build

# Commit (Husky runs lint-staged automatically)
git commit -m "feat: description of change"

# Open a Pull Request

This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0). See the LICENSE file for full terms.