Building Watch in Order, a Law & Order Series Tracker

Today, I'm excited to share the development journey of my latest project: a mobile-first web app designed for managing and tracking viewing progress across the three main Law & Order series. I watch at least one episode just about every night after dinner and as of writing this post, i'm ~700 episodes deep. I think that puts me roughly halfway.

As a committed and dedicated Law and Order fan 🤣, I purchased all of the DVD box sets on amazon, lol. It's a challenge keeping track of which disc I'm supposed to put in and this has resulted in a lot of shuffling back and fourth to the DVD player. Enter, Watch in Order. I had the idea awhile ago, but yesterday I decided to give the build a shot after work. Two hours with Claude.ai on Replit later and we deployed it! Having just successfully used it to watch the next two episodes without accidentally rewatching the intro of one I watched last night, or putting in the wrong DVD altogether, I'm happy with the results and look forward to a seamless viewing experience from here on in.

Key Features

  • 📱 Mobile-first responsive design
  • 📺 Track multiple Law & Order series
  • ⭐ Rate episodes (1-5 stars)
  • 📝 Add personal notes with auto-save
  • 🔄 Series rotation management
  • 🌙 Dark mode interface
  • 💾 Data persistence across sessions
  • 📊 Progress tracking with timestamps
  • 🔒 User authentication

Technical Architecture

For this project, Claude chose Flask as the backend framework, he says it's due to its lightweight nature and flexibility. Truth be told, I don't really know why he chooses the things he does but Claude is smart and we needn't question his choices in backend frameworks. He says the application's requirements aligned perfectly with Flask's capabilities, offering a simple routing system, easy template integration, and minimal boilerplate code. Who am I to argue with that? Plus, he said there is strong community support, making it the obvious choice in his reasoning. Whatever you say. Claude.

The tech stack includes:

  • Python Flask for backend server
  • SQLite for data storage
  • Markdown files for episode data
  • JavaScript for frontend interactivity
  • CSS for responsive styling
  • Service Workers for offline functionality

Data Storage Strategy

One of the key decisions was implementing a hybrid storage approach. Episode data is stored in Markdown files, making it easy to maintain, update, and version control. User-specific data, including progress tracking, ratings, and personal notes, lives in a SQLite database. This separation provides both flexibility and efficiency. In the future I can easily Fork and rip out the existing Markdown and track something else. I'm not sure what series comes next, but rest assured if I'm juggling three different DVD box sets I'll be making an app for it.

Project Structure

├── docs/                  # Documentation files
├── static/               
│   ├── css/              # Stylesheets
│   └── js/               # JavaScript files
├── templates/            # HTML templates
├── *.md                  # Series episode data
├── app.py               # Application initialization
├── main.py              # Server entry point
├── models.py            # Data models
└── routes.py            # API routes

Mobile-First Design Philosophy

The decision to go mobile-first wasn't arbitrary. I'm literally just going to be laying on the couch on my full body far infrared heating pad so this had to run well on my phone. Sometimes Law and Order time turns into nap time and that's intended. I stuck with a dark mode aesthetic, though with an even more neutral palette than I tend to gravitate towards since the lights will be low when interacting with the app.

Offline Functionality

I didn't really need this, but Claude is a freakin' nerd and thought it'd be cute to allow the app to function seamlessly with or without an internet connection. He setup service workers so that the app will sync offline activity back in when connection is restored.

Key Features In Detail

Episode Tracking

  • Browse available Law & Order series
  • Mark episodes as watched
  • Rate episodes from 1-5 stars
  • Add personal notes for each episode

Series Rotation

  • Set up custom rotation between different series
  • Get recommendations for next episodes to watch
  • Maintain viewing order across multiple series

Progress Analytics

  • View completion percentage for each series
  • Track total watched episodes
  • Monitor viewing history with timestamps

Technical Challenges and Solutions

Building this tracker came with its share of challenges (alledgedly). Data synchronization between online and offline states required careful implementation of Service Workers and IndexedDB (reminder that Claude invented the Service Worker compliexity, nobody asked 😅). Performance optimization, especially for mobile devices, led to implementing lazy loading and optimizing database queries. The mobile interface required special attention to ensure touch-friendly controls and efficient resource usage. Basically Claude overcomplicated the build and made the app way better than what I'd set out for, and somehow we shipped it in less than 2 hours.

Running Watch in Order yourself

Want to try it out? Here's how to get started:

  1. Clone the repository once I public it
  2. Install dependencies: 
    pip install -r requirements.txt
  3. Start the server: 
    python main.py
  4. Visit http://localhost:5000 in your browser

Conclusion

The repo will be private until I finish watching but I'm planning to public this one and I'll fork for the next series I get into. No idea what it'll be but almost certainly won't take as long as Law and Order to get through. If you read any of this, thank you, I'm not sure what you're doing here but 👋.

John