Welcome to AnimeThemes Web
AnimeThemes Web is a modern, high-performance frontend application built with Next.js that provides a beautiful interface for browsing, searching, and watching anime opening and ending themes.
What is AnimeThemes Web?
A simple and consistent repository of anime opening and ending themes. AnimeThemes Web provides high quality WebMs of your favorite OPs and EDs for your listening and discussion needs, all wrapped in a sleek, user-friendly interface.Search & Discover
Browse through a comprehensive database of anime themes with powerful search capabilities
Video Playback
Watch high-quality WebM videos with a custom-built video player
Playlists
Create and manage playlists of your favorite anime themes
User Profiles
Personalized profiles with watch history and custom galleries
Key Features
AnimeThemes Web is packed with features designed to enhance your anime theme browsing experience:🎬 Advanced Video Player
- Custom-built video player with fullscreen support
- Auto-play and repeat functionality
- Watch list management with queue support
- iOS compatibility with webkit fullscreen
- Background playback for seamless navigation
🔍 Powerful Search & Navigation
- Full-text search across anime, artists, series, and studios
- Browse by year and season
- Filter by theme type (OP/ED)
- Shuffle feature for random discovery
- Recently added and most popular sections
🎨 Modern UI/UX
- Built with styled-components for dynamic theming
- Dark mode support with customizable color themes
- Responsive design for mobile and desktop
- Smooth animations powered by Motion
- Radix UI components for accessibility
📊 Rich Data
- Comprehensive anime metadata
- Artist and studio information
- Series relationships
- Multiple video qualities and formats
- Featured themes and announcements
🎵 Content Organization
- Anime index with detailed pages
- Artist profiles with discography
- Year/Season browsing
- Series and studio indexes
- Event pages and anime awards
👤 User Features
- User authentication and profiles
- Watch history tracking
- Playlist creation and management
- Gallery customization
- Password reset functionality
🚀 Performance Optimized
- Static Site Generation (SSG) with incremental regeneration
- Turbopack for faster builds and hot reload
- GraphQL API with efficient data fetching
- Client-side caching with React Query and SWR
- Bundle analysis for optimization
🛠️ Developer Experience
- TypeScript for type safety
- GraphQL code generation
- ESLint and Prettier for code quality
- Husky for git hooks
- Comprehensive build configuration
Tech Stack
AnimeThemes Web is built with cutting-edge technologies:Next.js 15
React framework with App Router and RSC support
TypeScript
Full type safety across the codebase
Styled Components
CSS-in-JS with theming support
GraphQL
Efficient API queries with code generation
React Query
Powerful data synchronization
Radix UI
Accessible component primitives
Getting Started
Installation
Set up your development environment and install dependencies
Configuration
Configure environment variables and API endpoints
Development
Learn the development workflow and available scripts
API Documentation
Explore the AnimeThemes API documentation
Open Source
AnimeThemes Web is open source and welcomes contributions!- GitHub Repository: AnimeThemes/animethemes-web
- GitHub Organization: AnimeThemes
- Discord Community: Join our Discord
This project is actively being worked on. If you’re a developer interested in contributing, feel free to contact us on Discord or submit a pull request on GitHub.
Project Structure
The application follows Next.js best practices with a well-organized structure:What’s Next?
Explore the documentation to learn how to set up and customize AnimeThemes Web for your needs:Install Dependencies
Follow the installation guide to set up your development environment
Configure Environment
Set up environment variables for API access
Start Developing
Learn the development workflow and start building