AniDash ✨

AniDash is a premium, high-end personal anime tracker with a focus on Ethereal Glass aesthetics and high-performance list management. Powered by Svelte 5 (Runes), Tailwind CSS v4, and the MyAnimeList API.

✨ Features

• Ethereal Glass UI: A custom-crafted design system using frosted glassmorphism, fluid animations, and high-contrast OLED black themes.
• Offline-First Resilience: Full IndexedDB caching for your entire watch list. Browse, check stats, and view anime details even without an internet connection.
• Fused Filtering Logic: Optimized +page.svelte by consolidating chained filter calls into a single O(N) pass, reducing intermediate array allocations and GC pressure during user interaction.
• Offline Sync Queue: Implemented a discrete syncQueue IndexedDB store (DB_VERSION 2) to natively sequester offline or failed user mutations. Ensures offline mutations are maintained optimistically and re-attempted sequentially upon resolving navigator.onLine or triggering flushPersistentQueue.
• Zero-Dependency Visuals: Implemented score and media format distribution charts using pure CSS/Svelte logic, maintaining high performance and small bundle size while providing premium analytics.
• Bi-Directional Sync: Modern MAL API v2 integration with proper PKCE OAuth, real-time status updates, and permanent list deletion support.
• MAL-Dubs Integration: Instantly identify which anime have English dubs available using the MAL-Dubs dataset with a persistent 7-day TTL cache.
• Advanced Recommendations: Dual-source suggestions from both MyAnimeList and the Jikan community, unified into a premium suggested gallery.
• Dynamic Stats & Sorting: Comprehensive dashboard tracking your watching habits, episode distribution, and rating history with responsive visualizations. Enhanced data navigation with "MAL Rating" sorting for your personal list and seasonal anime.
• Smart Data Insights: Community rating and member statistics (e.g., "8.3 | 250K") displayed on poster overlays using short-scale formatting (K/M) for maximum density.
• Bilingual Title Support: Global settings toggle to seamlessly switch between English and Romaji (Japanese) anime titles, complete with smooth flip animations and persistent local preferences.
• Interactive Discovery: Turn empty states into opportunities with glassmorphic "Plan to Watch Roulette" and "Seasonal Surprise" widgets built directly into the Browse page.
• Enhanced Detail Gallery: Lazy-loaded characters, community recommendations from Jikan, and a "Quick Stats" row with precise scoring user counts.
• Integrated Airing Schedules: Stay ahead of the season with native MAL broadcast times (e.g. "Airs Mondays at 23:30 JST") displayed directly on anime detail pages for accurate airing information.
• Visual Analytics Dashboard: Deep dive into your watch history with score distribution histograms and media format charts built natively for maximum performance.
• Detailed Search Context: Search and browse results now explicitly show your list status (Watching, Completed, etc.) and real-time watch progress (e.g. 12/24) directly on the posters.
• Type-Safe OAuth: End-to-end Zod schema validation ensures authentication logic is resilient to unexpected API changes.
• Environment-Aware Logging: Centralized logging utility silences debug warnings in production builds for a cleaner end-user experience.

🏗️ Architecture

AniDash is a unified SvelteKit application optimized for Cloudflare Pages.

1. Frontend: SvelteKit SPA using Svelte 5's fine-grained reactivity (Runes).
2. Backend: Serverless Edge Functions that handle secure MAL token exchange and CORS proxying.
3. Database: Client-side IndexedDB for lightning-fast performance and offline availability.

---

🛠 Setup & Development

1. Get MAL API Credentials

1. Go to MyAnimeList API Settings.
2. Create a new ID.
   • App Type: web
   • Redirect URI: http://localhost:5173/auth/callback (for local development)

2. Environment Variables

Create a .env file in the root for the frontend:

VITE_MAL_CLIENT_ID=your_mal_client_id

For local development of server-side routes, create a .dev.vars file in the root (used by Wrangler):

MAL_CLIENT_ID=your_mal_client_id
MAL_CLIENT_SECRET=your_mal_client_secret

3. Running Locally

npm install
npm run dev

The app will run on http://localhost:5173.

---

🚀 Deployment (Cloudflare Pages)

AniDash is optimized for Cloudflare Pages.

1. Preparation

1. Ensure your MAL API Client settings include your production URL in the Redirect URIs: https://your-app.pages.dev/auth/callback

2. Cloudflare Pages Setup

1. Connect your repository to Cloudflare Pages.

2. Build settings:

   • Framework preset: SvelteKit
   • Build command: npm run build
   • Build output directory: .svelte-kit/cloudflare

3. Environment Variables: In the Cloudflare Dashboard, go to Settings > Variables and Secrets and add:

   Variable	Type	Description
   VITE_MAL_CLIENT_ID	Environment Variable	Public Client ID for the frontend build.
   MAL_CLIENT_ID	Environment Variable / Secret	Client ID for backend proxying.
   MAL_CLIENT_SECRET	Secret	Your MAL Client Secret (Keep this private).

4. Compatibility Date: Ensure the compatibility date is set to at least 2024-04-01 in the dashboard or wrangler.toml.

License

This project is licensed under the GNU General Public License v3.0.