Your Ultimate Movie Information Hub
Discover movies • Find where to watch • Explore cinema release dates
CineGuide is a modern, Netflix-inspired movie information platform that helps you discover films, find where to watch them, and explore detailed movie data. With a sleek dark interface and intuitive design, CineGuide makes movie discovery effortless and enjoyable.
Click any movie to view:
- IMDb Ratings with star reviews
- Release Dates with theater/streaming status
- Plot Synopsis and full descriptions
- Cast & Crew information
- Box Office earnings (when available)
- DVD/Blu-ray release dates
- See which platforms have the movie (Netflix, Prime Video, Disney+, etc.)
- Visual availability badges (Available/Not Available)
- Direct link to JustWatch for accurate streaming info
- Platform-specific recommendations
Smart badges show:
- 🔥 In Theaters - Currently playing in cinemas
- ⭐ Coming Soon - Upcoming releases
- 🌟 Recently Released - New to streaming
- ✅ Released - Available everywhere
- Real-time search with instant results
- Browse popular movies on homepage
- Smooth animations and loading states
- Netflix/Prime-inspired dark theme
- Glassmorphism effects
- Smooth hover animations
- Fully responsive (mobile, tablet, desktop)
- Modern Poppins typography
Detailed movie information with streaming availability
Fast, responsive search functionality
- Node.js 14+ installed
- npm or yarn package manager
# Clone the repository
git clone https://github.com/kdsecdev/cineguide.git
# Navigate to project directory
cd cineguide
# Install dependencies
npm install
# Start development server
npm startThe app will open at http://localhost:3000
npm run build| Technology | Purpose |
|---|---|
| React 18 | UI framework |
| OMDb API | Movie data & information |
| Vanilla CSS | Styling & animations |
| JustWatch | Streaming availability |
| IMDb Integration | Direct movie links |
CineGuide follows modern web design principles:
- Dark-first design for comfortable viewing
- Cinematic aesthetics inspired by Netflix & Amazon Prime
- Micro-animations for enhanced UX
- Glassmorphism for modern UI elements
- Responsive grid layouts for all devices
Color Palette:
- Primary Red:
#e50914(Netflix-inspired accent) - Background: Deep blacks for cinematic feel
- Text: White (#ffffff) with gray (#b3b3b3) accents
CineGuide uses the OMDb API for movie data. To use your own API key:
- Get a free API key from OMDb API
- Replace the key in
src/App.js:
const API_URL = "http://www.omdbapi.com?apikey=YOUR_API_KEY";One-Click Deploy:
Or via CLI:
# Install Vercel CLI
npm i -g vercel
# Deploy
vercelOther Platforms:
- Netlify: Drag and drop the
buildfolder - GitHub Pages: Use
gh-pagespackage - AWS S3: Upload build folder to S3 bucket
- User authentication & accounts
- Watchlist and favorites
- Genre/category filtering
- Trending movies section
- Similar movie recommendations
- Movie reviews & ratings
- Multi-language support
- Dark/Light theme toggle
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create your 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
This project is licensed under the MIT License - see the LICENSE file for details.
Your Name
- GitHub: @yourusername
- LinkedIn: Your LinkedIn
- OMDb API for movie data
- JustWatch for streaming availability
- React for the amazing framework
- Netflix & Amazon Prime for design inspiration