WatchAnime

A modern, responsive anime discovery and streaming information platform built with Next.js 16, Tailwind CSS 4, and shadcn/ui. This application features a premium glassmorphic UI, real-time search capabilities, and deep integration with the Kitsu API to provide a comprehensive anime database experience.

🌟 Features

🎨 Modern UI/UX

• Glassmorphic Aesthetic: Sleek, dark-themed design focusing on depth, transparency, and smooth animations.
• shadcn/ui Integration: Built with robust, accessible components (Select, Skeleton, Cards, etc.).
• Responsive Design: Fully optimized for mobile, tablet, and desktop devices.

🔍 Discovery & Content

• Browse Categories: Trending, Most Popular, Top Rated, and Upcoming anime series.
• Advanced Search: Real-time filtering by status, age rating, season, year, and sorting options.
• Franchise Tracking: Visualize the entire series timeline, including sequels, prequels, and spin-offs.

📄 Comprehensive Details

• Deep Information: Synopsis, ratings, rankings, and production studio highlights.
• Character & Voice Actors: Detailed character cards featuring Japanese voice actors (Seiyuu).
• Community Reviews: Read user reviews with spoiler protection and markdown formatting.
• Memorable Quotes: Curated list of iconic lines from the series.
• Streaming Links: Direct links to official streaming platforms (Crunchyroll, Netflix, Hulu, etc.).

📺 Watch Experience

• Custom Player: A custom-built player with a simulated playback engine — play/pause, ±10s seek, previous/next episode, a hover-expand volume slider, playback-speed and subtitle menus, and custom fullscreen.
• Playback Options: Toggle autoplay, auto-play next, skip intro, loop, and a "lights off" theater mode.
• Episode Browser: Compact episode list with list / numbers / grid views, search, and a season picker for multi-season shows.
• Mobile Optimized: Enhanced controls and layout for viewing on smaller screens.

🛠 Tech Stack

• Framework: Next.js 16 (App Router)
• Language: JavaScript / React 19
• Styling: Tailwind CSS 4 & shadcn/ui
• Icons: Lucide React
• Data Fetching: Native Fetch via a shared service layer (lib/anime-service) and a useApi hook, plus SWR — with server-side dedup and chunking
• API: Kitsu API & Jikan API (Fallback)
• Utilities: query-string, tailwind-merge, clsx

🚀 Getting Started

Prerequisites

• Node.js 18.17 or later
• npm, yarn, or pnpm

Installation

1. Clone the repository

   git clone https://github.com/adam-ctrlc/watchanime.git
   cd watchanime

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

   Note: If you switch package managers (e.g., from pnpm to npm), make sure to delete the existing lock file (pnpm-lock.yaml, package-lock.json, or yarn.lock) and the node_modules folder before installing dependencies to avoid conflicts.

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open locally Open http://localhost:3000 with your browser to see the result.

📂 Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── api/                # Internal API routes (proxy + logic)
│   │   └── v1/anime/       # Deep data routes (franchise, reviews, etc.)
│   ├── detail/             # Detailed info page before watching
│   ├── search/             # Search page with filters
│   ├── watch/              # Watch page with player and sidebars
│   ├── globals.css         # Global styles and tailwind directives
│   ├── layout.jsx          # Root layout
│   └── page.jsx            # Homepage (Hero + Categories)
├── components/             # Reusable React components
│   ├── features/           # Feature-specific components (AnimeCard, AnimeGrid, etc.)
│   ├── layout/             # Layout components (Navbar, Footer, Hero)
│   ├── status/             # Status indicators (Loading, Error)
│   └── ui/                 # shadcn/ui components (Button, Select, etc.)
├── hooks/                  # Shared hooks (useApi)
└── lib/                    # API service layer (anime-service) & utilities

🎨 Design System

The application uses a custom design system built on top of Tailwind CSS, featuring:

• Colors: A palette centered around rich purples (purple-500, purple-600) and deep blacks (#121212) for a cinematic feel.
• Glassmorphism: Extensive use of backdrop-blur, transparent backgrounds (bg-white/5, bg-black/20), and subtle borders (border-white/10) to create depth.
• Typography: Clean, sans-serif typography ensuring readability across all devices.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the Apache License 2.0.

🙏 Acknowledgements

• Kitsu.io for providing the extensive anime database API.
• Jikan API for supplemental character data (MyAnimeList).
• Vercel for Next.js and hosting solutions.
• shadcn/ui for the beautiful component library.