---

🎬 ShortFlix – Netflix Style Movie Website

A Netflix-style short-form media streaming UI built using React.js (ES6). This project displays thousands of movies/TV shows with search, virtual scrolling, and category browsing.

---

🚀 Features

• 🎥 Netflix-style UI layout
• 🔍 Movie search functionality
• 📂 Category-based browsing
• ⚡ Virtualized grid for 10,000+ titles
• ♾️ Infinite scrolling
• 🧠 Debounced search input
• 🎨 Responsive modern design
• 🔐 Login UI page
• 🌐 REST API movie fetching

---

🏗️ Project Structure

ShortFlix_movie/
│
├── public/
│   └── index.html
│
├── src/
│   ├── components/
│   │   ├── Login.js
│   │   ├── MovieCard.js
│   │   ├── Navbar.js
│   │   └── VirtualizedTitleGrid.js
│   │
│   ├── pages/
│   │   ├── Home.js
│   │   └── Search.js
│   │
│   ├── hooks/
│   │   ├── useDebounce.js
│   │   └── useInfiniteTitles.js
│   │
│   ├── api/
│   │   └── imdbApi.js
│   │
│   ├── constants/
│   │   └── categories.js
│   │
│   ├── App.js
│   ├── index.js
│   └── styles.css

---

🛠️ Tech Stack

• React.js (ES6)
• JavaScript
• CSS
• REST API
• Virtualized List Rendering
• Infinite Scroll

---

📸 UI Screens

• Login Page
• Home Page (Netflix Layout)
• Movie Categories
• Search Page
• Movie Cards Grid

---

⚙️ Installation

1. Clone repository

git clone https://github.com/your-username/shortflix.git

2. Navigate to project

cd shortflix

3. Install dependencies

npm install

4. Start project

npm start

App will run on:

http://localhost:3000

---

🔌 API Integration

Movie data is fetched using:

src/api/imdbApi.js

You can replace API with:

• TMDB API
• IMDB API
• Custom backend
• JSON server

---

🎯 Assignment Requirements Covered

✔ 10,000 Movies UI ✔ REST API Integration ✔ Netflix Layout ✔ Search Functionality ✔ Virtualized Grid ✔ Infinite Scroll ✔ React ES6 ✔ Responsive UI

---

📦 Build for Production

npm run build

---

👨‍💻 Author

Deepanshu Singh B.Tech CSE Netflix UI Assignment Project

---

📜 License

This project is for educational purposes.

---