🎬 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

Live Demo

🚀 Play with the app here: https://cinelog-2414.onrender.com/

Screenshots

1. Movie Explorer: Search, filter, and random pick.
2. Movie Detail: View info, rate, and read/write reviews.
3. Manage Page: Add new movies and manage genres.

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
copy .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

AI tools (such as Claude) were used as a helper for brainstorming, boilerplate, and troubleshooting. The core application logic, database architecture, client-side rendering (DOM manipulation), and UI styling were designed, implemented, and refined manually by the author.

License

MIT — see LICENSE

Video Walkthrough

A narrated walkthrough video should demonstrate the deployed app, search/filtering, Surprise Me!, and adding a new movie.