inman2004/moviesdb

Purpose and Runtime

MoviesDB is a client-side React movie-discovery application backed by The Movie Database (TMDB) API. It runs as a Vite-built TypeScript SPA, with Tailwind/PostCSS styling and browser-side state. The TMDB credential is supplied through VITE_TMDB_API_KEY.

Key runtime entry points:

• client/src/main.tsx bootstraps React into the browser.

• client/src/App.tsx defines the application shell and likely route composition.

• client/src/services/api.ts is the boundary for TMDB requests.

Application Shell and Navigation

The root application coordinates shared UI, page rendering, and global visual behavior. Reusable header/footer components form the persistent navigation shell around route-specific pages.

• client/src/App.tsx

• client/src/components/Header.tsx

• client/src/components/Footer.tsx

React Router v6 is the stated navigation mechanism; page modules represent movie browsing, search, profile, and personal-library destinations.

Movie Discovery and Presentation

The home page organizes TMDB movie categories—popular, top rated, currently playing, and upcoming—into reusable visual sections and card/slider displays. Loading placeholders keep asynchronous API fetches from producing empty layouts.

• client/src/pages/home.tsx

• client/src/components/MovieSection.tsx

• client/src/components/MoviesCard.tsx

• client/src/components/Slider.tsx

• client/src/components/MovieCardSkeleton.tsx

• client/src/components/LoadingSpinner.tsx

Detail, Search, and Playback Flows

Search is a dedicated page that turns user input into TMDB queries. Actor profiles expose person-centric data. Movie playback is isolated as its own route/page, separating embedded or selected viewing behavior from discovery UI.

• client/src/pages/SearchPage.tsx

• client/src/pages/ActorProfile.tsx

• client/src/pages/MoviePlayer.tsx

• client/src/components/Reviews.tsx

• client/src/services/api.ts

The API service is the external-service boundary: UI components/pages should consume normalized request functions rather than embed TMDB URLs or keys directly.

Client-Side Library State

Favorites, watchlists, watched history, and collections are modeled as separate React Context providers. These contexts provide cross-route state for user-curated movie lists without a repository-visible backend.

• client/src/context/FavoritesContext.tsx

• client/src/context/WatchlistContext.tsx

• client/src/context/WatchedContext.tsx

• client/src/context/CollectionsContext.tsx

Corresponding pages render each state domain:

• client/src/pages/Favorites.tsx

• client/src/pages/Watchlist.tsx

• client/src/pages/History.tsx

• client/src/pages/Collections.tsx

Theme and Profile Boundary

Theme selection is global UI state, independently provided from movie-library contexts. Profile is a route-level consumer/presentation boundary for user-oriented features rather than an indicated authentication service.

• client/src/context/ThemeContext.tsx

• client/src/pages/Profile.tsx

Build and Deployment

The client is built and served by Vite, deployed as a static SPA with Vercel-specific routing/deployment configuration. GitHub Actions contains the deployment automation.

• client/vite.config.ts

• client/vercel.json

• .github/workflows/deploy.yml

Primary infrastructure is Node.js/npm for development and build, Vercel for hosting, and TMDB as the sole identified remote data service.