🎬 CineLog

A personal movie and TV show tracker with IMDb-style ratings, reviews, and a random recommendation feature. Built for CS5610 Project 2.

Author: Yufei Ge

Class: CS5610 Web Development — Course Link

Project Objective: Build a full-stack web application using Node.js, Express, Vanilla JavaScript (ES6 Modules), and the native MongoDB driver — without React, Mongoose, or server-side template engines.

Features

• Browse, search, and filter a collection of 1,000+ movies and TV shows
• Rate and review titles with a 1-5 star system
• Track watch status: Want to Watch, Watching, Completed, or Dropped
• Organize by genre tags
• 🎲 Random Pick — can't decide what to watch? Let CineLog choose for you
• Personal stats dashboard showing total watched, average rating, genre breakdown, and watch time

Tech Stack

• Frontend: Vanilla JavaScript (ES6 Modules), HTML, CSS
• Backend: Node.js + Express
• Database: MongoDB (Native Node.js Driver)
• Data Requests: Fetch API

Screenshots

Add screenshots here after running the app

Setup Instructions

Prerequisites

• Node.js 18+
• MongoDB (local or Atlas)

Installation

# Clone the repository
git clone <repo-url>
cd project2

# Install dependencies
npm install

# Copy environment config
cp .env.example .env
# Edit .env with your MongoDB URI

# Seed the database with 1,000+ movie records
npm run seed

# Start the server
npm start

# Or start in development mode with auto-reload
npm run dev

Open http://localhost:3000 in your browser.

Project Structure

project2/
├── server.js              # Express entry point
├── src/
│   ├── db/mongo.js        # MongoDB connection module
│   ├── routes/
│   │   ├── movies.js      # Movie CRUD API routes
│   │   ├── reviews.js     # Review CRUD API routes
│   │   ├── genres.js      # Genre CRUD API routes
│   │   └── stats.js       # Dashboard stats API route
│   └── seed/seed.js       # Database seeder (1,000+ records)
├── public/
│   ├── index.html         # Page 1 — Movie Explorer
│   ├── detail.html        # Page 2 — Movie Detail + Review
│   ├── manage.html        # Page 3 — Add Movie & Manage Genres
│   ├── css/
│   │   ├── main.css       # Global styles
│   │   ├── explorer.css   # Explorer page styles
│   │   ├── detail.css     # Detail page styles
│   │   └── manage.css     # Manage page styles
│   └── js/
│       ├── modules/
│       │   ├── api.js     # Fetch API wrappers
│       │   ├── components.js  # Reusable UI components
│       │   └── utils.js   # Utility functions
│       ├── explorer.js    # Explorer page logic
│       ├── detail.js      # Detail page logic
│       └── manage.js      # Manage page logic
├── package.json
├── .eslintrc.json
├── .prettierrc
├── LICENSE (MIT)
└── README.md

MongoDB Collections

Collection	Description
movies	Movie/show records (title, year, type, genres, platform, director, duration, poster_url)
reviews	User reviews (movie_id, rating 1-5, review_text, status, watch_date, rewatch_count)
genres	Genre tags (name, description)

AI Usage Disclosure

Claude Code (Anthropic) was used during the initial scaffolding and code generation of this project, with manual review and refinement by the author.

License

MIT — see LICENSE