HOME/PROJECTS/ANI MEDIA ONLINE
Back to all projects
FEATURED BUILD🟢 PRODUCTION ACTIVE

ANI Media Online

The Ultimate Database & Cinematic Anime Discovery Platform.

ANI Media Online
LIVE AT EDGE RUNTIME
Launch Live App
ROLE & SCOPEArchitecture & Lead Dev
PRIMARY RUNTIMENext.js
DATABASE ARCHITECTUREServerless / GraphQL
STATUS100% Shipped ✓

System Overview & Problem Statement

ANI Media Online was built with the vision of providing anime enthusiasts with a visually stunning, app-like experience directly in their browser. Featuring a cinematic "Deep Space Neon" theme and seamless glassmorphism UI, the platform integrates multiple massive anime databases (AniList & Jikan) to deliver real-time data. Beyond just browsing, it empowers users with a robust authentication system to seamlessly save and track their anime journey across all devices without losing any data.

Architecture & Stack Decomposition

frontend
  • Next.js (App Router)
  • React 18
  • Framer Motion
styling
  • Tailwind CSS (v4)
  • Glassmorphism UI
  • Deep Space Neon theme
backend
  • Supabase (PostgreSQL)
  • Supabase Authentication
apis
  • GraphQL (AniList API)
  • REST API (Jikan/MyAnimeList)
deployment
  • Vercel

Engineered Features

Cloud Watchlist System

Secure user authentication allowing users to save, track, and categorize anime (Watching, Completed, Plan to Watch) in their personal library.

Real-time Release Calendar

Automatically fetches and converts airing times of new episodes based on the user's local timezone.

Cinematic UI & Transitions

Utilizes Framer Motion for buttery smooth page transitions and interactive hover effects, optimized for both desktop and mobile.

Advanced Data Aggregation

Combines multiple APIs (GraphQL and REST) to fetch trailers, voice cast, and ratings with blazing fast speed.

Engineering Milestones & Challenges Solved

[1]

API Rate Limit & Performance: Successfully handled strict API rate limits from Jikan by balancing requests between REST and GraphQL endpoints. Implemented Next.js caching and Suspense to ensure instant page loads without overwhelming the external servers.

[2]

Complex Data Hydration: Overcame hydration mismatch issues by effectively separating server-side metadata logic and client-side dynamic states (like Watchlist toggles).

[3]

Cross-Device Fluidity: Built a complex, highly responsive layout with a dedicated Mobile Bottom Navigation system that feels exactly like a native mobile application.

NEXT PROJECT IN QUEUE

Anime Nation India

Anime Nation India is a cross-platform (Web, Android, iOS) anime & manga ecosyst...

Inspect Next Case Study