An elegant, fully responsive movie discovery platform with premium aesthetics
CineStream is a modern, sophisticated movie exploration platform that combines elegant design with powerful functionality. Built with React and powered by The Movie Database (TMDb) API, it offers a premium streaming service aesthetic with Netflix, Amazon Prime, and HBO-inspired UI/UX.
- 🎨 Elegant Burgundy Red Theme - Premium, sophisticated color scheme
- 💎 3D Billboard Logo - Custom text logo with realistic neon effects
- ⭐ Diamond Shining Stars - Animated gold ratings that sparkle
- 📱 Mobile Optimized - 40% more screen space on mobile devices
- 🎬 Featured Movies - Auto-playing trailers with mute controls
- 🔍 Genre Navigation - Full sidebar with all movie categories
- 🌙 Dark Theme - Easy on the eyes, perfect for movie browsing
- ⚡ Fast & Smooth - Pure CSS animations, no heavy libraries
-
Featured Movie Section
- Full-screen auto-playing trailers
- Mute/unmute audio controls
- Movie metadata and star ratings
- "More Info" detailed modal
-
Genre Navigation
- Complete sidebar with all TMDb genres
- Active state highlighting
- Smooth category switching
- Mobile-friendly toggle
-
Movie Grid
- Responsive CSS Grid layout
- Hover effects with details overlay
- Star ratings with diamond shine
- High-quality poster images
-
Movie Details Modal
- Full movie information
- Genre tags with burgundy styling
- Release dates and runtime
- Embedded trailers
-
Burgundy Red Theme
- Professional color palette (#8B0000)
- Consistent throughout UI
- Premium movie theater aesthetic
-
3D Billboard Logo
- Custom "Cap Braco" text logo
- 16-layer shadow depth effect
- Neon red glow when activated
- Realistic billboard projection
-
Diamond Shining Stars
- Pure gold color (#FFD700)
- 2-second breathing animation
- Corner sparkle effect
- Multi-layer golden glow
-
Luminous Card
- Interactive portfolio showcase
- Toggle switch with slide animation
- Links to www.capbraco.com
- Fits perfectly in sidebar (95%)
-
Desktop (>1024px)
- Full sidebar navigation (280px)
- Large text and spacious layout
- Complete descriptions
- Enhanced visual effects
-
Tablet (768px - 1024px)
- Toggleable sidebar
- Medium-sized elements
- 3-line text limits
- Comfortable touch targets
-
Mobile (480px - 768px)
- Compact layout (60vh featured)
- Side-by-side buttons
- 2-line text limits
- 20-32px titles
-
Extra Small (<480px)
- Maximum accessibility (50vh)
- Minimal text (18-24px)
- Tiny buttons (8px padding)
- Touch-optimized (44x44px)
- Node.js 14+ and npm/yarn
- TMDb API key (Get one free)
# Clone the repository
git clone https://github.com/CapBraco/CineStream.git
cd CineStream
# Install dependencies
npm install
# Add your TMDb API key
# Edit src/services/tmdb.js and add your API key
# Start development server
npm start
# Open http://localhost:3000# Create optimized build
npm run build
# The build folder is ready to deploy# Update homepage in package.json
"homepage": "https://CapBraco.github.io/cinestream"
# Deploy
npm run deploy- React 19.2 - UI library
- React Hooks - State management
- CSS3 - Styling and animations
- Font Awesome 4.0.3 - Icons
- TMDb API - Movie data and images
- Google Fonts - Custom typography
- Inter (body text)
- Playfair Display (logo)
- WindSong (script logo)
- Create React App - Build tooling
- GitHub Pages - Deployment
- npm - Package management
cinestream/
├── public/
│ ├── index.html
│ └── manifest.json
├── src/
│ ├── components/
│ │ ├── FeaturedMovie.jsx # Hero section with trailer
│ │ ├── MovieInfo.jsx # Modal with movie details
│ │ ├── MovieList.jsx # Grid of movie cards
│ │ ├── MovieTrailer.jsx # Trailer player
│ │ ├── NavBar.jsx # Sidebar navigation
│ │ └── LuminousCard.jsx # Portfolio card
│ ├── containers/
│ │ └── GenresContainer.jsx # Main container
│ ├── hooks/
│ │ ├── useGenres.js # Fetch genres
│ │ ├── useMovies.js # Fetch movies by genre
│ │ ├── useMovieInfo.js # Fetch movie details
│ │ ├── useMovieTrailer.js # Fetch trailers
│ │ └── useRandomMovie.js # Random featured movie
│ ├── services/
│ │ └── tmdb.js # TMDb API configuration
│ ├── App.jsx # Root component
│ ├── styles.css # Global styles
│ └── index.js # Entry point
├── docs/
│ ├── COMPLETE_TRANSFORMATION_LOG.md
│ ├── BURGUNDY_RED_THEME.md
│ ├── 3D_BILLBOARD_EFFECT.md
│ ├── MOBILE_OPTIMIZATION.md
│ └── QUICK_START.md
├── package.json
└── README.md
/* Burgundy Red Theme */
--accent-color: #8B0000 /* Dark burgundy */
--accent-hover: #A52A2A /* Brown-red hover */
--accent-dark: #5C0000 /* Deep red */
--accent-light: #B22222 /* Firebrick red */
--neon-red: #DC143C /* Crimson neon glow */
/* Gold & Text */
--gold: #FFD700 /* Pure gold for stars */
--text-primary: #F5F5F0 /* Ivory white */
--text-secondary: #D4D4D8 /* Silver gray */
/* Backgrounds */
--bg-primary: #0a0a0a /* Deep black */
--bg-secondary: #141414 /* Dark gray */
--bg-tertiary: #1a1a1a /* Medium gray */- Get a free API key from TMDb
- Open
src/services/tmdb.js - Replace
YOUR_API_KEYwith your actual key:
const API_KEY = 'your_tmdb_api_key_here';Edit CSS variables in src/styles.css:
:root {
--accent-color: #8B0000; /* Your color here */
--gold: #FFD700; /* Star color */
}Update text in src/components/LuminousCard.jsx:
<p className="cap-text">Your</p>
<p className="braco-text">Brand</p>Modify media queries in src/styles.css:
@media only screen and (max-width: 768px) {
/* Your mobile styles */
}| Browser | Version |
|---|---|
| Chrome | 90+ |
| Firefox | 88+ |
| Safari | 14+ |
| Edge | 90+ |
| iOS Safari | 14+ |
| Chrome Android | 90+ |
- CSS Grid
- Flexbox
- CSS Transforms
- CSS Animations
- Fetch API
- Auto-playing Trailers: Seamless YouTube integration
- Mute Control: Toggle audio on/off
- Gradient Overlay: Smooth blend to content
- Responsive Heights: 85vh → 50vh based on screen
- Star Ratings: Animated gold stars with diamond shine
- Full Genre List: All TMDb categories
- Active States: Burgundy red highlighting
- Search Box: Placeholder for future implementation
- Discover Section: Trending, Popular, Coming Soon
- Resources Section: News, Reviews, Box Office
- Luminous Card: Portfolio showcase at bottom
- Hover Effects: Scale and overlay animations
- Lazy Loading: Optimized image loading
- Rating Display: Gold stars with sparkle
- Genre Tags: Burgundy styled pills
- Responsive Grid: 2-7 columns based on screen
- Inactive State: 9 shadow layers (12px depth)
- Active State: 16 shadow layers (36px depth)
- Neon Glow: Red light effect from front
- Shadow Projection: Realistic billboard shadow
- Smooth Animation: 0.4s transition
- Pure CSS Animations: GPU accelerated
- Code Splitting: React lazy loading ready
- Optimized Images: TMDb CDN delivery
- Minimal Dependencies: Fast bundle size
- Efficient Re-renders: React Hooks optimization
- First Paint: < 1.5s
- Time to Interactive: < 3s
- Bundle Size: ~500KB (gzipped)
- Lighthouse Score: 90+
Comprehensive guides available in the /docs folder:
- COMPLETE_TRANSFORMATION_LOG.md - Full development history
- BURGUNDY_RED_THEME.md - Color scheme details
- 3D_BILLBOARD_EFFECT.md - Text shadow explanation
- MOBILE_OPTIMIZATION.md - Responsive design guide
- QUICK_START.md - 5-minute setup guide
Contributions are welcome! Here's how you can help:
- 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 existing code style
- Test on multiple devices
- Update documentation
- Keep bundle size minimal
- Maintain accessibility standards
Found a bug? Please open an issue with:
- Description: What happened?
- Steps to reproduce: How can we see it?
- Expected behavior: What should happen?
- Screenshots: Visual evidence helps!
- Environment: Browser, OS, screen size
This project is licensed under the MIT License - see the LICENSE file for details.
- ✅ Commercial use
- ✅ Modification
- ✅ Distribution
- ✅ Private use
⚠️ Liability and warranty not provided
- Netflix - UI/UX patterns
- Amazon Prime Video - Navigation structure
- HBO Max - Premium aesthetics
- Movie Theaters - Billboard effects
- React - UI framework
- TMDb - Movie database API
- Font Awesome - Icon library
- Google Fonts - Typography
- The React community
- TMDb for free API access
- Open source contributors
Portfolio: www.capbraco.com
GitHub: @yourusername
Project Link: CineStream Repository
Built this project to learn React? Here are resources:
- Search Functionality - Full text search
- User Authentication - Save favorites
- Watchlist - Track movies to watch
- Reviews Section - Read and write reviews
- Social Sharing - Share favorite movies
- Theme Toggle - Light/dark mode
- PWA Support - Offline functionality
- More Languages - i18n support
- Advanced filtering options
- Movie recommendations
- Cast and crew information
- Similar movies suggestions
- Streaming availability
- User ratings integration
- Version: 3.0 (Mobile Optimized)
- React Version: 19.2
- Bundle Size: ~500KB
- Components: 7 main components
- CSS Lines: 1,644
- Responsive Breakpoints: 4
- Animations: 3 keyframe animations
- Documentation Pages: 6
If you find this project useful, please consider giving it a ⭐️!
