Watchinema

Watchinema is a zero-backend Vue 2 SPA that turns TMDB's API into a browsable, cinematic movie discovery experience. Users browse trending/top-rated/genre-sorted films, watch trailers, and curate a local watchlist — all without authentication or server infrastructure.

Problem

• Exploring TMDB data typically requires navigating a generic API or third-party site with poor UX

• Building a full-stack app for a portfolio/movie-browsing use case adds unnecessary complexity (auth, database, state management)

Approach

• Flat, component-driven Vue 2 architecture with scoped CSS and CSS custom properties for a cohesive dark cinema theme — no CSS framework

• Each view fetches its own data via a shared Axios instance; no Vuex/Pinia, no global state beyond localStorage for the watchlist

• SEO handled declaratively per route via vue-meta (Open Graph, Twitter Card, dynamic titles)

• Loading states are uniform through a reusable Skeleton shimmer component across all views

• YouTube trailer embedding via vue-youtube, triggered lazily on user interaction

Impact

• Total source footprint of ~1,200 lines across 25 files — minimal surface area, maximal feature density

• Removed Firebase/auth/Vuex in a cleanup commit, proving that most movie-browsing features need no backend at all

• Production-ready SPA deployable to any static host with zero runtime dependencies beyond the browser