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.

Grid-Based Browsing

Browse anime in beautiful grid layouts with horizontal scrolling categories. Each card displays rich visual information including cover art, titles, and quick stats.

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

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

Real-Time Progress Tracking

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

Library Statuses

Watching

Currently following series

Completed

Finished anime

Dropped

Discontinued series

Plan to Watch

Your watchlist

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

Database Schema

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)
);

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:

Username Login Logic

// 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 })

Profile System

Automatic profile creation on signup with:

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

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

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

Jikan API has rate limits. EpiNeko implements appropriate caching strategies to ensure smooth operation.

Image Optimization

Next.js Image component with optimized remote patterns:

next.config.ts

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

Session Management

Automatic session refresh via middleware ensures users stay authenticated:

Middleware

// 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)$).*)',
  ],
}

Performance Features

Server Components

React Server Components for optimal performance and reduced JavaScript bundle size

Automatic Code Splitting

Next.js automatically splits code for faster page loads

Image Optimization

Automatic image optimization with Next.js Image component

Streaming

Progressive page rendering with React Suspense

Coming Soon

Future Features

• Social features (follow friends, share lists)
• Advanced filtering and search
• Recommendation engine
• Statistics and insights
• Export/import functionality