Movie List Application

Author: Oleksandr Vlasov
Role: React Developer
Tech Stack: React, TypeScript, React Query, Axios, Tailwind CSS, shadcn/ui, Vite, TMDB API, Vercel
Live Site: movie-list-app-lake-chi.vercel.app
GitHubRepo: movie-list.git

Project Overview

The Movie List App is a web application where users can filter, watchlist toggle, and browse movies using real TMDB data. It has a clean, responsive design and lets users view details and manage a watchlist with a smooth, easy-to-use experience.

Technology Stack

• React + TypeScript: Strongly typed, component-based architecture.
• React Query (TanStack Query): Data fetching, caching, and state synchronization.
• Axios: API client for TMDB requests.
• Tailwind CSS + shadcn/ui: Modern, responsive, and accessible UI components.
• Vite: Fast development and build tooling.
• TMDB API: Provides real movie data (popular, search, details).
• Vercel: Deployment and hosting.

Development Highlights

• Implemented movie list, filters, and watchlist toggle with optimistic updates.
• Designed responsive movie cards and detail pages optimized for mobile and desktop.
• Built custom hooks (usePopularMovies, useMovieDetails, useSearchMovies, useToggleWatch) for clean data logic.
• Structured the app with modular components for maintainability and scalability.
• Focused on performance and UX with React Query caching and background updates.

In this project, I built a movie app with filters, and a watchlist. The difficult part was learning optimistic updates and using useMutation with onMutate in React Query. I solved this by testing different cases until the watchlist worked fast with instant feedback.