SevenArtList

Centralize your watchlist. Sync with your partner. Gamify your cinema experience.

Report a bug • Request a feature

🇬🇧 English • 🇫🇷 Français

---

Overview

SevenArtList is an open-source web application designed to help you track your media consumption (movies, series, and animes) in one place.

The name comes from the "7th Art" (Cinema) combined with the concept of a "Watchlist". Whether you're a solo viewer or part of a couple, SevenArtList offers real-time synchronization to manage your watchlists together, complete marathons, and visualize your progress through advanced statistics.

Features

Feature	Description	Status
Data Infrastructure	Supabase Setup & PostgreSQL Schema	[Done]
Auth System	Login, Sessions & Middleware	[Done]
Media Search	TMDB API (Functional), Debounced Real-time Search, Gold Standard Filtering	[Done]
Movie Details (Modal)	Immersive modal with TMDB data and casting	[Done]
Watchlist	Personal & Shared Tracking	[Planned]

Tech Stack

Next.js

Supabase

Tailwind

TMDB

Watchmode

Project Structure

SevenArtList/
├── docs/                   # SQL Schemas & Documentation
├── public/                 # Static assets (images, logos)
├── src/
│   ├── app/                # Next.js App Router
│   │   ├── actions/        # Server Actions (movie.ts, search.ts)
│   │   ├── login/          # Auth pages
│   │   └── ...
│   ├── components/         # React Components
│   │   ├── ui/             # Shadcn UI (dialog, badge, skeleton, etc.)
│   │   ├── movie-card.tsx
│   │   ├── movie-details-dialog.tsx
│   │   └── ...
│   ├── lib/                # Shared utilities
│   │   ├── services/       # TMDB API Service logic
│   │   └── supabase/       # Config client/middleware config
│   └── services/           # Backend / Auth logic
├── tasks/                  # Tasks, Lessons & Context
├── next.config.ts          # Next.js configuration
├── package.json            # Dependencies & Scripts
└── ...

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

1. Clone the repository:

   git clone https://github.com/Rateur/SevenArtList.git

2. Install dependencies:

   npm install

3. Set up your environment variables (see .env.example).
4. Run the development server:

   npm run dev

Open http://localhost:3000 with your browser to see the result.

Database Setup

1. Create Project: Create a new project on Supabase.
2. SQL Schema: Copy the content of docs/database_schema.sql and execute it in the SQL Editor of your Supabase project.
3. Environment Variables: Create a .env.local file from .env.example and fill in NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.

TMDB Setup

1. Create Account: Create an account on TheMovieDB.org.
2. API Settings: Go to the API section in your account settings.
3. Get Token: Retrieve the API Read Access Token (v4).
4. Environment Variables: Add it to your .env.local file under the variable TMDB_TOKEN.
5. Documentation: TMDB is used for metadata (sysnopsis, posters, casting).

Watchmode Setup (Streaming Links)

1. Create Account: Create a free account on api.watchmode.com.
2. Get API Key: Retrieve your API key from the dashboard.
3. Environment Variables: Add it to your .env.local file under the variable WATCHMODE_API_KEY.
4. Deep Links: Watchmode is used to obtain direct links to streaming services (Netflix, Prime, etc.), bypassing JustWatch redirects for a better UX.