MetaFlix is a responsive and modern movie streaming web application built with React.js, designed to give users a Netflix-style experience for browsing and watching movie trailers. It fetches real-time data from the TMDB API and displays high-quality movie details and trailers.
- 🔥 Browse trending, top-rated, and popular movies
- 🔍 Search for your favorite movies
- 🖼️ View movie posters and detailed descriptions
- 📺 Watch trailers directly from YouTube
- ⚛️ Built using React.js with functional components and hooks
- 📱 Responsive design for all devices
- Frontend: React.js, CSS
- API: TMDB API
- Media Content: YouTube (for trailers)
- Clone the repository
git clone https://github.com/BenDev202/MetaFlix.git cd MetaFlix
Install dependencies
bash Copy Edit npm install Get a TMDB API key
Create an account at TMDB
Go to your profile → Settings → API → Generate an API Key
Create a .env file in the root and add:
ini Copy Edit REACT_APP_TMDB_API_KEY=your_api_key_here Start the development server
bash Copy Edit npm start 📁 Project Structure php Copy Edit MetaFlix/ ├── public/ ├── src/ │ ├── components/ # Reusable UI components │ ├── pages/ # Page layout and sections │ ├── App.js # Main App entry │ └── index.js # React DOM entry 🧠 What I Learned How to build dynamic UIs with React
Working with third-party APIs and managing API keys
Handling search and filter functionality
Responsive design best practices
Embedding trailers using YouTube API
🚀 Future Improvements Add user authentication
Create playlists or watchlists
Improve UI with animations
Enable trailer autoplay on hover
📸 Demo Coming soon — Live version to be deployed on Vercel or Netlify.
🤝 Contributing Feel free to fork the project, submit issues, or open pull requests. Feedback and improvements are welcome!
📄 License This project is licensed under the MIT License.
🙌 Acknowledgements TMDB API
YouTube Data API
Created with ❤️ by BenDev202 less Copy Edit
Let me know if you want a logo, badges (e.g. build passing, MIT License), or screenshots included in