Web Dev Day 19: CineMetrics Architecture & PRD

📅 Date: June 24, 2026

🧠 Mood: The Architect 🏗️

🔥 Topic: Web Dev Day 19: CineMetrics Architecture & PRD

📐 Building Like a Software Engineer

After spending weeks grinding through complex recursion and Divide & Conquer algorithms, I needed to channel that logic into something tangible. As an engineering student, writing raw code is only half the battle. The real challenge is system design. Today, I officially kicked off my new Full-Stack project: CineMetrics.

CineMetrics is a movie analytics and tracking system. But instead of blindly opening VS Code and typing, I treated this like a professional industry project. I wrote a comprehensive Product Requirements Document (PRD) and established a strict decoupled architecture before writing a single line of JavaScript.

---

📂 The Decoupled Architecture

A massive mistake junior developers make is mixing their server code and UI code in the same folder. For CineMetrics, I established a strict boundary between the client and the server.

CineMetrics/
├── cinemetrics-backend/    # The Node.js / Express Server
│   ├── controllers/        # Business Logic
│   ├── models/             # Mongoose Schemas
│   ├── routes/             # API Endpoints
│   ├── CineMetrics_Detailed_PRD.md
│   └── server.js           # Entry Point
└── cinemetrics-frontend/   # The Vanilla JS / UI Client
    ├── index.html
    ├── style.css
    └── app.js              # Fetch API Logic

1. The Product Requirements (Phase 1)

According to my PRD, Phase 1 focuses strictly on core CRUD operations and data processing. Users must be able to add movies, update their watch status, and crucially, view data-driven analytics. The system will track total watched movies, calculate average ratings, and pinpoint the user's top genre.

2. The MongoDB Schema Design

The data model is clean and validated. Every movie requires a title and an array of genres. We also track a numerical rating (1-5) and a boolean isWatched flag. Proper schema validation at the database level prevents dirty data from breaking our analytics engine later.

---

🎯 What's Next?

The blueprint is finalized. Tomorrow, I dive into the cinemetrics-backend directory to set up the Express server and write the most complex part of Phase 1: The MongoDB Aggregation Pipeline for the analytics engine.