A pixel-perfect, enterprise-grade Netflix clone featuring real-time movie data, infinite scrolling, and a fully responsive design. Built entirely with vanilla JavaScript—no frameworks, just modern web development best practices.
Features • Demo • Quick Start • Documentation • Contributing
- ✨ Features
- 🎯 Why This Project?
- 🚀 Live Demo
- 🛠️ Tech Stack
- 🎨 Design System
- 🔌 API Integration
- ♿ Accessibility
- 📸 Screenshots
- 🏃 Quick Start
- 📖 Documentation
- 🧪 Testing
- 🌍 Browser Support
- 🚢 Deployment
- 🤝 Contributing
- 🙏 Acknowledgments
- 📧 Contact
|
🎯 Dynamic Content
|
🎨 Rich UI/UX
|
|
📱 Responsive Design
|
⚡ Performance
|
|
♿ Accessibility
|
🔧 Technical Excellence
|
This Netflix Clone demonstrates enterprise-level frontend engineering skills:
- ✅ Framework-Free Mastery — Proves deep JavaScript understanding without framework dependency
- ✅ API Integration — Real-world RESTful API consumption with error handling
- ✅ Scalable Architecture — BEM methodology, component-based design, separation of concerns
- ✅ Production-Ready — Performance optimized, accessible, and deployment-ready
- ✅ Best Practices — Follows industry standards for HTML, CSS, and JavaScript
Perfect for showcasing to recruiters, hiring managers, and development teams.
Note: This is a frontend-only application. No authentication is required to browse content. All movie data is fetched in real-time from the TMDB API.
Try these features:
- 🎬 Browse trending and popular movies
- 🔍 Search for your favorite titles
- 📱 Test responsive design on different devices
- ⌨️ Navigate using keyboard only (Tab, Enter, Escape)
| Technology | Version | Purpose |
|---|---|---|
 |
HTML5 | Semantic markup and structure |
 |
CSS3 | Styling, animations, and responsive design |
 |
ES2020+ | Application logic and interactivity |
 |
API v3 | Real-time movie data and images |
| Tool | Purpose |
|---|---|
| Git | Version control |
| VS Code | Code editor |
| Live Server | Local development server |
| Vercel / Netlify | Production deployment |
| Chrome DevTools | Debugging and performance profiling |
- BEM (Block Element Modifier) — Scalable naming convention
- CSS Custom Properties — Design tokens and theming
- CSS Grid & Flexbox — Modern layout systems
- Mobile-First Approach — Progressive enhancement
- Component-Based Styling — Modular and reusable
- ES6+ Syntax — Modern JavaScript features
- Async/Await — Clean asynchronous code
- Event Delegation — Efficient event handling
- Custom State Management — Vanilla JS state system
- Module Pattern — Organized code structure
/* Primary Brand Colors */
--netflix-red: #e50914;
--netflix-black: #141414;
--netflix-dark-gray: #181818;
/* Background Colors */
--bg-primary: #141414;
--bg-secondary: #181818;
--bg-tertiary: #2f2f2f;
/* Text Colors */
--text-primary: #ffffff;
--text-secondary: #e5e5e5;
--text-muted: #808080;
/* Status Colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;
/* Overlay & Shadow */
--overlay-dark: rgba(0, 0, 0, 0.7);
--shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.5);/* Font Family */
--font-primary: "Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Font Sizes */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 2rem; /* 32px */
--text-4xl: 2.5rem; /* 40px */
--text-5xl: 3rem; /* 48px */
/* Font Weights */
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-8: 3rem; /* 48px */
--space-10: 4rem; /* 64px *//* Mobile First */
--breakpoint-sm: 640px; /* Small devices (phones) */
--breakpoint-md: 768px; /* Medium devices (tablets) */
--breakpoint-lg: 1024px; /* Large devices (laptops) */
--breakpoint-xl: 1280px; /* Extra large (desktops) */
--breakpoint-2xl: 1536px; /* 2X large (large desktops) */This project uses The Movie Database (TMDB) API for real-time movie data.
| Endpoint | Purpose | Parameters |
|---|---|---|
/trending/all/{time_window} |
Fetch trending content | time_window: day or week |
/movie/popular |
Get popular movies | page, language |
/movie/top_rated |
Fetch top-rated movies | page, language |
/movie/upcoming |
Get upcoming releases | page, region |
/movie/{movie_id} |
Get movie details | movie_id, append_to_response |
/genre/movie/list |
List all genres | language |
/discover/movie |
Discover movies by filters | with_genres, sort_by |
/search/movie |
Search movies by title | query, page |
- Create a free account at TMDB
- Navigate to Settings → API
- Request an API key (developer account)
- Copy your API key and add it to
.env
TMDB_API_KEY=your_api_key_hereThis project follows Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards:
- ✅ Semantic HTML5 — Proper use of
<header>,<nav>,<main>,<section>,<article>,<footer> - ✅ ARIA Labels — Screen reader support for interactive elements
- ✅ Keyboard Navigation — Full site navigation via keyboard (Tab, Enter, Escape, Arrow keys)
- ✅ Focus Management — Visible focus indicators on all interactive elements
- ✅ Color Contrast — Minimum 4.5:1 contrast ratio for text
- ✅ Alt Text — Descriptive alternative text for all images
- ✅ Skip Links — Skip to main content for screen reader users
- ✅ Responsive Text — Text scales appropriately for readability
| Key | Action |
|---|---|
Tab |
Navigate forward through interactive elements |
Shift + Tab |
Navigate backward through interactive elements |
Enter / Space |
Activate buttons and links |
Escape |
Close modals and overlays |
Arrow Keys |
Navigate within content sliders |
Explore detailed views of the application across different devices and features.
|
Hero Section & Content Rows |
Interactive Movies |
Tablet Responsive Layout |
Mobile-Optimized Interface |
Before you begin, ensure you have:
- Node.js (v14.0.0 or higher) (Optional) — Download here
- Git — Download here
- TMDB API Key — Get one free here
- A modern web browser (Chrome, Firefox, Safari, Edge)
# 1. Clone the repository
git clone https://github.com/mujeebdev3/netflix-clone-vanilla-javascript
# 2. Navigate to project directory
cd netflix-clone
# 3. Create environment file (Optional)
cp .env.example .env
# 4. Add your TMDB API key to .env
## Update this with your actual API key if running a server/backend.
TMDB_API_KEY=your_actual_api_key_here
# 5. Open with Live Server or any local server
# No build process needed - it's vanilla JavaScript!Option 1: VS Code Live Server (Recommended)
- Install the Live Server extension
- Right-click
index.html - Select "Open with Live Server"
Option 2: Python HTTP Server
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000Option 3: Node.js HTTP Server
npx http-server -p 8000Then open http://localhost:8000 in your browser.
For detailed documentation, please refer to:
- 📘 SETUP.md — Complete setup and configuration guide
- 🤝 CONTRIBUTING.md — How to contribute to this project
- 🛡️ CODE_OF_CONDUCT.md — Community guidelines
- 🔒 SECURITY.md — Security policy and reporting vulnerabilities
- Navigation bar is sticky on scroll
- Hero banner auto-rotates every 5 seconds
- Movie cards display hover effects
- Modal opens/closes correctly
- Search functionality works
- Content loads dynamically from API
- Responsive design works on mobile, tablet, desktop
- Keyboard navigation functions properly
- Error states display appropriately
Tested on:
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Opera 76+
- Lighthouse Accessibility Score: 95+
- WAVE Web Accessibility Evaluation: 0 errors
- Keyboard Navigation: Fully functional
| Browser | Version | Status |
|---|---|---|
 |
90+ | ✅ Fully Supported |
 |
88+ | ✅ Fully Supported |
 |
14+ | ✅ Fully Supported |
 |
90+ | ✅ Fully Supported |
 |
76+ | ✅ Fully Supported |
- CSS Grid & Flexbox
- CSS Custom Properties (CSS Variables)
- ES6+ JavaScript (Arrow functions, async/await, template literals)
- Fetch API
- IntersectionObserver API (for lazy loading)
| Platform | Difficulty | Build Time | Custom Domain | HTTPS | CDN |
|---|---|---|---|---|---|
| Vercel | ⭐ Easy | ~1 min | ✅ | ✅ | ✅ |
| Netlify | ⭐ Easy | ~1 min | ✅ | ✅ | ✅ |
| GitHub Pages | ⭐⭐ Medium | ~2 min | ✅ | ✅ | ✅ |
| Cloudflare Pages | ⭐⭐ Medium | ~2 min | ✅ | ✅ | ✅ |
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page or submit a new issue.
- Fork the Project
- 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
Please read our Code of Conduct before contributing.
- Follow BEM naming convention for CSS
- Use ES6+ JavaScript features
- Write meaningful commit messages (use Conventional Commits)
- Test across multiple browsers before submitting PR
- Ensure accessibility compliance (WCAG 2.1 AA)
- Update documentation for new features
- The Movie Database (TMDB) — For providing the excellent movie database API
- Netflix — Design inspiration and UI reference
- MDN Web Docs — Web development documentation
- CSS-Tricks — CSS techniques and best practices
- JavaScript.info — Modern JavaScript tutorials
- Web.dev — Performance and accessibility guidelines
- Stack Overflow — Problem-solving and debugging
- GitHub — Open-source collaboration platform
- The open-source community for inspiration and guidance
- TMDB for their generous free API tier
- All contributors who help improve this project
Created by AbdulMujeeb
Have feedback, suggestions, or questions? I'd love to hear from you!
- 🐛 Report Issues - Open an Issue
- 💡 Share Ideas - Start a Discussion
