Join our team of writers
Hassan MohammadzadehHassan Mohammadzadeh
Back to projects

ShadFilm TV — Movie & Series Discovery Platform

View demo
My role: Full frontend architecture and implementation with Next.js (NegaTV API integration)
Next.jsReactTypeScriptTailwind CSSNegaTV APISWRISRnext/image

Overview

tv.shadfilm.ir is ShadFilm's sister platform — a modern discovery and browsing interface for movies and series, built entirely with Next.js, that pulls all of its content — posters, synopses, IMDb ratings, genres — live from the NegaTV API. Unlike the main ShadFilm platform, which is a full-stack build, this project is a pure frontend-architecture exercise: how to build a fast, smooth, professional-grade experience on top of a third-party API using Next.js's best rendering patterns.

Key Features

  • An extensive movie and series catalog with posters, IMDb ratings, genres, and synopses, all served through a live connection to the NegaTV API
  • A dynamic homepage with curated rows (top-rated, latest, drama, thriller, action, and more)
  • A catalog page with genre filtering and sorting by IMDb rating or release date
  • A dedicated detail page for every title with full information and Play / Save actions
  • A "Saved" section for bookmarking and quickly returning to favorite titles
  • A fully responsive, mobile-first design
  • Progressive, smart poster image loading with skeleton loading states while data streams in from the API

Technical Architecture

The entire project is built with Next.js (App Router) and TypeScript, using a hybrid rendering strategy: catalog pages are rendered with ISR for near-instant load times while minimizing load on the NegaTV API, and pages that need fresh data are served via SSR. Instead of calling the third-party API directly from the client, a BFF (Backend-for-Frontend) layer is implemented with Next.js Route Handlers, which hides the NegaTV API's credentials and connection details from the browser while normalizing and caching responses. Client-side state and caching (such as the saved-titles list) is handled with SWR, keeping data fresh with no perceptible delay. Styling is done with Tailwind CSS, images are optimized with next/image, and SEO metadata (titles, descriptions, Open Graph tags) is generated dynamically per page so every movie and series page surfaces well in search results.

My Role

I was fully responsible for the frontend architecture, the complete UI implementation in Next.js and TypeScript, building the BFF layer for a secure and efficient connection to the NegaTV API, and performance optimization across rendering, image caching, and SEO.