A modern, feature-rich movie and TV show discovery platform built with React and Vite. Explore trending content, discover new favorites, and stream seamlessly with multiple server options.
- Advanced Discovery: Browse trending, popular, top-rated, and upcoming movies and TV shows
- Powerful Search: Full-text search across movies and TV series with instant results
- Smart Filtering: Filter by genre, language, year, runtime, and rating
- Infinite Scroll: Seamless browsing with automatic content loading
- Multi-Server Streaming: Access content from 12+ embedded streaming providers
- Hero Carousel: Auto-rotating featured content with smooth animations
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Dark Theme: Modern dark UI with amber accents
- Smooth Animations: Framer Motion-powered transitions and interactions
- Loading States: Skeleton screens and progress indicators
- Home: Hero carousel with trending content rows
- Movies: Filterable movie grid with advanced search options
- TV Shows: Dedicated TV series discovery page
- Watch: Full media player with episodes, cast, reviews, and similar content
- Search: Comprehensive search with debounced queries
- React 19 - Modern React with latest features
- Vite - Fast build tool and development server
- React Router v7 - Client-side routing
- Tailwind CSS 4 - Utility-first CSS framework
- Framer Motion - Animation library
- React Context - Global state for media data
- Custom Hooks - Reusable logic for API calls and UI interactions
- TMDB API - Movie and TV show data
- Axios - HTTP client for API requests
- 12 Streaming Servers - Multi-source video playback
- ESLint - Code linting
- Vite Dev Server - Hot module replacement
- Git - Version control
- Node.js (v18 or higher)
- npm or yarn package manager
- TMDB API key (get one from TMDB)
-
Clone the repository
git clone https://github.com/Sh-Mustak/CineNest.git cd CineNest -
Install dependencies
npm install
-
Environment Setup Create a
.envfile in the root directory and add your TMDB API key:VITE_TMDB_API_KEY=your_tmdb_api_key_here
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
npm run build
npm run previewCineNest/
├── src/
│ ├── api/ # API configuration and services
│ ├── assets/ # Static assets
│ ├── components/ # Reusable UI components
│ │ ├── filters/ # Filtering components
│ │ ├── layout/ # Layout components
│ │ ├── movie/ # Movie-specific components
│ │ ├── moviesPage/ # Movies page components
│ │ ├── watch/ # Watch page components
│ │ └── Skeleton/ # Loading skeleton components
│ ├── context/ # React context providers
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Page components
│ ├── services/ # Data fetching services
│ ├── utils/ # Utility functions
│ ├── App.jsx # Main app component
│ └── main.jsx # App entry point
├── public/ # Public assets
├── index.html # HTML template
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
└── README.md # Project documentation
- Auto-rotating carousel with 3D card effects
- Touch and keyboard navigation
- Progress indicators
- Genre selection with pill UI
- Year and runtime range sliders
- Language and rating filters
- Sort options (popularity, rating, date)
- Multi-tab interface (Info, Episodes, Similar, Trailers, Reviews)
- 12-server video player selection
- Episode carousel for TV shows
- Cast details and movie metadata
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
CineNest integrates with The Movie Database (TMDB) API to fetch:
- Movie and TV show details
- Cast and crew information
- Reviews and ratings
- Trailers and images
- Similar content recommendations
- Desktop: Full hero carousel with 3D effects
- Tablet: Optimized layouts with touch interactions
- Mobile: Bottom navigation and mobile-friendly UI
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow React best practices
- Use meaningful commit messages
- Test on multiple devices
- Ensure responsive design
- Maintain code quality with ESLint
This project is licensed under the MIT License - see the LICENSE file for details.
- The Movie Database (TMDB) for providing movie data
- Vite for the amazing build tool
- Tailwind CSS for the utility-first CSS framework
- Framer Motion for smooth animations
Shahriar Mustak
- GitHub: @Sh-Mustak
- Project Link: https://github.com/Sh-Mustak/CineNest
Enjoy exploring movies and TV shows with CineNest! 🍿