• 10,000+ Anime Archive - Comprehensive database with real-time AniList synchronization
• Neural Recommendations - AI-powered suggestions based on your watch history and genre preferences
• Multi-Status Tracking - Organize anime into Watching, Completed, Planning, On-Hold, and Dropped
• Advanced Search & Filters - Find anime by title, genre, year, score, and more
• Dual-View Library - Switch between grid and list layouts instantly

• Glass-Industrial Aesthetic - Modern glassmorphism with industrial command-center vibes
• Multi-Chromatic Themes - Choose from Millennium (default), Cyberpunk, and Monochrome
• Cinematic Loading States - Smooth skeleton screens and scanning animations
• Micro-Animations - Staggered entries, hover blooms, and floating badges
• Fully Responsive - Optimized for desktop, tablet, and mobile

• Spotlight Carousel - Auto-rotating hero showcase of trending anime
• Neural Reroll - Get fresh recommendations with high-entropy randomization
• Mission Control - Import/export your anime lists with diff detection
• Real-Time Sync - Dual-table architecture ensures 100% data integrity
• Server-Side Pagination - Lightning-fast performance even with massive datasets

• Node.js 20+ and npm/yarn/pnpm
• Supabase account
• AniList API access (free)

1. Clone the repository

   git clone https://github.com/voidx3d/anime-tracker.git
   cd anime-tracker

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   SUPABASE_SERVICE_KEY=your_supabase_service_key

4. Set up the database

   Run the SQL schema in your Supabase project:

   -- See docs/database-schema.sql for the complete schema

5. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

6. Open your browser

   Navigate to http://localhost:3000

anime-tracker/
├── public/              # Static assets (favicon, images, manifest)
├── scripts/             # Data ingestion and sync scripts
│   ├── scrape-anilist.ts
│   ├── surgical-sync.ts
│   └── final-extraction.ts
├── src/
│   ├── app/            # Next.js App Router pages
│   │   ├── anime/      # Anime detail pages
│   │   ├── library/    # Main library view
│   │   ├── suggestions/# Neural recommendations
│   │   ├── dashboard/  # Analytics dashboard
│   │   └── import/     # Mission Control (import/export)
│   ├── components/     # Reusable React components
│   │   ├── AnimeCard.tsx
│   │   ├── NeuralImage.tsx
│   │   ├── SpotlightCarousel.tsx
│   │   ├── NeuralSuggestions.tsx
│   │   └── ...
│   ├── lib/            # Utilities and helpers
│   │   ├── supabaseClient.ts
│   │   └── diffEngine.ts
│   └── types/          # TypeScript type definitions
├── docs/               # Documentation
└── README.md

1. Navigate to Library to view your collection
2. Use the status tabs to filter by Watching, Completed, etc.
3. Toggle between Grid and List views
4. Click any anime card for detailed information

1. Visit the Suggestions page
2. Click Reroll Strategy for fresh recommendations
3. Recommendations are based on your completed/planned anime genres

1. Go to Mission Control (Import page)
2. Upload your AniList/MyAnimeList export JSON
3. Review the diff and apply changes
4. Your library will sync automatically

1. Click the theme toggle in the navbar
2. Choose from Millennium, Cyberpunk, or Monochrome
3. Your preference is saved to localStorage

The application uses two main tables:

• animes - Main anime archive with metadata and user status
• user_anime_lists - Legacy repository for backward compatibility

See docs/database-schema.sql for the complete schema.

• 10,000+ anime indexed and searchable
• Server-side pagination for instant load times
• Image optimization with Next.js Image component
• Lazy loading for off-screen content
• Efficient caching with Supabase query optimization

vercel --prod

npm run build
npx wrangler pages deploy .next

Ensure all environment variables are configured in your deployment platform.

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a 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

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

• AniList for the comprehensive anime database API
• Supabase for the powerful backend infrastructure
• Next.js team for the incredible framework
• Vercel for seamless deployment

VoidX3D - @voidx3d

Project Link: https://github.com/voidx3d/anime-tracker