> ## Documentation Index
> Fetch the complete documentation index at: https://devperez08-platform-list-anime-54.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Project Structure

> Understanding the EpiNeko project architecture and folder organization

## Overview

EpiNeko follows the Next.js 15 App Router structure with a clean separation of concerns. The project uses TypeScript, React 19, and integrates with Supabase for authentication and data persistence.

## Technology Stack

<CardGroup cols={2}>
  <Card title="Next.js 16" icon="react">
    Modern React framework with App Router
  </Card>

  <Card title="React 19" icon="atom">
    Latest React with Server Components
  </Card>

  <Card title="TypeScript 5" icon="code">
    Type-safe development
  </Card>

  <Card title="Tailwind CSS 4" icon="paintbrush">
    Utility-first styling with DaisyUI
  </Card>
</CardGroup>

## Directory Structure

```
src/
├── app/                    # Next.js App Router pages
│   ├── layout.tsx         # Root layout with metadata
│   ├── page.tsx           # Homepage
│   ├── globals.css        # Global styles
│   ├── icon.png           # App icon
│   ├── anime/
│   │   └── [id]/          # Dynamic anime detail pages
│   ├── library/           # User's anime library
│   ├── login/             # Authentication pages
│   ├── signup/
│   ├── profile/           # User profile
│   ├── settings/          # User settings
│   ├── error/             # Error page
│   └── api/               # API routes
│       └── check-username/
├── components/            # Reusable React components
│   ├── anime/            # Anime-specific components
│   │   ├── AnimeCard.tsx
│   │   ├── AnimeDetailsModal.tsx
│   │   ├── EpisodeList.tsx
│   │   ├── LibraryButton.tsx
│   │   └── SearchBar.tsx
│   └── layout/           # Layout components
│       ├── MainLayout.tsx
│       ├── Navbar.tsx
│       └── Footer.tsx
├── services/             # External API integrations
│   ├── jikan.ts         # Jikan API (MyAnimeList)
│   └── library.ts       # Library management
├── utils/                # Utility functions
│   └── supabase/        # Supabase client utilities
│       ├── client.ts    # Browser client
│       ├── server.ts    # Server client
│       └── middleware.ts # Auth middleware
└── middleware.ts         # Next.js middleware
```

## Key Directories Explained

<Accordion title="app/ - Application Routes">
  The `app` directory contains all pages and layouts following Next.js 15 App Router conventions:

  * **layout.tsx**: Root layout with metadata and font configuration
  * **page.tsx**: Homepage with trending anime
  * **anime/\[id]/**: Dynamic routes for individual anime details
  * **api/**: Server-side API endpoints

  All pages use Server Components by default, with `"use client"` directive for client-side interactivity.
</Accordion>

<Accordion title="components/ - UI Components">
  Organized by feature area:

  * **anime/**: Components specific to anime display and interaction
  * **layout/**: Structural components like Navbar and Footer

  All components are client-side (`"use client"`) for interactivity.
</Accordion>

<Accordion title="services/ - API Integration">
  Service layer for external API calls:

  * **jikan.ts**: Fetches anime data from Jikan API v4 (MyAnimeList)
  * **library.ts**: Manages user library with Supabase

  Services handle data fetching, caching, and error handling.
</Accordion>

<Accordion title="utils/ - Utility Functions">
  Helper functions and configurations:

  * **supabase/**: Three specialized Supabase clients for different contexts
    * `client.ts`: Browser-side authentication
    * `server.ts`: Server-side operations
    * `middleware.ts`: Session management in middleware
</Accordion>

## Next.js Configuration

The project uses custom Next.js configuration in `next.config.ts`:

```typescript next.config.ts theme={null}
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.myanimelist.net',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

export default nextConfig;
```

<Note>
  Remote image patterns are configured to allow MyAnimeList CDN images for anime posters and covers.
</Note>

## TypeScript Configuration

Key compiler options from `tsconfig.json`:

```json theme={null}
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "strict": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

The `@/*` path alias allows clean imports from the `src` directory.

## Middleware

The root `middleware.ts` handles authentication for protected routes:

```typescript src/middleware.ts theme={null}
import { type NextRequest } from 'next/server'
import { updateSession } from '@/utils/supabase/middleware'

export async function middleware(request: NextRequest) {
  return await updateSession(request)
}

export const config = {
  matcher: [
    '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
  ],
}
```

<Warning>
  The matcher excludes static files and images to prevent unnecessary authentication checks on public assets.
</Warning>

## Styling Approach

<Steps>
  <Step title="Tailwind CSS 4">
    Utility-first CSS framework for rapid UI development
  </Step>

  <Step title="DaisyUI Components">
    Pre-built component classes for buttons, cards, and more
  </Step>

  <Step title="Custom Design System">
    Dark theme with zinc colors and primary accent
  </Step>
</Steps>

## Best Practices

<CardGroup cols={2}>
  <Card title="Server Components First" icon="server">
    Use Server Components by default for better performance
  </Card>

  <Card title="Client Components for Interactivity" icon="hand-pointer">
    Add `"use client"` only when needed for state/events
  </Card>

  <Card title="Path Aliases" icon="at">
    Always use `@/` imports for cleaner code
  </Card>

  <Card title="Type Safety" icon="shield">
    Leverage TypeScript interfaces for all data structures
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={3}>
  <Card title="Components" icon="puzzle-piece" href="/development/components">
    Explore React components
  </Card>

  <Card title="Services" icon="cloud" href="/development/services">
    Learn about API services
  </Card>

  <Card title="Deployment" icon="rocket" href="/development/deployment">
    Deploy your instance
  </Card>
</CardGroup>