Have you ever felt like existing movie trackers (like Trakt or Letterboxd) are either too clunky, lack TV show support, or just look outdated? I felt the same way, so I decided to build my own from scratch.
Enter Cinehaul — a community-driven platform for discovering, tracking, and instantly streaming movies and TV series.
In this post, I want to break down the tech stack I chose, why I avoided heavy UI libraries, and how I handled the data layer for a highly relational social app.
🛠️ The Tech Stack
When deciding on the architecture, I wanted something blazing fast and edge-ready without a massive learning curve:
Framework: Next.js 14 (App Router). The transition to Server Components made fetching millions of movies incredibly fast.
Database: LibSQL / SQLite (using Turso). For a read-heavy app where users are constantly loading activity feeds, edge SQLite is a game-changer. Ultra-low latency and incredibly easy to manage.
Styling: Pure Vanilla CSS. No Tailwind, no bulky component libraries.
Data Source: The TMDB API for fetching real-time metadata and high-res posters.
🎨 The Challenge of Pure Glassmorphism
One of the biggest hurdles was making the UI look incredibly premium without tanking browser performance. I wanted a UI that felt like a native Apple TV or Netflix interface.
I leaned heavily into CSS backdrops (backdrop-filter: blur(20px)) combined with semi-transparent rgba borders to give every card a frosted-glass effect. By keeping it in Vanilla CSS, I avoided the bloated class names of utility frameworks and kept the stylesheets clean and modular.
🚀 Progressive Web App (PWA) Support
Since people watch and track movies on their phones, making it a mobile app was essential. Instead of dealing with React Native, I configured Cinehaul as a PWA using next-pwa. Now, users can tap "Add to Home Screen" and it launches as a completely standalone, full-screen native app experience.
🎮 The "CineScore" System
Cinehaul isn't just about rating movies; it's gamified. I built a custom algorithm that rewards users with points ("CineScore") for rating, reviewing, and building their friend network, eventually unlocking a "Tastemaker" VIP badge. Writing the SQL joins to aggregate scores dynamically without slowing down the profile page was a really fun challenge.
Check it out!
The platform is completely free to use (no ads, no premium tiers). You can even stream the movies right there in the browser!
If you're a movie buff, or just love checking out new Next.js projects, I'd love for you to poke around and let me know what you think of the performance and UI.
🔗 Live Demo: cinehaul.vercel.app
Let me know in the comments if you want a deeper dive into the SQLite schema or how I handled the TMDB API integration!
Top comments (0)