A full Netflix UI clone built using React.js. After creating a basic onboarding page with HTML and CSS, this advanced project challenged me to build a scalable, component-based frontend application. It helped me understand React fundamentals, state management, and responsive layout practices.
✨ A milestone project that brought together React, reusable components, routing, and dynamic design.
- Full Netflix-inspired homepage
- React components for Navbar, Footer, Title Cards, etc.
- Video background and hover animations
- Sign Up / Login / Player pages
- Responsive design with modern layout structure
- Icon and image assets for realistic UI
Netflix-React-Clone/
├── public/
│ ├── _redirects
│ └── netflix_icon.ico
├── src/
│ ├── assets/
│ │ ├── cards/
│ │ │ ├── Cards_data.js
│ │ │ ├── card1.png ... card14.png
│ │ ├── images/
│ │ │ ├── *.svg, *.png, *.jpg
│ │ └── videos/
│ │ └── video1.m4v
│ ├── components/
│ │ ├── Footer/
│ │ ├── Navbar/
│ │ ├── Navbar-Signup/
│ │ └── TitleCards/
│ ├── pages/
│ │ ├── Home/
│ │ ├── Login/
│ │ ├── Player/
│ │ └── SignUp/
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js
- React.js
- Vite
- HTML5 & CSS3
- JavaScript (ES6+)
- Clone the repository:
git clone https://github.com/your-username/netflix-react-clone.git- Navigate to the project folder:
cd netflix-react-clone- Install dependencies:
npm install- Start the development server:
npm run dev- React component structuring and state management
- Conditional rendering and routing
- Handling media and assets efficiently
- Designing for responsiveness across devices
Kushagra Gupta
This project is open-source and available under the MIT License.