View all projects
Case / 03Frontend Developer

Movies App

Context

Movie app using public API with favorites, filters and Next.js caching.

Movies App

Challenge

An external catalog fights the perception of speed: every view that remounts repeats requests, filters get lost while navigating, and favorites must survive reloads. Hundreds of titles had to feel immediate to explore without hiding the real state of the network.

Approach

I organized the project around a service layer (movie-service) with its own types and mock fallback data, so views never know the API details. The Next.js server caches requests and each route ships its own loading skeletons, making navigation feel continuous. Favorites live in Zustand and persist; search and filters combine on /explore, and the UI is composed from Radix UI primitives (dialogs, selects, tooltips) plus the Embla carousel on the home page.

Outcome

A fast, consistent discovery interface: the catalog is fetched once and reused, favorites persist across visits, and detail and explore routes keep their loading states. Separating service, state and UI makes it possible to add catalog views without rewriting the data logic.

Responsibilities

  • - Catalog with combinable search and filters on the /explore route over the public movies API
  • - Persistent favorites with Zustand: a favorite button on every title and a dedicated /favorites page
  • - Centralized service layer (movie-service) with its own types and mock data as fallback
  • - Next.js request caching and loading skeletons on /explore and /movie/[id]
  • - Home cover carousel with Embla and reusable movie cards
  • - Light/dark theme with next-themes and action toasts with Sonner

Technologies

NextJS
TypeScript
Tailwind
Zustand