A modern, feature-rich anime discovery platform built with Next.js 14
🚀 Live Demo](https://anime-vault-nine-dusky.vercel.app/) • 📖 Documentation • 🛠️ Installation
- Anime Discovery: Browse and discover anime with real-time data from Shikimori API
- Smart Search: Instant search functionality with autocomplete suggestions
- Genre Filtering: Filter anime by categories (Action, Adventure, Drama, etc.)
- Streaming Integration: Direct links to watch anime on popular streaming platforms
- Infinite Scroll: Seamless loading of more content as you browse
- Glassmorphism Design: Beautiful glass-effect components with backdrop blur
- Responsive Layout: Optimized for desktop, tablet, and mobile devices
- Smooth Animations: Framer Motion-powered transitions and micro-interactions
- Dark Theme: Eye-friendly dark interface with gradient accents
- Interactive Cards: Hover effects and dynamic content loading
- Server-Side Rendering: Next.js 14 with App Router for optimal performance
- TypeScript: Full type safety and enhanced developer experience
- API Integration: Real anime data from Shikimori API
- Optimized Images: Next.js Image component for fast loading
- SEO Optimized: Meta tags and structured data for better search visibility
- Node.js 18.0 or higher
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/BreyeFoka/Anime-Vault.git cd Anime-Vault -
Install dependencies
npm install # or yarn install -
Run the development server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:3000 to see the application.
npm run build
npm run startanime-vault/
├── app/ # Next.js 14 App Router
│ ├── action.tsx # Server actions for API calls
│ ├── globals.css # Global styles and animations
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Home page component
├── components/ # Reusable React components
│ ├── AnimeCard.tsx # Individual anime card with streaming modal
│ ├── CategoriesSection.tsx # Genre filtering section
│ ├── FeaturedSection.tsx # Featured anime showcase
│ ├── Footer.tsx # Site footer
│ ├── Hero.tsx # Hero section with search
│ ├── LoadMore.tsx # Infinite scroll component
│ ├── MotionDiv.tsx # Animated wrapper component
│ ├── Navigation.tsx # Header navigation
│ ├── TopRatedSection.tsx # Top-rated anime section
│ └── TrendingSection.tsx # Trending anime section
├── public/ # Static assets
│ ├── hero.png # Hero section image
│ ├── logo.svg # Application logo
│ └── [other assets] # Icons and images
├── next.config.js # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
- Homepage: View featured, trending, and top-rated anime
- Search: Use the search bar in the hero section or navigation
- Categories: Click genre buttons to filter anime by category
- Infinite Scroll: Scroll down to automatically load more anime
- Find an anime you want to watch
- Click "Watch Now" on any anime card
- Select a streaming service from the modal that appears
- Enjoy! You'll be redirected to the streaming platform
- Fixed Header: Always accessible navigation with search
- Mobile Menu: Hamburger menu for mobile devices
- Responsive Design: Optimized for all screen sizes
The application integrates with the Shikimori API to fetch real anime data:
- Anime Data: Title, description, ratings, episodes, images
- Genre Information: Categories and tags for filtering
- Search Functionality: Real-time anime search
- Detailed Information: Cast, studios, release dates
Integrated streaming platforms include:
- Crunchyroll
- Netflix
- Funimation
- Hulu
- VRV
- AnimeLab
- Wakanim
The application uses CSS custom properties for easy theming:
:root {
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}Custom animations are defined in globals.css:
- Fade-in effects
- Slide transitions
- Floating animations
- Gradient shifts
- Glow effects
All components are modular and customizable:
- Modify styling in individual component files
- Adjust animations via Framer Motion props
- Configure API endpoints in
action.tsx
- Image Optimization: Next.js Image component with lazy loading
- Code Splitting: Automatic code splitting with Next.js
- Server-Side Rendering: Fast initial page loads
- Caching: Efficient API response caching
- Bundle Size: Optimized bundle with tree shaking
- Performance: 95+
- Accessibility: 100
- Best Practices: 100
- SEO: 95+
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch
git checkout -b feature/amazing-feature
- Commit your changes
git commit -m 'Add some amazing feature' - Push to the branch
git push origin feature/amazing-feature
- Open a Pull Request
- Follow TypeScript best practices
- Use meaningful component names
- Write responsive CSS with Tailwind
- Test on multiple devices
- Maintain consistent code style
This project is licensed under the MIT License - see the LICENSE file for details.
- Shikimori - For providing the anime database API
- Next.js - For the amazing React framework
- Framer Motion - For smooth animations
- Tailwind CSS - For utility-first styling
- Vercel - For deployment and hosting
If you have any questions or need help:
- 📧 Email: your-email@example.com
- 🐛 Issues: GitHub Issues
- 💬 Discussions: GitHub Discussions
Made with ❤️ by Breye Foka
⭐ Star this repo if you find it helpful!