Actor Explorer
React + API Integration + UI/UX Engineering
Overview
Actor Explorer is a fully-featured, two-pane React application that lets users search for actors, explore their complete filmography, view deep movie details, and save favorites. The app feels like a lightweight TMDB client, with a cinematic UI, dynamic routing, API-driven content, and persistent favorites—all running client-side with no backend.
Goals
- Create an interactive movie/actor browsing experience powered by the TMDB API
- Implement URL-based deep linking for actors and movies
- Design a split-view layout that keeps context while navigating
- Add detailed actor and movie pages with bios, trailers, images, cast lists, and metadata
- Persist favorites using localStorage without requiring authentication
- Build a polished dark-themed UI using TailwindCSS
Problem
Most TMDB UI clones are either barebones or rely on heavy backend setups. I wanted to build something fully client-side, fast, and clean—a modern UI that updates instantly, handles nested routes smoothly, and feels like a polished product rather than a student demo.
Links
Tech Stack
Responsibilities
- Component architecture and state management
- Two-panel responsive layout engineering
- Live actor search with debounced API calls
- Actor detail pages with biography, socials, and full filmography
- Movie detail pages with trailers, stills, cast lists, and metadata
- Deep linking via dynamic React Router paths
- Favorites system with persistence via localStorage
- UI/UX design and all TailwindCSS styling
Timeline
1 Day
Deliverables
6
Concept & Architecture
The goal was to build a dynamic, TMDB-powered explorer where users could type an actor's name and instantly navigate through their career. I designed a split-screen layout: search and context stay on the left, while the right panel intelligently swaps between search results, actor pages, movie pages, and favorites.
Search & Live Results
I built a debounced search system that hits TMDB’s `search/person` endpoint. The UI filters out bad/duplicate entries and only surfaces real actors with profile images. Results update in real time on the right panel, letting users click into details without losing context.
Actor Detail View
The actor page combines three API endpoints into one unified view: basic biography, movie credits, and social media links. Users can explore a full filmography, sort by year or rating, and jump directly into any movie. This view required orchestrating several async loads and maintaining route state cleanly.
Movie Detail View
Movie pages fetch trailers, backdrops, metadata, and cast lists. I designed a hero carousel section that blends still images and YouTube trailers. The cast grid lets users jump directly into another actor’s page, creating a smooth web of navigation powered entirely by dynamic routes.
Favorites System
I implemented a client-side favorites layer that stores actors and movies via localStorage. The dedicated Favorites page lives inside the right panel and feels like part of the same browsing flow. Users can toggle hearts anywhere in the app, and everything persists across sessions.
Routing & Deep Linking
The entire experience is URL-driven. Refreshing `/actor/123` or `/actor/85/movie/550` loads the correct state automatically. The app uses nested route patterns to transition between views while keeping the left panel intact. This made the experience feel like a real app, not just a demo.
UI/UX & Polish
The dark cinematic theme uses TailwindCSS with custom gradients, glowing accents, and smooth transitions. Panels scroll independently, skeleton loaders keep the app responsive, and media-heavy pages stay clean and performance-friendly. The result is a polished interface that feels high-end.
Media Gallery
Builder Notes
All routing and state management is handled client-side with no backend
All routing and state management is handled client-side with no backend
Favorites persist seamlessly via localStorage maps
Favorites persist seamlessly via localStorage maps
Actors and movies can be navigated via deep links without losing search context
Actors and movies can be navigated via deep links without losing search context
The two-panel layout keeps the app feeling fast, cinematic, and modern
The two-panel layout keeps the app feeling fast, cinematic, and modern
The project serves as a full demonstration of API integration, UI engineering, and polished React architecture
The project serves as a full demonstration of API integration, UI engineering, and polished React architecture