• 🎯 About
• ✨ Features
• 🎬 Demo
• 🛠️ Technologies Used
• ⚡ Quick Start
• 📦 Installation
• 📖 Usage Guide
• 🎨 Customization
• 🔧 Configuration
• 📱 Responsive Design
• 🚀 Deployment
• 🤝 Contributing
• 📝 License
• 👥 Credits
• 🆘 Support

AniTrack is a modern, responsive web application designed to help anime enthusiasts track their favorite seasonal anime releases. Built with Vue.js and inspired by AniList's sleek design, AniTrack provides a seamless experience for discovering and monitoring currently airing anime series.

• 🎨 AniList-Inspired Design: Clean, dark theme with modern typography
• 📱 Fully Responsive: Perfect experience across all devices
• ⚡ Real-time Data: Powered by Jikan REST API for accurate anime information
• 🔄 Live Countdowns: Track upcoming episodes with real-time timers
• 🔍 Smart Search: Quickly find your favorite anime
• 🌟 Seasonal Tracking: Automatically detects and displays current season

• 📺 Current Season Anime: Browse currently airing anime with ratings and popularity
• ⏰ Episode Countdowns: Real-time timers for upcoming episodes
• 🔍 Search Functionality: Find anime by title instantly
• 📊 Detailed Info: Ratings, member counts, and episode information
• 🎯 Smart Tabs: Switch between current season and upcoming episodes

• 🌙 Dark Mode: Easy on the eyes with AniList-inspired color scheme
• 📱 Responsive Grid: Adaptive layout for all screen sizes
• ✨ Smooth Animations: Hover effects and loading states
• 🎪 Loading Screen: Full-screen animated loader
• 🖼️ Rich Media: High-quality anime cover images

• ⚡ Vue.js 2: Reactive components and state management
• 📡 Axios Integration: RESTful API communication
• 🎨 CSS Grid: Modern layout system
• 📱 Mobile-First: Responsive design approach
• 🔄 Auto-Updates: Periodic data refresh

Current Season	Upcoming Episodes

Coming Soon: Live demo will be available at Shineii86/AniTrack

• Desktop View: Clean grid layout with anime cards
• Mobile View: Optimized single-column layout
• Search Results: Real-time filtering
• Loading State: Smooth loading animations

Technology	Version	Purpose
	2.6.14	JavaScript Framework
	Latest	HTTP Client
	Latest	Markup Language
	Latest	Styling
	6.4.0	Icons

Service	Purpose	Documentation
	Anime Data	docs.api.jikan.moe
	Typography	fonts.google.com
	CDN	cdnjs.com

Get AniTrack running in less than 2 minutes!

git clone https://github.com/Shineii86/AniTrack.git
cd AniTrack

python -m http.server 8000

npx serve

🎉 That's it! AniTrack should now be running.

• 🌐 Modern web browser (Chrome, Firefox, Safari, Edge)
• 🔗 Internet connection (for API calls and CDN resources)
• 📝 Text editor (VS Code, Sublime Text, etc.)

# Download ZIP from GitHub
wget https://github.com/Shineii86/AniTrack/archive/main.zip
unzip main.zip
cd AniTrack-main

# Clone repository
git clone https://github.com/Shineii86/AniTrack.git
cd AniTrack

1. Fork the repository on GitHub
2. Clone your fork:

git clone https://github.com/YOUR_Shineii86/AniTrack.git
cd AniTrack

AniTrack/
├── 📄 index.html         # Main HTML file
├── 🖼️ assets/            # Images and media
├── 📚 docs/              # Documentation
├── 📝 README.md          # This file
├── 📜 LICENSE            # MIT License
└── 🎨 screenshots/       # App screenshots

1. Open the Application

   • Open index.html in your browser
   • Wait for the loading animation to complete

2. Browse Current Season

   • View automatically detected current season anime
   • Scroll through the grid of anime cards
   • Check ratings and popularity stats

3. Search for Anime

   • Use the search bar at the top
   • Type anime titles for instant filtering
   • Results update in real-time

4. Track Episodes

   • Switch to "Upcoming Episodes" tab
   • View countdown timers for next episodes
   • See broadcast schedules

• 🏠 Header: Logo, navigation, and season info
• 🔍 Search Bar: Real-time anime search
• 📑 Tabs: Switch between current season and upcoming episodes
• 🃏 Anime Grid: Card-based anime display

• 🖼️ Cover Image: High-quality anime artwork
• 📊 Rating: MyAnimeList score
• 👥 Popularity: Member count
• 📺 Episodes: Episode count and status
• ⏰ Countdown: Next episode timer

• 🔄 Refresh Data: The app automatically updates every minute
• 📱 Mobile Optimized: Swipe through anime cards on mobile
• 🎨 Visual Cues: Hover effects reveal additional information
• ⚡ Fast Loading: Images are optimized for quick loading

:root {
  --color-primary: #3377ff;      /* AniList blue accent */
  --color-primary-dark: #0055ff; /* Darker blue for hover */
  --color-accent: #e0d59e;       /* Subtle gold accent */
  --color-background: #11161d;   /* Deep navy background */
  --color-surface: #242e3d;      /* Card and surface elements */
  --color-text: #fafafa;         /* Primary text */
  --color-muted: #949494;        /* Muted text and icons */
}

• Primary Font: Roboto (Google Fonts)
• Fallback: 'Segoe UI', sans-serif
• Icon Font: Font Awesome 6.4.0

.anime-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

• Desktop: > 768px
• Tablet: 768px - 480px
• Mobile: < 480px

// Current season endpoint
const SEASON_API = 'https://api.jikan.moe/v4/seasons/now?limit=20';

// Custom parameters
const apiParams = {
  limit: 20,        // Number of anime to fetch
  page: 1,          // Pagination
  order_by: 'score' // Sorting method
};

// Available endpoints
const API_ENDPOINTS = {
  currentSeason: 'https://api.jikan.moe/v4/seasons/now',
  topAnime: 'https://api.jikan.moe/v4/top/anime',
  animeSearch: 'https://api.jikan.moe/v4/anime?q=',
  animeDetails: 'https://api.jikan.moe/v4/anime/'
};

• Jikan API: 3 requests per second, 60 per minute
• Built-in Handling: Automatic retry with exponential backoff

// Automatic season detection
function setSeason() {
  const month = new Date().getMonth();
  if (month >= 2 && month <= 4) return 'Spring';
  if (month >= 5 && month <= 7) return 'Summer';
  if (month >= 8 && month <= 10) return 'Fall';
  return 'Winter';
}

const UPDATE_INTERVALS = {
  countdown: 60000,    // 1 minute
  data: 300000,        // 5 minutes
  season: 86400000     // 24 hours
};

Create your own theme by modifying CSS variables:

/* Custom Theme Example */
:root {
  --color-primary: #ff6b6b;      /* Red theme */
  --color-background: #1a1a1a;   /* Darker background */
  --color-surface: #2d2d2d;      /* Lighter surface */
}

• 👆 Tap Targets: Minimum 44px touch targets
• 👌 Gestures: Swipe support for card navigation
• 📱 Viewport: Optimized for mobile viewports

• 🖼️ Lazy Loading: Images load as needed
• 📦 Compression: Optimized assets
• ⚡ Caching: Browser caching enabled

• 🖱️ Hover Effects: Rich hover interactions
• ⌨️ Keyboard Navigation: Full keyboard support
• 🖼️ Large Images: High-resolution artwork

# 1. Install Netlify CLI
npm install -g netlify-cli

# 2. Build and deploy
netlify deploy --prod --dir .

# 1. Install Vercel CLI
npm install -g vercel

# 2. Deploy
vercel --prod

1. Go to repository Settings
2. Navigate to Pages section
3. Select source branch (main)
4. Site will be available at Shineii86.github.io/AniTrack

# 1. Install Firebase CLI
npm install -g firebase-tools

# 2. Initialize project
firebase init hosting

# 3. Deploy
firebase deploy

1. Create S3 bucket
2. Upload files
3. Configure CloudFront distribution
4. Set up custom domain (optional)

# Dockerfile
FROM nginx:alpine
COPY . /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# Build and run
docker build -t AniTrack .
docker run -p 8080:80 AniTrack

We welcome contributions from the community! Here's how you can help make AniTrack even better.

• 🐛 Report Bugs: Found a bug? Open an issue
• 💡 Suggest Features: Have an idea? Start a discussion
• 📝 Improve Documentation: Help us improve our docs
• 🎨 Design Improvements: Submit design mockups or improvements
• 💻 Code Contributions: Fix bugs or add features

1. Fork the Repository

   # Fork on GitHub, then clone your fork
   git clone https://github.com/YOUR_Shineii86/AniTrack.git
   cd AniTrack
   

2. Create a Branch

   # Create a descriptive branch name
   git checkout -b feature/amazing-feature
   # or
   git checkout -b bugfix/fix-search-issue
   

3. Make Changes

   • Write clean, commented code
   • Follow existing code style
   • Test your changes thoroughly

4. Commit Changes

   # Use conventional commit format
   git commit -m "feat: add amazing new feature"
   git commit -m "fix: resolve search functionality issue"
   git commit -m "docs: update installation guide"
   

5. Push and Create PR

   git push origin your-branch-name
   # Then create a Pull Request on GitHub
   

• Use consistent indentation (2 spaces)
• Follow Vue.js style guide
• Comment complex logic
• Use meaningful variable names

We follow Conventional Commits:

• feat: New features
• fix: Bug fixes
• docs: Documentation changes
• style: Code style changes
• refactor: Code refactoring
• test: Test additions/changes

1. Ensure your code follows our style guide
2. Update documentation if needed
3. Add screenshots for UI changes
4. Ensure all checks pass
5. Request review from maintainers

Contributors will be:

• Added to our Contributors section
• Mentioned in release notes
• Given credit in relevant documentation

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2025 AniTrack

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...

• ✅ Use commercially
• ✅ Modify
• ✅ Distribute
• ✅ Private use

• 📄 Include license and copyright notice

• ❌ Hold liable
• ❌ Use trademark

• Shinei Nouzen - Original Developer & Maintainer

• AniList - UI/UX Design Inspiration
• MyAnimeList - Anime Database Reference

• Vue.js Team - JavaScript Framework
• Jikan API - Anime Data Provider
• Font Awesome - Icon Library
• Google Fonts - Roboto Typography
• Shields.io - Badge Generation

• Axios - HTTP Client
• CDNJS - Content Delivery Network
• Unsplash - Placeholder Images

• Anime Community - For continuous feedback and support
• Open Source Contributors - For making this project possible
• Beta Testers - For early feedback and bug reports

Need help? We're here for you!

Found a bug? Please open an issue with:

• Detailed description
• Steps to reproduce
• Expected vs actual behavior
• Browser and OS information
• Screenshots (if applicable)

Have an idea? Open a feature request with:

• Clear description of the feature
• Use case and benefits
• Any mockups or examples

• 💬 GitHub Discussions - Community Q&A