Skip to content
darvex-0Public

About

A modern, streamlined anime tracking application designed to monitor your watch history, manage custom discovery lists, and discover new seasonal releases using official media APIs.

Topics

Resources

Stars

3 stars

Watchers

0 watching

Forks

Latest commit

 

History

92 Commits

Folders and files

Repository files navigation

AniTrace Dashboard Screenshot

AniTrace Logo

AniTrace

Your ultimate, distraction-free watch companion. Track your anime, TV series, and movies with zero bloat and absolute speed, supercharged by Gemini AI & TMDB.

Live Demo • Report Bug • Request Feature

Vite React TailwindCSS Firebase Gemini Playwright Tests Vitest


📽️ Why AniTrace?

Most tracking sites are either covered in intrusive ads, feel like spreadsheets from 2012, or take ages to load on mobile. I wanted a modern dashboard that gets out of the way, looks stunning on a desk monitor or phone, and is smart enough to handle massive franchises without manual data entry.

AniTrace integrates the TMDB API for rich metadata and Gemini 2.5 Flash for AI-assisted autocomplete and franchise mapping (automatically discovering prequels, sequels, and spin-offs in a click).


✨ Features

  • 🌌 Modern Dark-Mode Dashboard: Clean interface, vibrant gradients, and fluid animations (powered by Framer Motion) that look great on any screen.
  • 🧠 AI Autocomplete & Estimation (Optional): Enter a partial title, and let Gemini estimate total seasons, episodes, and generate a brief clean synopsis.
  • 🔗 Smart Franchise Mapping: Instantly discovers prequel/sequel relations and lets you connect them to your watchlist.
  • ⚡ Realtime Cloud Sync: Powered by Firebase Authentication and Firestore to save your list instantly across all devices.
  • 📱 Fully Responsive: Feels like a native app on mobile, tablet, or desktop.
  • 🚫 Ad-free & Tracker-free: Just your watch list, your way.

🛠️ Tech Stack

  • Frontend: React 18 (TypeScript), Vite, Tailwind CSS, Framer Motion
  • UI Components: Shadcn/ui (Radix Primitives)
  • Backend: Firebase (Auth, Firestore, Hosting)
  • APIs: TMDB API (Base movie/show searches), Google Gemini 2.5 Flash API (Smart predictions & franchise connections)

🚀 Quick Start (Local Setup)

Get it up and running locally in under 2 minutes:

1. Clone the repository

git clone https://github.com/darvex-0/AniTrace.git
cd AniTrace

2. Install dependencies

npm install

3. Setup Environment Variables

Copy the example environment file:

cp .env.example .env

Open .env and fill in your keys:

VITE_TMDB_API_KEY=your_tmdb_api_key
VITE_GEMINI_API_KEY=your_gemini_api_key

Important

  • TMDB API Key: Required for basic search and metadata queries. Grab a free API key from your TMDB account settings.
  • Gemini API Key: Unlocks AI autocomplete, smart episode/season count estimation, and franchise timeline mapping. Get a key from the Google AI Studio.

How to configure the Gemini API Key:

  • Option 1: Directly in the Web App UI (Recommended): You can enter your Gemini API Key directly inside the app by going to the Profile page and scrolling to AI Autocomplete Settings. This saves the key securely inside your browser's local storage (no environment variable setup needed!).
  • Option 2: Via Local Environment: You can paste your key in the .env file as VITE_GEMINI_API_KEY to load it permanently for local development.

4. Setup Firebase (Optional)

This project uses Firebase. You can replace the default firebase config in src/lib/firebase.ts with your own project credentials.

5. Start development server

npm run dev

Open http://localhost:5173 in your browser!


🧪 Quality Assurance & Test Engineering (STLC)

AniTrace follows an industry-standard Software Testing Life Cycle (STLC) incorporating Black-Box Testing, White-Box Testing, and Automated E2E Testing.

📁 QA Directory Structure (/qa)


⚡ Running Test Suites Locally

1. White-Box Unit & Integration Tests (Vitest)

npm test

2. Black-Box End-to-End UI Automation (Playwright)

# Run Playwright tests headlessly
npx playwright test

# Run Playwright tests in interactive UI mode
npx playwright test --ui

# View generated HTML test execution report
npx playwright show-report

🤝 Contributing

Contributions make the open-source community an amazing place. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your 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

📝 License

Distributed under the MIT License. See LICENSE for more information.


Created with ❤️ by darvex-0

About

A modern, streamlined anime tracking application designed to monitor your watch history, manage custom discovery lists, and discover new seasonal releases using official media APIs.

Topics

Resources

Stars

3 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages