Filmpire is a full-featured movie and TV discovery application built with React, TypeScript, and Redux Toolkit. It connects to the TMDB API to surface popular films, actor profiles, crew details, and curated movie collections.
The app features advanced browsing with genre/category filtering, full movie detail pages (cast, crew, trailers), actor and crew deep-dives, a user approval/watchlist system, and an AI-powered voice assistant via the Alan AI SDK.
- 🎬 Movie Discovery — Browse popular, top-rated, upcoming, and now-playing films
- 🔍 Search — Full-text search across the TMDB catalog
- 🎭 Movie Detail Pages — Overview, cast/crew, trailers, similar films, and metadata
- 👤 Actor Profiles — Biography, filmography, and known-for movies
- 🎥 Crew Profiles — Director and crew member filmographies
- ✅ Watchlist / Approved — Mark films as approved and browse your personal list
- 🎙️ Voice Assistant — Alan AI integration for voice-controlled navigation and search
- 🌙 Dark / Light Mode — Tailwind-powered theme system
- 📱 Responsive Design — Mobile-optimized layout
| Technology | Purpose |
|---|---|
| React | UI component library |
| TypeScript | Type-safe development |
| Redux Toolkit | Global state management |
| React Router DOM | Client-side navigation |
| Axios | HTTP client for TMDB API |
| Tailwind CSS | Utility-first styling |
| shadcn/ui | Accessible component library |
| Radix UI | Headless component primitives |
| Embla Carousel | Carousel/slider component |
| Alan AI SDK | Voice assistant integration |
| Vite | Fast build tooling |
| TMDB API | Movie and actor data |
- Node.js v18+
- npm
- A TMDB API key (free)
- An Alan AI project key (optional, for voice features)
git clone https://github.com/brandonperfetti/filmpire.git
cd filmpire
npm installCreate a .env file in the project root:
VITE_TMDB_API_KEY=your_tmdb_api_key
VITE_ALAN_SDK_KEY=your_alan_sdk_key # Optionalnpm run devOpen http://localhost:5173 in your browser.
npm run build
npm run previewnpm run lintfilmpire/
├── src/
│ ├── app/ # Redux store configuration
│ ├── components/
│ │ ├── shared/ # Navbar, sidebar, footer
│ │ └── ui/ # shadcn/ui base components
│ ├── features/ # Redux slices (auth, movies)
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Route-level page components
│ │ ├── Movies/ # Home/browse page
│ │ ├── MovieInfo/ # Movie detail page
│ │ ├── ActorInfo/ # Actor profile page
│ │ ├── CrewInfo/ # Crew member profile page
│ │ ├── Profile/ # User watchlist/approved page
│ │ └── Approved/ # Approved films list
│ ├── services/ # TMDB API service layer
│ ├── context/ # Theme and app context
│ └── types/ # TypeScript type definitions
└── public/ # Static assets
Deploy to Vercel or Netlify. Set VITE_TMDB_API_KEY in your platform's environment variable settings.
MIT © Brandon Perfetti