WatchLog - Movie Tracker

Web application to manage your movie library. Track watched, pending, and in-progress movies with automatic TMDB synchronization.

📖 Read this in: Español

🌐 Live Demo

https://watchlog-vtlx.netlify.app/ - Hosted on Netlify

See all features in action: authentication, adding movies with poster search, rating system, filters, and more.

📋 Table of Contents

• Description
  • Why does it exist?
  • Principles
• Features
  • Core
  • Search and Filtering
  • Data and Synchronization
  • Interface
• Requirements
• Installation
• Usage
• Deploy
• Technologies
• Project Structure
• Development
• License
• Resources
• Future Improvements

📖 Description

Web application to manage your movie library. Track watched, pending, and in-progress movies with automatic TMDB synchronization.

Why does it exist?

WatchLog was born from the need to have a single centralized place to manage all your entertainment content. Tired of using third-party applications or CSVs to record what movies you watched.

Future vision: Expand beyond movies to include TV series and books. A unified space where you own your data and can access it from any device, anytime.

Principles

• 🎯 Centralized - All your content in one place
• 🔒 Private - Your data, your server, no spying algorithms
• 📱 Accessible - From mobile, tablet or desktop
• 🚀 Open - Open source, you can fork and customize

✨ Features

Core

• 🎬 Complete CRUD - Create, read, update and delete movies
• 🔐 Secure Authentication - Token-based with database validation
• 💾 Persistence - All data stored in PostgreSQL (Supabase)

Search and Filtering

• 🔍 Global Search - By title or year across your entire library
• 🎭 Filter by Status - Pending, Watched, Watching, Favorite
• 📊 Statistics - Visualize movie count by status

Data and Synchronization

• 🖼️ Automatic Posters - TMDB synchronization
• 💻 Background Sync - Non-blocking interface for poster sync

Interface

• 📱 Responsive Design - Works on mobile, tablet and desktop
• ⚡ Ultra Fast - Instant loading, built with Vite

📋 Requirements

• Node.js 16 or higher
• npm or yarn
• Account on Supabase (free)
• API key from TMDB (free)

🚀 Installation

1. Fork the repository

👉 Click "Fork" button on GitHub to create your own copy.

Then clone your fork:

git clone https://github.com/YOUR-USERNAME/WatchLog.git
cd WatchLog

2. Install dependencies

npm install

3. Configure Supabase

1. Create a free account on Supabase
2. Create a new project
3. Go to SQL Editor and execute SUPABASE_SETUP.sql from this repo
4. Copy your credentials:
   • VITE_SUPABASE_URL: Settings → API → Project URL
   • VITE_SUPABASE_ANON_KEY: Settings → API → anon key

4. Configure environment variables

Create a .env file in the root (never commit this!):

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your_anon_key
VITE_TMDB_API_KEY=your_tmdb_api_key
VITE_AUTH_TOKEN=your_secret_token_here

⚠️ Security: Add .env to .gitignore - it's already there, never push this file!

Reference: See .env.example for the structure

5. Get TMDB API Key (Optional but Recommended)

1. Register on TMDB
2. Create an API key (free tier available)
3. Add it to .env as VITE_TMDB_API_KEY

6. Create your auth token

Generate a strong random token (no spaces):

# Linux/Mac
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

# Or use any online generator: https://random.org/strings/

Then:

1. Add it to .env as VITE_AUTH_TOKEN
2. Add it to Supabase: SQL Editor → Insert into valid_tokens table

7. Start development

npm run dev

Open http://localhost:3000

💻 Usage

Public Access (Read-Only)

• 👁️ View your movies
• 🔍 Search by title or year
• 🎭 Filter by status
• 📊 View statistics

Authenticated Access (Write)

Enter your token in the app to:

• ➕ Add new movies
• ✏️ Change movie status
• 🗑️ Delete movies
• 🔄 Auto-sync posters with TMDB

🚀 Deploy

Netlify (Recommended)

1. Push to GitHub
2. Connect to Netlify
3. Automatic configuration:
   • Build: npm run build
   • Publish: dist
4. Add environment variables in dashboard
5. ✨ Automatic deploy on each push

🛠️ Technologies

Layer	Technology	Purpose
Frontend	React + Vite	Interactive UI
Styles	Tailwind CSS	Responsive styling
Icons	Lucide React	Modern icons
Backend	Supabase	PostgreSQL + REST API
External Data	TMDB API	Movie information
Auth	Token-based	Security

📁 Project Structure

watchlog/
├── src/
│   ├── app.jsx              # Main component
│   ├── config.js            # Configuration
│   ├── api/
│   │   ├── supabase.js      # REST client
│   │   └── tmdb.js          # TMDB client
│   ├── auth/
│   │   └── useAuth.js       # Auth hook
│   └── components/
│       ├── MovieCard.jsx    
│       ├── AddMovie.jsx     
│       ├── Filters.jsx      
│       └── Stats.jsx        
├── index.html
├── package.json
├── vite.config.js
├── .env.example
└── README.md

💻 Development

Available Scripts

npm run dev      # Development with HMR
npm run build    # Optimized build
npm run preview  # Build preview

Environment variables in development

Use .env.example as reference for new contributors.

📄 License

This project is under the MIT license.

You are free to:

• ✅ Use in personal projects
• ✅ Use in commercial projects
• ✅ Modify the code
• ✅ Distribute

Conditions:

• 📝 Include copy of the license

See LICENSE for more details.

🚀 Future Improvements

Phase 2 - Export & Analytics

• CSV/JSON export functionality
• Advanced filters (by year range, director, etc.)
• Sort options (by rating, date added, etc.)

Phase 3 - TV Series Support

• Separate series table in database
• TMDB TV API integration
• Series card component with episodes/seasons
• Series management (add, edit, delete, rate)
• Search and filter for series

Phase 4 - Books Support (Q2 2026)

• Separate books table in database
• Google Books API or OpenLibrary integration
• Book card component with author/ISBN
• ISBN search capability
• Books management (add, edit, delete, rate)

Phase 5 - Advanced Features

• Custom lists and collections
• Dark/Light theme toggle
• ...

---

⬆️ Back to top