Your AI-powered companion for discovering amazing movies you'll actually love! 🚀
Cine-AI is a modern, intelligent movie discovery platform that solves the overwhelming choice problem through smart recommendations, advanced filtering, YouTube trailer integration, and personalized user experiences.
- Smart Recommendations: Get movie suggestions based on your preferences and watching history
- Intelligent Filtering: Advanced genre, rating, and release date filtering
- Personalized Experience: Tailored content based on your movie taste
- Decision Support: Overcome choice paralysis with curated suggestions
- Instant Search: Real-time movie discovery with debounced search
- Dual View Modes: Switch between beautiful grid and detailed list views
- Responsive Design: Perfect experience on all devices and screen sizes
- Smooth Animations: Professional transitions and hover effects
- Comprehensive Data: Rich movie information from TMDB API
- YouTube Trailers: Watch official trailers and discover movies visually
- Trending Categories: Explore trending, top-rated, upcoming, and in-theater movies
- Genre Exploration: Dive deep into 19+ movie genres
- User Accounts: Create accounts to save preferences and watchlists
- Personal Watchlist: Save movies you want to watch later
- Search History: Track your movie discovery journey
- Rating System: Rate and review movies you've watched
| Feature | Description | Status |
|---|---|---|
| 🎬 Movie Discovery | Smart search with instant results | ✅ Complete |
| 🔍 Advanced Filtering | Genre, rating, year, and sorting options | ✅ Complete |
| 📱 Responsive Design | Works perfectly on all devices | ✅ Complete |
| 🎥 Trailer Integration | YouTube trailers and TMDB video data | ✅ Complete |
| 🔐 User Authentication | Login/signup with personalized features | ✅ Complete |
| 🌟 Trending Movies | Multiple categories with real-time data | ✅ Complete |
| 🎨 Modern UI/UX | Beautiful dark theme with smooth animations | ✅ Complete |
| 📊 Search Analytics | Track search patterns and user behavior | ✅ Complete |
- React 19 - Latest React with modern hooks and features
- Vite - Lightning-fast build tool and development server
- Tailwind CSS 4.0 - Utility-first CSS framework
- TMDB API - Comprehensive movie database and metadata
- YouTube Data API v3 - Enhanced trailer discovery
- Appwrite - Backend services and analytics (optional)
- ESLint - Code quality and consistency
- Git - Version control and collaboration
- npm - Package management
- Official Trailers: Fetch from TMDB video data
- Fallback Search: YouTube API search when TMDB trailers unavailable
- Trailer Gallery: Browse multiple trailer options
- Responsive Player: Works on all devices
- High Quality: Support for various video resolutions
- Embedded Player: Seamless YouTube integration
- Thumbnail Previews: Visual trailer selection
- Full-Screen Support: Immersive viewing experience
- Sign Up: Create new accounts with email and username
- Sign In: Secure login with existing credentials
- Profile Management: View and manage your account
- Session Persistence: Stay logged in across browser sessions
- Watchlist: Save movies for later viewing
- Rating History: Track movies you've rated
- Search Analytics: Monitor your discovery patterns
- Custom Preferences: Tailored movie recommendations
- Node.js 18+ and npm
- TMDB API key (Get one here)
- YouTube Data API v3 key (Get one here)
- Appwrite project (optional, for analytics)
-
Clone the repository
git clone https://github.com/Frank20021/Cine-AI.git cd Cine-AI -
Install dependencies
npm install
-
Environment Setup
cp env.example .env
Edit
.envwith your API keys:VITE_TMDB_API_KEY=your_tmdb_api_key VITE_YOUTUBE_API_KEY=your_youtube_api_key VITE_APPWRITE_PROJECT_ID=your_appwrite_project_id VITE_APPWRITE_DATABASE_ID=your_appwrite_database_id VITE_APPWRITE_COLLECTION_ID=your_appwrite_collection_id
-
Start development server
npm run dev
-
Open your browser Visit
http://localhost:5173to see Cine-AI in action!
npm run build
npm run preview- Smart Filtering: Reduce overwhelming choices with genre and rating filters
- Personalized Lists: Get recommendations based on your preferences
- Trailer Previews: Make informed decisions with video content
- Quick Discovery: Find movies in seconds, not minutes
- Clean Interface: Focus on what matters - finding great movies
- Essential Data: Show only relevant information upfront
- Visual Content: Trailers and images for quick assessment
- Organized Categories: Logical grouping of movie types
- Trending Tabs: See what's popular across different categories
- Advanced Search: Find specific movies or discover similar ones
- Trailer Discovery: Visual way to explore movie content
- Genre Exploration: Dive deep into your favorite movie types
- Responsive Design: Works on all devices and screen sizes
- Keyboard Navigation: Full keyboard support for accessibility
- High Contrast: Dark theme with clear visual hierarchy
- Video Content: Trailers provide visual context for all users
- Color Schemes: Customize gradients and accent colors
- Layout Options: Adjust grid/list view preferences
- Animation Settings: Control transition speeds and effects
- Genre Preferences: Set favorite genres for better recommendations
- Rating Thresholds: Adjust minimum rating filters
- Language Options: Filter by preferred languages
- Popular Searches: Track what users are looking for
- Search Patterns: Understand user discovery behavior
- Performance Metrics: Monitor app usage and engagement
- Watchlist Analytics: See which movies are most saved
- Rating Trends: Track popular and unpopular movies
- Feature Usage: Understand which features are most valuable
Cine-AI/
├── src/
│ ├── Component/ # React components
│ │ ├── AuthModal.jsx # Authentication modal
│ │ ├── MovieCard.jsx # Movie display component
│ │ ├── Search.jsx # Search functionality
│ │ ├── TrendingMovies.jsx # Trending movies section
│ │ ├── TrailerModal.jsx # Trailer player modal
│ │ └── UserProfile.jsx # User profile component
│ ├── App.jsx # Main application component
│ ├── appwrite.js # Appwrite integration
│ ├── index.css # Global styles
│ └── main.jsx # Application entry point
├── public/ # Static assets
├── .env.example # Environment variables template
├── package.json # Dependencies and scripts
└── README.md # This file
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
We welcome contributions! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Follow the existing code style
- Add tests for new features
- Update documentation as needed
- Ensure all tests pass
- Use the GitHub Issues page
- Provide detailed descriptions and steps to reproduce
- Include browser and device information
- Check the documentation
- Search existing issues
- Create a new issue for bugs or feature requests
This project is licensed under the MIT License - see the LICENSE file for details.
- TMDB: For comprehensive movie data and trailers
- YouTube: For enhanced video content
- Appwrite: For backend infrastructure
- React Team: For the amazing framework
- Tailwind CSS: For the beautiful styling system
If you find Cine-AI helpful, please consider:
- ⭐ Starring the repository
- 🔀 Forking the project
- 🐛 Reporting issues
- 💡 Suggesting new features
- 📢 Sharing with friends
Made with ❤️ by Frank20021 and TechAfranie-X https://github.com/TechAfranie-X
Cine-AI - Making movie discovery simple, smart, and enjoyable! 🎬✨
Connect with me! 🚀