██████╗██╗███╗ ██╗███████╗██╗ ██╗ █████╗ ██████╗ ███████╗
██╔════╝██║████╗ ██║██╔════╝██║ ██║██╔══██╗██╔══██╗██╔════╝
██║ ██║██╔██╗ ██║█████╗ ██║ █╗ ██║███████║██████╔╝███████╗
██║ ██║██║╚██╗██║██╔══╝ ██║███╗██║██╔══██║██╔══██╗╚════██║
╚██████╗██║██║ ╚████║███████╗╚███╔███╔╝██║ ██║██║ ██║███████║
╚═════╝╚═╝╚═╝ ╚═══╝╚══════╝ ╚══╝╚══╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝
Browse movies, TV shows, and people — all powered by TMDB.
Trending rows. Detailed pages. Trailers. Cast. Streaming info. All in one place.
Cinewars is a movie and TV discovery app built on top of the TMDB API. The home page pulls trending content, top-rated picks, and genre-specific rows — all scrollable horizontally. Click anything to get a full detail page with cast, crew, trailers, streaming providers, and recommendations.
No accounts. No watchlists. Just browsing.
| 🎬 Genre rows | Horizontal scrollable carousels for 15+ movie genres on the home page |
| 📄 Detail pages | Runtime, budget, revenue, rating, director, overview — all on one screen |
| 📺 TV hierarchy | Drill into seasons and individual episodes for any show |
| 🎞️ Trailers | Embedded YouTube trailers and behind-the-scenes clips |
| 🎭 Cast & Crew | Full cast and crew with links to individual people pages |
| 🎥 Collections | View all films in a movie collection (e.g. Marvel, Nolan's Batman) |
| 📡 Streaming info | Shows which Indian streaming platforms carry each title |
| 🔍 Search | Search across movies, TV shows, and people |
- Node.js v18+ → nodejs.org
- A free TMDB API key → themoviedb.org/settings/api
# 1. Clone the repo
git clone https://github.com/nagraj05/cinewars.git
cd cinewars
# 2. Install dependencies
npm install
# 3. Add your TMDB API key
echo "VITE_TMDB_API_KEY=your-api-key-here" > .env
# 4. Launch
npm run devOpen http://localhost:5173 in your browser.
npm run buildOutput goes to dist/. Deploy the folder to any static host — the project includes a vercel.json for zero-config Vercel deploys.
cinewars/
├── src/
│ ├── App.jsx ← Router root + 6-second intro loader
│ ├── pages/
│ │ ├── Home.jsx ← All genre/trending carousels
│ │ ├── Movies.jsx ← Movies landing
│ │ ├── Tv.jsx ← TV landing
│ │ ├── People.jsx ← People listing
│ │ ├── SearchPage.jsx ← Search results
│ │ ├── Movies/ ← NowPlaying, Popular, TopRated, Upcoming
│ │ └── Tv/ ← AiringToday, OnTheAir, Popular, TopRated
│ └── components/
│ ├── Navbar.jsx ← Nav with dropdown menus
│ ├── Moviedetails.jsx ← Full movie detail page
│ ├── TvDetails.jsx ← Full TV show detail page
│ ├── SeasonsDetails.jsx
│ ├── Episodes.jsx
│ ├── Peopledetails.jsx
│ ├── Collection.jsx
│ └── ...
├── .env ← VITE_TMDB_API_KEY (not committed)
├── tailwind.config.js ← Custom colors & fonts
└── vercel.json ← SPA routing for Vercel
Defined in tailwind.config.js:
backgroundColor: {
nav: '#14181c', // navbar & card backgrounds
body: '#1d232a', // page background
box: '#445566', // secondary boxes
}Provider data defaults to India (IN). To change it, find this pattern in Moviedetails.jsx and TvDetails.jsx:
providers.results?.IN?.flatrateReplace IN with any ISO 3166-1 country code.
In src/App.jsx:
const timer = setTimeout(() => {
setIsLoading(false);
}, 6000); // millisecondsBlank page or no content
→ Your .env file is missing or the API key is wrong. Check that VITE_TMDB_API_KEY is set and the key is active on TMDB.
Images not loading
→ TMDB image CDN (image.tmdb.org) may be blocked on your network. Try a different connection.
npm run lint fails
→ The lint config uses --max-warnings 0. Fix all ESLint warnings before committing.
Built with React, Vite, and Tailwind CSS.
All data and images from The Movie Database (TMDB).
Made with ♥ for people who spend too long deciding what to watch.