Media discovery and playback project · 2025
OtakuHaven
A React media application for discovering TMDB titles, playing movies and TV episodes through switchable embedded players, resuming supported playback, and syncing saved lists with Firebase.
- Contribution
- Frontend architecture · API and Firebase integration
- Build
- Independent product · 2025
I built OtakuHaven as a complete browsing-to-watching experience: discover a title, inspect its details, play a movie or episode, resume supported playback, and keep a personal library.
What a user can do
These flows are traced directly from the routes, hooks, player controllers, and Firebase state in the repository.
Browse the catalogue
Explore trending, popular, top-rated, and genre-led movie and television collections backed by live TMDB data.
Search across media
Search movies, television, or both with a 300 ms debounce and progressively load additional result pages.
Play a movie
Open a movie detail route, review its metadata, jump to the player, and switch among three embedded playback providers.
Choose a season and episode
Browse TMDB season data, select an episode from its artwork and metadata, and keep the current selection in the URL.
Resume and save
VidLink playback events are stored locally for resume, while signed-in users can save titles to cloud-synced lists.
Manage a personal library
Use the protected profile to review or remove watchlist and favourite titles and return directly to their detail routes.
How the project is connected
One clear path connects discovery, title details, playback, and the personal library while keeping public catalogue data separate from private account state.
Catalogue, playback, local resume, and authenticated account state stay separate so each can change without disturbing the others.
A quick overview of how someone moves through the experience.
- 1Browse or search
- 2Open a title
- 3Choose movie or episode
- 4Start watching
- 1Start playback
- 2Progress is remembered
- 3Return later
- 4Resume playback
- 1Sign in
- 2Save a title
- 3Sync to account
- 4Open from profile
How people are using it
More than a year after launch, the project has reached over 400 visitors. The latest 30-day snapshot adds a focused view of engagement, geographic reach, and platform mix.
Cumulative reach since launch
Latest 30-day snapshot
Latest 30-day snapshot
Latest 30-day snapshot
An international audience
Countries across Europe, Africa, North America, and Asia.
- Greece38%
- Rwanda21%
- United States16%
- India14%
- Five more markets11%
Devices and systems
Desktop71%
Mobile29%
Windows60%
Android26%
Mac10%
iOS3%
Page traffic and performance telemetry are mounted once at the React root.
The 400+ cumulative visitor figure is supplied from the project’s lifetime reach. Engagement, geography, and platform values use the latest 30-day Vercel Analytics snapshot; country shares are rounded. Custom events are not currently configured.
Engineering decisions
One media model
The TMDB service transforms different movie and TV payloads into shared TypeScript shapes before they reach the interface.
Route-aware episode state
Season and episode selections update query parameters, so refreshes and shared URLs preserve the current viewing context.
Playback fallback
VidLink is the default source, with Embed API and VidSrc available from the same player surface instead of separate pages.
Public data, private state
TMDB catalogue requests remain public while Firebase Authentication and Firestore handle only user-specific saved data.
Tools used
The protected profile is the implemented collection-management screen. Dedicated watchlist and favourites routes are still placeholders, and playback availability depends on third-party embed providers.