Anime Vault

A premium, offline-first desktop app for browsing your MyAnimeList export as a beautiful personal anime library. Built with Tauri, React, TypeScript, Vite, and Tailwind CSS.

Status: feature-complete. App shell, a real Home dashboard (Continue Watching, Recently Added, overview stats, quick actions), the Library page (poster grid, sort/filter/search, a 5-state watch-status filter with live counts, manual Add/Edit/Delete Anime), the import wizard (Excel/CSV parsing, validation, preview, resumable SQLite-backed progress), provider-based metadata fetching (Jikan primary, AniList fallback), local artwork caching (real file downloads, repair, and clear — served via Tauri's asset protocol, works offline once cached), the Details/Favorites/Collections pages (notes, tags, favoriting, related anime, recommendations, trailers, custom collections, auto-updating "smart" collections keyed off watch status, edit/delete), a real Statistics dashboard (score/genre/studio/ release-year charts, a 5-way watch-status breakdown, estimated watch time), and Settings' Database tools (backup/restore/export), Cache management, and a real working light/dark theme are all working end-to-end. The unfinished Search page and placeholder Settings sections (General/Import/Metadata/AI/Support) have been removed rather than shipped half-built.

Prerequisites

• Node.js 22.x and npm 10.x
• Rust 1.96+ via rustup
• Tauri CLI system dependencies for your platform — see the official Tauri prerequisites guide:
  • Windows: Visual Studio Build Tools with the "Desktop development with C++" workload, plus the WebView2 runtime (preinstalled on most modern Windows 10/11 systems).
  • macOS: Xcode Command Line Tools.
  • Linux: webkit2gtk, libayatana-appindicator3, and related system packages (see the Tauri guide for your distro).

Getting started

npm install

Run the desktop app (recommended)

npm run tauri dev

Opens the native Anime Vault window with hot-reload for both the React frontend and Rust backend. This is the intended way to develop and use the app.

Run the frontend only (browser preview)

npm run dev

Starts the Vite dev server on http://localhost:1420. Useful for fast UI iteration in a browser, but any Tauri-specific functionality (native APIs, future database/file-system access) will not work outside the Tauri runtime.

Build a native installer

npm run tauri build

Produces a platform-native installer/binary under src-tauri/target/release/bundle/.

See SCRIPT.md for a full reference of every available script.

Project structure

src/
  components/   Reusable UI (layout, navigation, cards, anime, ui primitives, ...)
  pages/        One folder per route (home, library, details, import, ...)
  hooks/        Shared React hooks
  services/     Metadata providers, import parsing/orchestration, artwork, backup
  database/     SQLite client + typed queries
  store/        Zustand store for live import progress
  types/        Shared TypeScript types
  utils/        Small shared utilities
  styles/       Global CSS / Tailwind theme
src-tauri/      Rust backend, Tauri config, SQL migrations

See ARCHITECTURE.md for a file-by-file map of the codebase.

Roadmap

1. App shell — layout, sidebar, header, routing, theme (done)
2. Home dashboard with real data (done) — Continue Watching, Recently Added, overview stat tiles, quick actions (Add Anime, Import List, Open Library)
3. Library page, poster grid, search, filters (done) — includes a watch-status filter/sort and manual Add Anime
4. Import wizard, spreadsheet parsing, local SQLite database (done)
5. Metadata fetching and local artwork caching (done) — metadata flows through a provider manager with Jikan as the primary MAL-compatible source and AniList GraphQL as fallback for timeouts, rate limits, server failures, and empty search results; posters download to $APPDATA/artwork/ (the same folder the SQLite database lives in), served via Tauri's asset protocol, with repair/clear actions in Settings
6. Anime details page, favorites, collections (done) — notes, tags, related anime, recommendations, trailers, custom collections, auto-updating "smart" collections by watch status, edit/delete
7. Statistics dashboard (done) — score distribution, top genres/studios, library-by-release-year, a 5-way watch-status breakdown, estimated watch time; built on recharts, following the dataviz skill's method (validated sequential color ramp, hover tooltips, ResponsiveContainer resizing)
8. Settings & maintenance (done) — Database tools (backup/restore/export via native file dialogs, tauri-plugin-dialog), Cache management, and a real working Dark/Light theme (previously the toggle had no visual effect — every color token now has a :root.light override). Placeholder sections with no concrete feature (General/Import/Metadata/AI/Support) and the unfinished Search page were removed rather than left half-built
9. Manual Add/Edit/Delete Anime, watch-status taxonomy, and a Library poster-grid layout fix (done) — a real 5-state watch status (Watching/Completed/Plan to Watch/Dropped/On Hold) replacing the earlier binary Watched flag, an "Add Anime" workflow with an optional MAL-match step, and a fix for posters overlapping at certain window widths
10. Polish — animations, accessibility, performance

Running in Docker (frontend preview only)

A Dockerfile is included, but it can only build and preview the web frontend in a browser — it does not and cannot produce or run the native Tauri desktop application. Tauri apps are OS-native binaries built against a system webview; there is no meaningful way to run that inside a Linux container. See the comments at the top of the Dockerfile for details, and use npm run tauri build on your host machine to get the real desktop app.