CinePlay Hub is your all-in-one streaming companion that consolidates content from multiple platforms into a seamless, modern interface. Powered by the TMDB API, it enables effortless browsing and discovery of movies and TV shows — all in one place.

• 🎞️ Modern, responsive interface for browsing movies and shows
• 🔍 Powerful, cross-category search functionality
• 📱 Fully mobile-friendly with touch gesture support
• 🎯 Discover content via intuitive, category-based navigation
• 💾 Maintain a personalized watchlist
• 📢 Configurable announcement banner for updates and alerts
• 🌙 Smooth UI with elegant animations and transitions
• ⚡ Fast performance powered by React and Vite

• Node.js v22.x or higher
• npm v10.x or higher
• A valid TMDB API key – Get one here

# 1. Clone the repository
git clone <YOUR_GIT_URL>

# 2. Navigate to the project directory
cd cineplay-hub

# 3. Install dependencies
npm install

# 4. Set up environment variables
cp .env.example .env
# Edit .env and insert your TMDB API key

# 5. Start the development server
npm run dev

1. Obtain your TMDB API key from TMDB's website
2. Rename .env.example to .env
3. Replace your_tmdb_api_key_here with your actual API key

This project uses modern web technologies:

• Vite – Next-gen frontend tooling
• TypeScript – Type-safe JavaScript
• React – UI component library
• shadcn/ui – Accessible UI components
• Tailwind CSS – Utility-first CSS framework
• React Query – Efficient data handling
• Framer Motion – Smooth animations
• React Router – Client-side routing

1. Fork this repository
2. Connect your repo to Netlify
3. Configure the build settings:
   • Build Command: npm run build
   • Publish Directory: dist
4. Add environment variables
5. Deploy

1. Fork the repo
2. Import it into Vercel
3. Add environment variables
4. Deploy

1. Set the base option in vite.config.ts
2. Run npm run build
3. Deploy the dist directory to GitHub Pages

npm install -g firebase-tools
firebase login
firebase init hosting
npm run build
firebase deploy

Edit public/config/announcement.json to update the in-app announcement banner:

{
  "enabled": true,
  "message": "Your message here",
  "link": "/optional/url",
  "backgroundColor": "#2B8CBE",
  "textColor": "#FFFFFF"
}

• Changes take effect within 1 hour (adjustable via cache config).
• Users can dismiss the banner; the dismissal is stored in local storage.

We welcome contributions!

1. Fork the repo
2. Create a feature branch: git checkout -b feature/awesome-feature
3. Commit your changes: git commit -m "Add awesome feature"
4. Push to GitHub: git push origin feature/awesome-feature
5. Open a Pull Request

Please ensure you:

• Follow existing code style
• Use TypeScript for all new code
• Write meaningful commit messages
• Update documentation where necessary
• Use shadcn/ui components when applicable
• Add error handling and keep performance in mind

This project is licensed under the MIT License. See the LICENSE file for details.

We are committed to a welcoming environment. Please read our Code of Conduct before contributing.

If you encounter issues:

1. Check Issues for known problems
2. Review the Documentation if available
3. If the issue exists in the upstream version, raise it there
4. Otherwise, open a new issue and provide:
   • Node.js version
   • npm version
   • Browser and version
   • Error messages
   • Steps to reproduce
   • Expected vs actual behavior

• TMDB for movie and TV show data
• shadcn/ui for the UI library
• All the embedded services we used

• The project file tree is available in the root directory
• sw.js and ad scripts are located in /public/sw.js and /index.html respectively
  • To disable ads, delete sw.js and remove the related code from index.html
  • If you keep it, thanks! We receive revenue support from it
• Redirects from video servers are external and not controlled by us