Movie Wishlist with Supabase Integration

A modern web application for managing your movie and TV show wishlist with cross-device synchronization.

✨ Features

🎬 Movie & TV Show Management

• Search movies and TV shows using The Movie Database (TMDB) API
• Smart search by title, actor, or director
• Separate wishlists for movies and TV shows
• Detailed information including posters, cast, director, and genres

🔄 Cross-Device Sync

• Supabase Integration: Your data syncs across all devices
• Offline Support: Works without internet, syncs when back online
• Data Migration: Existing localStorage data automatically migrated
• Real-time Status: Visual indicators show sync status

🎨 User Experience

• Responsive design for desktop and mobile
• Genre filtering and multiple sorting options
• CSV export/import functionality
• Clean, modern interface with smooth animations

🚀 Quick Start

1. Set Up Supabase (Optional)

1. Create account at supabase.com
2. Create new project
3. Go to SQL Editor and run the schema from supabase-schema.sql
4. Get your Project URL and anon key from Settings → API
5. Update credentials in js/supabase-client.js

2. Set Up the TMDB Proxy

TMDB requests go through a Vercel serverless function (api/tmdb.js) so the API token never reaches the browser.

1. Get a TMDB API Read Access Token from themoviedb.org
2. Set it as an environment variable named TMDB_BEARER_TOKEN — in the Vercel dashboard (Production/Preview/Development) for deployed use, and in a local .env.local file for local dev

3. Run the App

The app now uses ES modules and a serverless function, so it needs to be served (opening index.html directly via file:// won't work).

npm install -g vercel   # if you don't already have it
vercel dev

Then open the printed local URL, sign up/in, and start searching for movies and TV shows.

4. Run Tests

npm install
npm test

🔧 Configuration

Without Supabase

The app works perfectly with just localStorage - your data stays on your device.

With Supabase

Update these values in js/supabase-client.js:

const SUPABASE_URL = 'your-project-url'
const SUPABASE_ANON_KEY = 'your-anon-key'

📱 How It Works

Local Mode (Default)

• Data stored in browser localStorage
• Works offline
• Device-specific storage

Cloud Mode (With Supabase)

• Sign up/in with email and password
• Data synced to Supabase database
• Access from any device
• Offline support with sync when online

🎯 Usage

1. Search: Use the search bar to find movies or TV shows
2. Add to Wishlist: Click the "+" button on search results
3. Manage Lists: View your wishlists in the main interface
4. Filter & Sort: Use genre filters and sorting options
5. Export Data: Download your wishlist as CSV
6. Sign In: Enable cloud sync for cross-device access

🛠️ Technical Details

Stack

• Frontend: Vanilla HTML, CSS, JavaScript (ES modules, no bundler)
• Backend: A single Vercel Edge Function (api/tmdb.js) proxying TMDB
• Database: Supabase (PostgreSQL)
• API: The Movie Database (TMDB)
• Authentication: Supabase Auth
• Tests: Vitest, covering the pure CSV-parsing and search-ranking modules

Architecture

• Hybrid storage (localStorage + Supabase)
• Offline-first design, with a service worker caching the app shell for installable/offline use
• Progressive enhancement
• Mobile-responsive

Security

• Row Level Security (RLS) in Supabase
• User-specific data access
• The TMDB API token lives only in a server-side environment variable and is never sent to the browser — all TMDB calls go through /api/tmdb
• The Supabase anon key is shipped to the client, which is safe by design: it only grants what RLS policies allow per authenticated user

📂 File Structure

movie-library/
├── index.html               # Main application
├── styles.css                # Styling
├── manifest.webmanifest      # PWA manifest
├── icon.svg                  # App icon (also the favicon)
├── sw.js                      # Service worker (app-shell caching)
├── api/
│   └── tmdb.js                 # Vercel Edge Function proxying TMDB (hides the API token)
├── js/
│   ├── main.js                  # Entry point — boots the app, registers the service worker
│   ├── movie-library.js         # App orchestrator (state, rendering, wiring)
│   ├── tmdb-client.js           # Calls /api/tmdb, caches in-flight detail lookups
│   ├── supabase-client.js       # Supabase Auth + data sync
│   ├── auth-modal.js            # Sign in/up/reset dialog
│   ├── search-ranking.js        # Pure result-ranking helpers (unit tested)
│   └── csv.js                   # Pure CSV parse/build helpers (unit tested)
├── supabase-schema.sql       # Supabase table/RLS definitions
├── test-import.csv           # Sample CSV data
├── package.json               # Vitest only — no build step
└── README.md                  # This file

🎨 Features Overview

• Smart Search: Find content by title, actor, or director
• Genre Filtering: Filter by movie/TV genres
• Multiple Sorting: Sort by title, year, or genre
• CSV Export/Import: Backup and restore your data
• Responsive Design: Works on all screen sizes
• Real-time Sync: Changes appear instantly across devices
• Offline Support: Use without internet connection

🔮 Future Enhancements

• Social features (sharing wishlists)
• Streaming service integration
• Personalized recommendations
• Mobile app versions
• Advanced filtering options

🤝 Contributing

This is a personal project, but suggestions and improvements are welcome!

📄 License

Open source - feel free to use and modify for your own projects.

---

Enjoy building your perfect movie watchlist! 🍿🎬