Tech Stack - AniDojo

Overview

AniDojo is built with modern, production-ready technologies chosen for performance, developer experience, and scalability.

Core Framework

Next.js 15

Version

^16.0.0 (using Turbopack)

Features Used

App Router, Server Components, Image Optimization, TypeScript

Key Features:

App Router: File-based routing with /app directory
Server Components: Default server-side rendering for better performance
Turbopack: Next-generation bundler for faster builds
Image Optimization: Automatic image optimization with next/image
API Routes: Built-in API endpoints (future use)

Configuration: next.config.ts

images: {
  remotePatterns: [
    { protocol: 'https', hostname: 'cdn.myanimelist.net' },
    { protocol: 'https', hostname: '*.supabase.co' }
  ]
}

React 19.1.0

Latest React version with concurrent features and improved performance

Features Used:

Concurrent rendering
Automatic batching
Server Components (with Next.js)
React Hooks (useState, useEffect, useContext, custom hooks)
Context API for state management

Dependencies:

react: 19.1.0
react-dom: 19.1.0
@types/react: ^19
@types/react-dom: ^19

Backend & Database

Supabase

Authentication

JWT-based auth with session management

Database

PostgreSQL with Row Level Security

Storage

Object storage for user avatars

Packages:

@supabase/supabase-js: ^2.78.0 - Main JavaScript client
@supabase/ssr: ^0.7.0 - Server-side rendering utilities

Database Schema:

profiles - User profile information
anime_entries - User’s anime list entries
reviews - User anime reviews
review_votes - Helpful votes on reviews
comments - Comments on reviews
comment_votes - Upvotes/downvotes on comments
custom_lists - User-created custom lists
custom_list_entries - Anime entries in custom lists

Key Features:

Row Level Security (RLS) policies for data protection
Real-time subscriptions (future feature)
Automatic timestamp management
Database triggers for profile creation

External APIs

Jikan API (MyAnimeList)

What is Jikan?

Jikan is an unofficial MyAnimeList API that provides access to anime data, ratings, and metadata. It’s free and doesn’t require authentication.

Version: v4 Base URL: https://api.jikan.moe/v4/ Endpoints Used:

/anime?q={query} - Search anime
/anime/{id} - Get anime details
/top/anime - Get top-rated anime
/seasons/now - Get current season anime
/seasons/{year}/{season} - Get seasonal anime

Implementation: src/lib/animeApi.ts Features:

Custom rate limiter (3 requests/second)
Automatic retry with exponential backoff
5-minute response caching
Queue-based request management

Styling & UI

Tailwind CSS 4

Package: tailwindcss: ^4 Custom Theme Configuration:

Color Palette - Manga/Editorial Theme

colors: {
  ink: { DEFAULT: '#0a0a0a', light: '#141414', lighter: '#1a1a1a' },
  cream: { DEFAULT: '#f5f0e8', muted: '#c9c4bc', dark: '#8a8580' },
  crimson: { DEFAULT: '#B91C1C', bright: '#DC2626', dark: '#7F1D1D' },
  jade: { DEFAULT: '#059669', bright: '#10B981', dark: '#064E3B' },
  gold: { DEFAULT: '#D97706', bright: '#F59E0B' }
}

Custom Animations

slide-up / slide-down - Smooth entry/exit animations
fade-in - Fade in effect
ink-spread - Manga-inspired spread effect
pulse-slow - Slow pulsing animation

Typography

Custom display font sizes with letter spacing:

display-xl - 4rem with 0.05em spacing
display-lg - 3rem with 0.05em spacing
display-md - 2rem with 0.05em spacing
display-sm - 1.5rem with 0.05em spacing

PostCSS Plugins:

@tailwindcss/postcss: ^4
postcss-custom-properties: ^14.0.6
postcss-nesting: ^13.0.2

Lucide React Icons

Package: lucide-react: ^0.544.0 Usage: Modern, consistent icon set used throughout the application

import { Search, Heart, Star, User } from 'lucide-react'

State Management

Zustand

Package: zustand: ^5.0.8 Purpose: Lightweight state management for client-side state

Currently prepared for future features like global UI state, shopping cart-style anime list management, etc.

React Context API

Used for:

AuthContext - User authentication state
ThemeContext - Dark/light theme toggle

Benefits:

Built into React (no extra bundle size)
Perfect for app-wide state
Easy to integrate with hooks

Form Handling & Validation

React Hook Form

Package: react-hook-form: ^7.63.0 Features:

Performant, flexible form handling
Minimal re-renders
Easy integration with validation libraries
Used in sign-in, sign-up, and review forms

Zod

Package: zod: ^4.1.11 Purpose: TypeScript-first schema validation Used for:

Form validation
API response validation
Type-safe data parsing

const signUpSchema = z.object({
  username: z.string().min(3),
  email: z.string().email(),
  password: z.string().min(8)
})

Utility Libraries

Class Variance Authority (CVA)

Package: class-variance-authority: ^0.7.1 Purpose: Create variant-based component styles

const button = cva('btn', {
  variants: {
    intent: { primary: 'bg-crimson', secondary: 'bg-jade' },
    size: { sm: 'text-sm', lg: 'text-lg' }
  }
})

clsx

Package: clsx: ^2.1.1 Purpose: Conditional className construction

tailwind-merge

Package: tailwind-merge: ^3.3.1 Purpose: Merge Tailwind classes intelligently (prevents conflicts)

Axios

Package: axios: ^1.12.2 Purpose: HTTP client for API requests

Currently using native fetch for most API calls. Axios available for advanced use cases.

Data Visualization

Recharts

Package: recharts: ^3.2.1 Purpose: Charts and graphs for user statistics Planned Usage:

Watch time statistics
Genre distribution charts
Rating history graphs
Seasonal anime trends

Development Tools

TypeScript 5

Package: typescript: ^5 Configuration: tsconfig.json Features:

Strict type checking
Path aliases (@/ for src/)
Type-safe API responses
Interface-driven development

ESLint

Packages:

eslint: ^9
eslint-config-next: 15.5.4
@eslint/eslintrc: ^3

Purpose: Code linting and quality checks Configuration: .eslintrc.json

Package Manager & Build Tools

Build Configuration

Scripts:

{
  "dev": "next dev --turbopack",
  "build": "next build --turbopack",
  "start": "next start",
  "lint": "eslint"
}

Turbopack

Next.js 15’s built-in bundler:

Faster builds than Webpack
Incremental compilation
Optimized for development

Node.js Requirements

Node Version

^20 (Node.js 20 or higher)

Package Managers

npm, yarn, pnpm, or bun

Version Summary

Production Dependencies

Package	Version	Purpose
next	^16.0.0	Framework
react	19.1.0	UI Library
react-dom	19.1.0	React DOM
@supabase/supabase-js	^2.78.0	Backend Client
@supabase/ssr	^0.7.0	SSR Utilities
axios	^1.12.2	HTTP Client
class-variance-authority	^0.7.1	Variant Styles
clsx	^2.1.1	Class Names
lucide-react	^0.544.0	Icons
react-hook-form	^7.63.0	Forms
recharts	^3.2.1	Charts
tailwind-merge	^3.3.1	Tailwind Utils
zod	^4.1.11	Validation
zustand	^5.0.8	State Management

Development Dependencies

Package	Version	Purpose
typescript	^5	Type System
@types/node	^20	Node Types
@types/react	^19	React Types
@types/react-dom	^19	React DOM Types
eslint	^9	Linting
eslint-config-next	15.5.4	Next.js ESLint
tailwindcss	^4	CSS Framework
@tailwindcss/postcss	^4	PostCSS Plugin
postcss-custom-properties	^14.0.6	CSS Variables
postcss-nesting	^13.0.2	CSS Nesting
tw-animate-css	^1.4.0	Tailwind Animations

Technology Decisions

Why Next.js?

Server-side rendering for better SEO
Built-in routing and API routes
Excellent TypeScript support
Great developer experience
Production-ready out of the box

Why Supabase?

PostgreSQL database with excellent TypeScript support
Built-in authentication (no need for separate auth service)
Row Level Security for data protection
Real-time capabilities
Free tier suitable for development and small-scale production

Why Tailwind CSS?

Utility-first approach speeds up development
Highly customizable design system
Small production bundle (unused classes purged)
Great documentation and community
Integrates perfectly with React

Why Jikan API?

Free and no authentication required
Comprehensive anime data from MyAnimeList
Well-documented and maintained
Large community usage

Architecture

System design and data flow patterns

Project Structure

Folder organization and file structure

Architecture

Deployment

Contributing

​Overview

​Core Framework

​Next.js 15

Version

Features Used

​React 19.1.0

​Backend & Database

​Supabase

Authentication

Database

Storage

​External APIs

​Jikan API (MyAnimeList)

​Styling & UI

​Tailwind CSS 4

​Lucide React Icons

​State Management

​Zustand

​React Context API

​Form Handling & Validation

​React Hook Form

​Zod

​Utility Libraries

​Class Variance Authority (CVA)

​clsx

​tailwind-merge

​Axios

​Data Visualization

​Recharts

​Development Tools

​TypeScript 5

​ESLint

​Package Manager & Build Tools

​Build Configuration

​Turbopack

​Node.js Requirements

Node Version

Package Managers

​Version Summary

​Technology Decisions

​Why Next.js?

​Why Supabase?

​Why Tailwind CSS?

​Why Jikan API?

​Related Documentation

Architecture

Project Structure

Build docs developers (and LLMs) love

Overview

Core Framework

Next.js 15

React 19.1.0

Backend & Database

Supabase

External APIs

Jikan API (MyAnimeList)

Styling & UI

Tailwind CSS 4

Lucide React Icons

State Management

Zustand

React Context API

Form Handling & Validation

React Hook Form

Zod

Utility Libraries

Class Variance Authority (CVA)

clsx

tailwind-merge

Axios

Data Visualization

Recharts

Development Tools

TypeScript 5

ESLint

Package Manager & Build Tools

Build Configuration

Turbopack

Node.js Requirements

Version Summary

Technology Decisions

Why Next.js?

Why Supabase?

Why Tailwind CSS?

Why Jikan API?

Related Documentation