A sleek movie & TV series watchlist to share with your friends.
Track what you're watching, discover new titles, and keep your list perfectly organised.

---

Features

Feature	Description
Secure Auth	Email/password login & signup with Firebase - smart auto-detection for new users
Instant Search	Search 1M+ movies & TV series via the TMDB API with live dropdown results
Personal Watchlist	Add, remove, and mark titles as watched - synced to the cloud in real-time
Google Calendar	Schedule watch times directly to your Google Calendar
Random Pick	Get 3 diverse, high-quality movie/TV suggestions instantly (6/day limit)
Live Stats	Track total, watched, and remaining titles at a glance
Ticket Export	Generate and share a customized, beautifully designed ticket with your watch stats
Rich Details	Click any card to see synopsis, collection watch order, director, studio, cast, and more
Where to Watch	Find out exactly which streaming platforms have the movies & TV series you want to watch
Filter & Sort	Quick filter between List / Watching / Watched views with 4 sort modes
FlowMode	Intelligent algorithm sequences your unwatched list to optimise engagement and prevent fatigue
Episode Tracking	Track episode progress for TV series directly from the card
Collection Order	For movie franchises, CineQ shows the correct chronological watch order automatically
Themes	Toggle between premium Dark and Light modes
Settings	Account management, username, theme, watchlist preferences, and JSON data backup
Release Notifications	Get notified when new episodes air or upcoming movies are released
In-App Feedback	Send bug reports and feedback securely with attachments directly from the app

---

Quick Start

1. Clone the Repo

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

2. Get a TMDB API Key (Free)

1. Create a free account at themoviedb.org
2. Go to Settings → API → Create → Developer
3. Copy your Read Access Token (the long Bearer token)
4. Set it as an Environment Variable named TMDB_TOKEN in your Vercel project settings.

3. 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 (top of file, firebaseConfig object)
4. Enable Authentication → Email/Password
5. Enable Firestore Database (start in production mode)

4. Set Firestore Security Rules

Go to Firestore → Rules and paste:

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

5. Set Environment Variables

In your Vercel project settings, add the following Environment Variables:

• TMDB_TOKEN (From TMDB)
• FIREBASE_PROJECT_ID (e.g., cineq-92fea)
• FIREBASE_WEB_API_KEY (From Firebase Project Settings)
• UPSTASH_REDIS_REST_URL & UPSTASH_REDIS_REST_TOKEN (From Upstash Redis)
• RESEND_API_KEY, RESEND_FROM, & FEEDBACK_TO (From Resend)

6. Deploy or Open Locally

Open index.html directly in a browser, or deploy free on Vercel.

---

Deploy to Vercel (Recommended)

1. Push this repo to GitHub (already done)
2. Go to vercel.com → Add New Project
3. Import the CineQ GitHub repository
4. Framework Preset: select Other (it's a static site)
5. Root Directory: leave as / (default)
6. Build Command: leave empty
7. Output Directory: leave as . or empty
8. Click Deploy - done! ✅

Vercel auto-deploys on every git push to main.

---

Tech Stack

Tech	Purpose
HTML5 / CSS3 / Vanilla JS	Core frontend - zero frameworks, ultra-lightweight
Firebase Auth	Secure user authentication
Cloud Firestore	Real-time database for watchlists
TMDB API v3	Movie & TV data (1M+ titles)
Lucide Icons	Beautiful SVG icon set
Google Fonts	Outfit (headings) + Inter (body)
Google Calendar API	Schedule watch events
Vercel Edge & Serverless	Secure API proxy and backend email processing
Resend	Sending secure emails for verification and feedback
Upstash Redis	Rate limiting to prevent spam and abuse

---

Project Structure

CineQ/
├── index.html                        # Main app entry point
├── robots.txt                        # SEO crawler rules
├── sitemap.xml                       # SEO sitemap
├── vercel.json                       # Vercel deployment config
├── package.json                      # Node dependencies & scripts
├── .gitignore                        # Git ignore rules
├── LICENSE                           # MIT License
├── README.md                         # Documentation
├── api/                              # Vercel Serverless Functions
│   ├── feedback.js                   # Handles bug reports & feedback
│   ├── request-schedule.js           # Handles Calendar Schedule approval flow
│   ├── send-verification.js          # Handles email verification
│   └── tmdb.js                       # Secure TMDB API proxy
├── scripts/
│   ├── build.js                      # Build script to generate env.js
│   └── test_csv.js                   # Development script for parsing CSV
└── assets/
    ├── css/
    │   ├── style.css                 # Complete styling with golden theme
    │   └── ticket.css                # Styling for the ticket export feature
    ├── js/
    │   └── app.js                    # App logic, TMDB API, Firebase, UI
    └── images/                       # App logos, posters, and icons

---

Security

• Firebase Authentication with friendly error handling
• Per-user data isolation (users can only access their own watchlist)
• XSS protection (escHtml) on all user-facing content
• Server-side TMDB API proxy to securely hide API tokens
• Email verification layer to prevent unverified accounts from exploiting storage
• Disposable/temporary email blocklist on signup
• SFW filter enabled by default for search & explore
• Firestore security rules enforce server-side access control
• No raw error messages exposed to users

---

Roadmap

• Personal Experience system (5 hearts + notes)
• New Release & Upcoming Episode Notifications
• Search within your own watchlist
• Google Sign-In (one-click login)
• Statistics dashboard & ticket export
• Friend system & shared watchlists
• PWA support (install on phone)
• Import from Letterboxd / IMDb
• Light/Dark mode toggle
• Episode-by-episode progress tracking
• Sort by score, year, name, date added
• FlowMode intelligent sequencing
• Collection watch order guides

---

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