Anime Website

A modern, responsive single-page application for discovering and browsing anime series.

---

Overview

Browse trending, popular, and recent anime, search for any series, and dive into detailed pages with trailers, recommendations, related anime, and episode lists — all powered by the Consumet API (AniList Meta provider).

Features

• Animated landing page — gradient background with a clean entry point
• Trending / Popular / Recent — tabbed browsing with paginated grids
• Live search — debounced autocomplete dropdown (top 5 results) + full browse page
• Anime detail pages — cover art, metadata, YouTube trailer, recommendations, relations, and searchable episode list with pagination
• Client-side caching — localStorage with 1-hour expiry for trending, popular, and anime info

Built With

React 19	UI framework
Vite 6	Build tool & dev server
React Router 7	Client-side routing
Tailwind CSS v4	Utility-first styling
Axios	HTTP client
ESLint	Code linting

Getting Started

Prerequisites

• Node.js 18+ or Bun

Installation

git clone <repo-url>
cd anime-website
npm install    # or bun install

Environment Variables

Create a .env file in the project root:

VITE_ANIME_API=https://api.consumet.org

This points to a Consumet API-compatible instance. You can self-host one or use a public instance.

Development

npm run dev    # or bun run dev

Open http://localhost:5173 in your browser.

Available Scripts

Command	Description
dev	Start the Vite dev server with HMR
build	Production build into dist/
preview	Preview the production build
lint	Run ESLint

Run with npm run <script> or bun run <script>.

Project Structure

src/
├── api/              # Axios instance & API config
├── assets/           # Static assets
├── components/       # Reusable UI components
│   ├── anime-info/   # Detail page components + tabs
│   ├── browse/       # Search result cards
│   └── home-page/    # Navbar, cards, trending/popular/recent grids
├── layouts/          # Shared layout (navbar + outlet)
├── pages/            # Route-level page components
├── App.jsx           # Route definitions
├── main.jsx          # Entry point
└── index.css         # Tailwind import

Deployment

npm run build    # or bun run build

Serve the dist/ directory with any static server — Nginx, Vercel, Netlify, Cloudflare Pages, etc.