🎬 Netflix Application (Frontend Clone)

A Netflix-style web application built using React + Vite that allows users to browse and search movies with a modern UI inspired by Netflix.
The app fetches movie data from the OMDb API and displays movie details with a responsive design.

🔗 Live Demo: https://netflix-application-inky.vercel.app

---

📌 Overview

This project is part of my full-stack development learning journey. It focuses on building a production-style frontend, implementing authentication UI flow, and integrating external APIs to fetch movie data.

This project demonstrates:

• Modern frontend development with React
• API integration using OMDb API
• Responsive UI design
• Component-based architecture
• Authentication interface (Sign Up / Login)
• Deployment and environment configuration

---

✨ Features

✅ Netflix-style UI layout
✅ Sign up and login interface
✅ Search movies by title
✅ Fetch movie data using OMDb API
✅ Movie details display (poster, title, rating, etc.)
✅ Responsive design for mobile and desktop
✅ Clean component structure

---

🛠 Tech Stack

• Frontend: React.js, Vite
• Language: JavaScript (ES6+)
• Styling: CSS / Tailwind (update if needed)
• API Integration: OMDb API
• Deployment: Vercel

---

🌐 API Used

This project uses OMDb API for fetching movie data.

• API Provider: https://www.omdbapi.com
• Provides movie information including title, rating, poster, and details
• REST-based API integration

---

🔐 Environment Variables

Create a .env file in the root directory: VITE_OMDB_BASE_URL=https://www.omdbapi.com VITE_OMDB_API_KEY=YOUR_API_KEY

⚠️ Never expose API keys publicly.

---

📁 Project Structure

netflix-application/ │ ├── public/ # Static assets ├── src/ # React components and logic ├── api/ # API related logic (if used) ├── server/ # Backend/proxy (if implemented) ├── index.html # Entry file └── package.json # Dependencies

---

🚀 How to Run Locally

1. Clone repository

git clone https://github.com/avinashmax/netflix-application.git cd netflix-application

2. Install dependencies

npm install

3. Start development server

Open the local URL shown in terminal (usually http://localhost:5173).

---

📸 Screenshots

Example:

---

🤖 AI-Assisted Development

This project was developed with assistance from Antigravity AI for:

• UI layout generation
• component structure suggestions
• development workflow guidance

All implementation and architecture decisions were done independently.

---

🎯 Learning Outcomes

• React component-based architecture
• API integration and asynchronous data handling
• Authentication UI flow
• Frontend project structure
• Modern build tools and deployment practices

---

🔮 Future Improvements

• Movie watchlist feature
• User authentication with backend
• Pagination and filtering
• Movie categories and recommendations
• Performance optimization

---

👨‍💻 Author

Avinash S
Aspiring Cloud Engineer | Full Stack Developer | AWS & Python

GitHub: https://github.com/avinashmax