Movie Discovery
Allows users to explore upcoming, now playing, popular, and top-rated movies through dynamic TMDB data.
// Front-End / API Integration Project
Movella
A cinematic movie discovery web app built with React, Vite, Sass, React Router, Swiper, React Slick, and the TMDB API.
2025
Front-End
01 / Overview
Movella is a responsive movie discovery application that lets users explore curated movie sections, view cinematic hero backdrops, search films, watch trailers, browse cast details, and save favourites locally. The project uses React, Vite, Sass, React Router, Swiper, React Slick, Context API, localStorage, and the TMDB API to create a polished front-end movie browsing experience with dynamic data and modern visual interaction.
Cinematic UI
Uses full-screen backdrops, animated hero sections, hover cards, and responsive layouts to create an immersive movie browsing experience.
Favourites System
Stores saved movies in localStorage using Context API for persistent client-side favourites.
02 / Key Features
01
Cinematic Landing Page
Displays a random full-screen movie backdrop and introduces users to the app through a simple entry flow.
02
Dynamic Movie Sections
Fetches upcoming, now playing, popular, and top-rated movie lists from the TMDB API and presents them in carousel-based sections.
03
Full-Screen Hero Experience
Highlights featured movies with backdrop imagery, metadata, overview text, trailer access, and favourite actions.
04
Movie Detail Pages
Shows detailed movie information including poster, backdrop, release date, runtime, genres, rating, overview, trailer, and cast members.
05
Search & Trailer Flow
Provides movie search through the navigation and opens available YouTube trailers in a custom modal.
06
Local Favourites
Uses Context API and localStorage to let users save, view, and remove favourite movies across sessions.
03 / Process
01
January 2025
Planning
Defined the movie discovery flow, landing experience, home sections, detail pages, and favourite movie interactions.
02
January 2025
API Integration
Connected the application to the TMDB API for movie lists, details, trailers, cast information, and dynamic backdrops.
03
February 2025
Interface Design
Created a cinematic visual direction with full-screen imagery, overlay gradients, modern navigation, hover cards, and responsive layouts.
04
February 2025
State Management
Implemented client-side favourite movie persistence using Context API and localStorage.
05
March 2025
Deployment
Configured the project for Vercel deployment with environment variables and production build verification.
04 / Tech Stack
React
JavaScript
Vite
Sass
React Router
TMDB API
Context API
LocalStorage
Swiper
React Slick
React Icons
Vercel
Git
05 / Results
🎬
TMDB
Live Movie API
▶️
Trailer
YouTube Modal
❤️
Local
Favourites Storage
🚀
Live
Vercel Deploy
© 2026 Hyosang Han's Portfolio. All rights reserved.