A modern, responsive Netflix clone built with React, featuring a beautiful UI with glassmorphism effects, smooth animations, and a comprehensive streaming platform experience.
- Modern UI/UX: Glassmorphism design with smooth animations using Framer Motion
- Responsive Design: Fully responsive across all devices
- Profile Selection: Netflix-style profile selection with PIN protection
- Movie Browsing: Browse movies by categories, trending, and AI recommendations
- Search Functionality: Advanced search with real-time results
- Movie Details: Comprehensive movie information with trailers and reviews
- Dark/Light Theme: Toggle between dark and light themes
- Notifications: Real-time notification system
- Soundtracks: Music player for movie soundtracks
- Actor Profiles: Browse movies by favorite actors
- Continue Watching: Track your viewing progress
- AI Recommendations: Personalized movie suggestions
- Frontend: React 19, JavaScript (JSX)
- Styling: Tailwind CSS, CSS3
- Animations: Framer Motion
- Icons: Lucide React
- Build Tool: CRACO (Create React App Configuration Override)
- Deployment: Vercel-ready
-
Clone the repository
git clone <your-repo-url> cd netflix-clone-main
-
Install dependencies
npm install
-
Start the development server
npm start
-
Build for production
npm run build
-
Push to GitHub
git add . git commit -m "Initial commit" git push origin main
-
Deploy to Vercel
- Connect your GitHub repository to Vercel
- Vercel will automatically detect it's a React app
- Build command:
npm run build - Output directory:
build - Deploy!
No environment variables are required for basic functionality. The app uses mock data and public APIs.
netflix-clone-main/
├── public/
│ ├── index.html
│ ├── favicon 4.ico
│ ├── favicon-32x32.png
│ └── StreamNest images/
├── src/
│ ├── components/
│ │ └── ui/
│ │ ├── ProfileSelection.jsx
│ │ ├── PinModal.jsx
│ │ ├── button.jsx
│ │ ├── ProfileModal.jsx
│ │ └── footer.jsx
│ ├── lib/
│ │ ├── utils.js
│ │ └── utils.ts
│ ├── App.js
│ ├── Components.js
│ ├── App.css
│ ├── index.css
│ └── index.js
├── package.json
├── tailwind.config.js
├── postcss.config.js
├── craco.config.js
└── README.md
- ProfileSelection: Netflix-style profile selection screen
- Navbar: Responsive navigation with smooth scrolling
- HeroSection: Featured movie showcase with glassmorphism
- ContentRow: Horizontal scrolling movie rows
- MovieModal: Detailed movie information modal
- SearchModal: Advanced search functionality
- Footer: Professional footer with social links
- Multiple profile support
- PIN protection for specific profiles
- Smooth animations and transitions
- Trending movies with trending meters
- AI-powered recommendations
- Smart categories (Comfort Movies, Weekend Binge, Hidden Gems)
- Continue watching with progress tracking
- Real-time search results
- Multi-category search (movies, TV shows, actors)
- Advanced filtering options
- Smooth scrolling navigation
- Hover effects and animations
- Responsive design for all screen sizes
- Dark/light theme toggle
The project uses Tailwind CSS for styling with custom configurations in tailwind.config.js.
Custom React App Configuration Override for enhanced build process.
- Optimized bundle size
- Gzip compression ready
- Static asset optimization
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- 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.
- Netflix for inspiration
- TMDB API for movie data
- Framer Motion for animations
- Tailwind CSS for styling
- Lucide React for icons
- Developer: Yuktheshwar MP
- Portfolio: https://my-portfolio-ten-tan-36.vercel.app/
- GitHub: https://github.com/YUKII2K3
- LinkedIn: https://linkedin.com/in/yuktheshwar-mp
- Email: yukiis.dev@gmail.com
Made with ❤️ by Yuktheshwar MP