> ## 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.

# Key Features

> Explore the powerful features that make EpiNeko your perfect anime companion

## Visual Discovery

EpiNeko reimagines how you discover and browse anime with a grid-based layout inspired by JustWatch.

<Card title="Grid-Based Browsing" icon="grid-2">
  Browse anime in beautiful grid layouts with horizontal scrolling categories. Each card displays rich visual information including cover art, titles, and quick stats.
</Card>

### Dynamic Categories

The platform organizes anime into intuitive categories:

* **Currently Airing** - Stay up to date with ongoing series
* **Trending** - Discover what's popular right now
* **Top Rated** - Explore critically acclaimed classics
* **Seasonal** - Browse anime by season and year

<Tip>
  The visual-first approach means you spend less time reading and more time discovering anime that matches your vibe.
</Tip>

## Real-Time Progress Tracking

Track your anime journey with instant updates and comprehensive progress management.

### Library Statuses

<CardGroup cols={2}>
  <Card title="Watching" icon="play" color="#3b82f6">
    Currently following series
  </Card>

  <Card title="Completed" icon="check-circle" color="#10b981">
    Finished anime
  </Card>

  <Card title="Dropped" icon="xmark" color="#ef4444">
    Discontinued series
  </Card>

  <Card title="Plan to Watch" icon="bookmark" color="#f59e0b">
    Your watchlist
  </Card>
</CardGroup>

### Detailed Progress

For each anime in your library, track:

* **Episodes Watched** - Keep count of your progress
* **Personal Score** - Rate from 1-10
* **Status Updates** - Change status with a single click
* **Timestamps** - Automatic tracking of when you added or updated entries

<CodeGroup>
  ```typescript Database Schema theme={null}
  create table public.user_library (
    id uuid default gen_random_uuid() primary key,
    user_id uuid references public.profiles(id) on delete cascade not null,
    anime_id_jikan integer not null,
    title text not null,
    image_url text,
    status public.library_status default 'watching' not null,
    score integer check (score >= 0 and score <= 10),
    episodes_watched integer default 0,
    created_at timestamp with time zone default timezone('utc'::text, now()) not null,
    updated_at timestamp with time zone default timezone('utc'::text, now()) not null,
    unique(user_id, anime_id_jikan)
  );
  ```

  ```typescript Library Status Type theme={null}
  type LibraryStatus = 
    | 'watching'
    | 'completed'
    | 'dropped'
    | 'plan_to_watch';
  ```
</CodeGroup>

## Secure Authentication

Built on Supabase's enterprise-grade authentication system with multiple login options.

### Email Authentication

Traditional email and password authentication with:

* Secure password hashing
* Email verification
* Password recovery
* Account management

### Username Support

Unique feature allowing login with username or email:

<CodeGroup>
  ```typescript Username Login Logic theme={null}
  // From src/app/login/actions.ts
  const identifier = formData.get('identifier') as string
  const password = formData.get('password') as string

  let email = identifier

  // If identifier is not an email, look up the associated email from username
  if (!identifier.includes('@')) {
    const { data: profile } = await supabase
      .from('profiles')
      .select('email')
      .eq('username', identifier)
      .maybeSingle()
    
    if (profile?.email) {
      email = profile.email
    }
  }

  await supabase.auth.signInWithPassword({ email, password })
  ```

  ```typescript Signup with Username theme={null}
  // From src/app/login/actions.ts
  const email = formData.get('email') as string
  const username = formData.get('username') as string
  const finalUsername = username || email.split('@')[0]

  await supabase.auth.signUp({
    email,
    password,
    options: {
      data: {
        full_name: finalUsername,
        username: finalUsername,
      }
    }
  })
  ```
</CodeGroup>

### Profile System

Automatic profile creation on signup with:

* Username (minimum 3 characters)
* Full name
* Avatar URL
* Website
* Public viewability with RLS

<Note>
  Profiles are automatically created via database triggers when a new user signs up, ensuring data consistency.
</Note>

## Responsive Design

Optimized for all devices with Tailwind CSS and DaisyUI components.

### Mobile First

* Touch-optimized interactions
* Responsive grid layouts
* Mobile navigation menu
* Optimized image loading

### Desktop Experience

* Multi-column layouts
* Horizontal scrolling categories
* Keyboard shortcuts
* Enhanced hover states

## Data Integration

### Jikan API v4

EpiNeko uses the Jikan API (unofficial MyAnimeList API) to fetch:

* Anime metadata (titles, descriptions, genres)
* Episode information
* Ratings and popularity
* Images and artwork
* Seasonal data

<Warning>
  Jikan API has rate limits. EpiNeko implements appropriate caching strategies to ensure smooth operation.
</Warning>

### Image Optimization

Next.js Image component with optimized remote patterns:

```typescript next.config.ts theme={null}
const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.myanimelist.net',
        port: '',
        pathname: '/**',
      },
    ],
  },
};
```

## Session Management

Automatic session refresh via middleware ensures users stay authenticated:

<CodeGroup>
  ```typescript Middleware theme={null}
  // From src/middleware.ts
  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)$).*)',
    ],
  }
  ```

  ```typescript Update Session theme={null}
  // From src/utils/supabase/middleware.ts
  export async function updateSession(request: NextRequest) {
    const supabase = createServerClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      { cookies: { /* cookie handlers */ } }
    )
    
    // Refresh the auth token
    await supabase.auth.getUser()
    
    return supabaseResponse
  }
  ```
</CodeGroup>

## Performance Features

<AccordionGroup>
  <Accordion title="Server Components" icon="server">
    React Server Components for optimal performance and reduced JavaScript bundle size
  </Accordion>

  <Accordion title="Automatic Code Splitting" icon="scissors">
    Next.js automatically splits code for faster page loads
  </Accordion>

  <Accordion title="Image Optimization" icon="image">
    Automatic image optimization with Next.js Image component
  </Accordion>

  <Accordion title="Streaming" icon="water">
    Progressive page rendering with React Suspense
  </Accordion>
</AccordionGroup>

## Coming Soon

<Card title="Future Features" icon="rocket">
  * Social features (follow friends, share lists)
  * Advanced filtering and search
  * Recommendation engine
  * Statistics and insights
  * Export/import functionality
</Card>