A sleek anime watchlist to share with your friends.
Track what you're watching, discover new anime, and keep your list organized.

---

Features

Feature	Description
Secure Auth	Email/password login & signup with Firebase — smart auto-detection for new users
Instant Search	Search 25,000+ anime via the Jikan (MyAnimeList) API with live dropdown results
Personal Watchlist	Add, remove, and mark anime as watched — synced to the cloud in real-time
Google Calendar	Schedule watch times directly to your Google Calendar
Random Pick	Get high quality anime suggestions instantly
Live Stats	Track total, watched, and remaining anime at a glance
Rich Details	Click any anime card to see synopsis, watch order, director, studio, score, and more
Filter & Sort	Quick filter between All / Watching / Watched views
Password Reset	Forgot your password? Reset it with one click
Responsive	Looks great on desktop, tablet, and mobile
Themes	Toggle between premium Dark and Light modes
Settings Modal	Account management, username edits, email reset triggers, and dynamic watchlist preferences
JSON Data Backup	Download whole watchlist backups in structured JSON format directly from settings

---

Screenshots

Click to expand

Login Page

Clean authentication overlay with smart sign in / sign up toggle and one-click password reset.

---

Anime Info

Detailed modal showing synopsis, watch order, director, studio, ratings, and Google Calendar scheduling.

---

Flow Mode

Analyzes your watchlist and dynamically sequences your next watches using a custom algorithm to keep you engaged, prevent viewer fatigue, and maintain the perfect entertainment flow.

---

Random Pick

Unsure what to watch? Instantly shuffle and receive high-quality recommendation cards with hover effects.

---

Quick Start

1. Clone the Repo

git clone https://github.com/amorish/anique.git
cd anique

2. Set Up Firebase (Free)

1. Go to Firebase Console and create a new project
2. Add a Web App and copy the firebaseConfig
3. Paste it into assets/js/app.js (line 1-9)
4. Enable Authentication → Email/Password
5. Enable Firestore Database

3. Set Firestore Security Rules

Go to Firestore → Rules and paste:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /watchlists/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

4. Open & Enjoy

Just open index.html in your browser — or deploy for free on GitHub Pages / Netlify / Vercel!

---

Tech Stack

Tech	Purpose
HTML5 / CSS3 / JS	Core frontend — zero frameworks, ultra-lightweight
Firebase Auth	Secure user authentication
Cloud Firestore	Real-time database for watchlists
Jikan API v4	Anime data from MyAnimeList
Lucide Icons	Beautiful SVG icons
Google Fonts	Outfit (headings) + Inter (body)

---

Project Structure

anique/
├── index.html              # Main app entry
├── assets/
│   ├── css/
│   │   └── style.css       # Complete styling (610+ lines)
│   ├── js/
│   │   └── app.js          # App logic, Firebase, search, UI
│   └── images/
│       ├── aniqueTitleLogoNew.png    # Logo
│       ├── AniQueLogo.svg   # Logo (SVG)
│       └── screenshotDesktop.png       # App screenshot
└── README.md                # Documentation

---

Security

• Firebase Authentication with friendly error handling
• Per-user data isolation (users can only access their own watchlist)
• XSS protection on all user-facing content
• Safe-for-work search filter enabled
• No raw error messages exposed to users
• Firestore security rules enforce server-side access control

---

Google Stitch MCP Setup

The Model Context Protocol (MCP) server for Google's Stitch links your AI assistant (e.g. Cursor, Claude Desktop, etc.) directly to your Stitch design assets. Here are the steps to add it:

1. Prerequisite

Ensure you have the Google Cloud SDK installed and are authenticated. Run these commands in your shell:

gcloud auth application-default login
gcloud config set project YOUR_PROJECT_ID

2. Automatic Configuration (Recommended)

You can run the interactive initializer to automatically link Stitch to your global MCP configurations:

npx @_davideast/stitch-mcp init

This wizard will prompt you to authorize and will auto-detect your active projects.

3. Manual Configuration in AI Editors

Add the following block to your MCP configuration file depending on your editor:

• Cursor: Go to Settings -> Features -> MCP -> + Add New Server.

  • Name: stitch
  • Type: command
  • Command: npx -y @_davideast/stitch-mcp proxy

• Claude Desktop: Open %APPDATA%\Claude\claude_desktop_config.json (Windows) or ~/Library/Application Support/Claude/claude_desktop_config.json (Mac) and add:

  {
    "mcpServers": {
      "stitch": {
        "command": "npx",
        "args": ["-y", "@_davideast/stitch-mcp", "proxy"],
        "env": {
          "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
        }
      }
    }
  }

Once configured, restart your IDE/assistant. Your assistant will gain powerful custom tools to list design files, pull design tokens, and fetch component code from Google Stitch.

---

Roadmap

• Episode-by-episode progress tracking
• Personal ratings (1-10 stars)
• Sort by score, year, name, date added
• Search within your own watchlist
• Google Sign-In (one-click login)
• Statistics dashboard (hours watched, genre breakdown)
• Friend system & shared watchlists
• PWA support (install on phone)
• Light mode toggle
• Import from MyAnimeList

---

Contributing

Contributions are welcome! Feel free to fork and submit a PR.

1. Fork the repo
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

License

This project is open source and available under the MIT License.

---

Created by @amorish