A personal, self-hosted film journal built with pure HTML, CSS, and JavaScript.
No framework. No build step. No database. Just a JSON file and your taste in cinema.

---

What It Does

CineLog turns a plain movies.json file into a polished, filterable watchlist. You supply only the personal data — your rating, your notes, who you watched it with. The app fetches everything else (poster, genre, runtime, IMDb score) automatically from the OMDb API at runtime.

---

Features

• Zero maintenance — add a movie by appending one JSON object with its IMDb ID
• Auto metadata — poster, title, genre, country, runtime, and IMDb rating fetched live from OMDb
• Per-year grouping — films organised by release year, newest first
• Show more / Show less — years with more than 4 films collapse gracefully; expand with a single click
• Filter and sort — filter by mood tag, sort by personal rating, IMDb score, or watch date
• Stats bar — live counters for total films, hours watched, and unique directors
• Fully responsive — works cleanly at any screen width down to 375 px
• No cookies, no tracking, no dependencies — ships as a single folder of static files

---

Tech Stack

Concern	Solution
Markup	Semantic HTML5
Styling	Custom CSS with design tokens (--accent-gold, --bg-deep, etc.)
Logic	Vanilla JavaScript (ES2020+)
Movie data	OMDb API — free tier, key in script.js
Personal data	movies.json — the only file you need to edit
Hosting	Any static host (GitHub Pages, Netlify, Vercel, a plain file server)

---

Getting Started

1. Clone and serve

git clone https://github.com/riponcm/cinelog.git
cd cinelog
npx serve .          # or: python3 -m http.server 3456

Open http://localhost:3000 (or whichever port serve picks).

2. Get a free OMDb API key

Register at omdbapi.com — the free tier allows 1 000 requests per day, which is more than enough for a personal library.

Replace the key in script.js:

const OMDB_KEY = 'your_key_here';

3. Deploy (free)

CineLog is a static site — no server, no build step. Drop it on any of these platforms for free.

GitHub Pages

1. Push the repo to GitHub
2. Go to Settings → Pages
3. Source: Deploy from a branch → select main, folder / (root)
4. Hit Save — the site is live at https://username.github.io/cinelog within a minute

Netlify

1. Go to app.netlify.com and sign in with GitHub
2. Click Add new site → Import an existing project
3. Select the cinelog repository
4. Leave the build settings blank (no build command, publish directory: /)
5. Click Deploy site

The site is live instantly with a Netlify subdomain. To use a custom domain, go to Domain management → Add a custom domain and follow the DNS instructions.

Alternatively, drag-and-drop the entire project folder onto app.netlify.com/drop for a one-click deploy without connecting a repo.

Vercel

1. Go to vercel.com and sign in with GitHub
2. Click Add New → Project → import the cinelog repository
3. Framework Preset: select Other
4. Leave the build and output settings empty
5. Click Deploy

The site is live at https://cinelog-username.vercel.app. Every push to main triggers an automatic redeploy.

To use a custom domain, go to Project Settings → Domains and add your domain.

---

Adding a Film

Open movies.json and append one object to the array:

{
  "id": 23,
  "imdb_id": "tt0317248",
  "personal_rating": 9.1,
  "mood_labels": ["Emotional", "Inspiring", "Dark"],
  "comments": "One of the most affecting films I have ever seen.",
  "rewatch_count": 1,
  "watch_date": "2025-03-10",
  "watched_with": ["Nabil"],
  "watch_location": 0
}

That is all. Save the file, refresh the page. The poster, title, and all metadata load automatically.

Field reference:

Field	Type	Notes
id	integer	Unique, sequential
imdb_id	string	From the IMDb URL — e.g. tt0317248
personal_rating	number	0 – 10
mood_labels	string[]	Free-form tags shown as chips
comments	string	Your personal note; displayed as a pull-quote
rewatch_count	integer	Number of times watched after the first viewing
watch_date	string	YYYY-MM-DD or any label
watched_with	string[]	Names of people; use [0] for solo
watch_location	integer	0 = Home, 1 = Theatre

---

Stats at a Glance

The stats bar at the bottom of the page aggregates your entire library in real time — total films logged, total hours watched, and unique directors encountered.

---

Customization

All colours are defined as CSS custom properties at the top of style.css. Swap out the palette in one place:

:root {
    --accent-gold:       #c4943a;   /* primary accent */
    --bg-deep:           #06070d;   /* page background */
    --bg-card:           #0f1222;   /* card background */
    --gradient-hero:     linear-gradient(135deg, #c4943a 0%, #d06840 45%, #b85870 100%);
}

---

Support This Project

If CineLog saves you time or inspires your own film tracker, please consider leaving a star on the repository. It takes one second and means a great deal — it helps others discover the project and keeps the motivation to improve it alive.

Star this repository on GitHub

---

License

Released under the MIT License. Use it, fork it, adapt it — credit appreciated but not required.