🍿 usePopcorn

An interactive React application that enables users to search for movies, view detailed metadata via the OMDB API, give custom star ratings, and maintain a personalized watched list with automated summary statistics.

Built as part of Jonas Schmedtmann’s React course to master modern React architecture, custom hooks, and advanced state management patterns.

---

🚀 Key Features

• Live Movie Search: Asynchronous queries with real-time result counts and loading state management.
• Detailed Movie Views: Dynamically fetches plot details, release years, runtime, and cast information.
• Interactive Rating System: Custom, fully reusable star-rating component with dynamic hover states.
• Watched List & Analytics: Aggregates total runtime, average IMDb rating, and average personal rating automatically.
• Persistent Storage: Synchronizes watched movies state with the browser's localStorage API.
• Keyboard Shortcuts: Global event listener (Enter key) to instantly focus the search bar.

---

🛠️ Architecture & Concepts Demonstrated

This project demonstrates core React architectural principles required for production applications:

1. Advanced Component Composition

Avoided prop drilling by leveraging the children prop to compose flexible layout structures (Main, Box, MovieList). This pattern keeps component interfaces clean and modular.

2. Custom Hooks Extraction

Extracted business logic and side effects into clean, reusable custom hooks:

• useMovies: Handles API data fetching, race conditions, abort controllers, and error boundaries.
• useLocalStorageState: Encapsulates reading from and writing to localStorage seamlessly with useState.
• useKey: Encapsulates global keyboard listener attachment and cleanup routines (useEffect).

3. Side Effect & Lifecycle Management

• Utilized AbortController in useEffect cleanup functions to cancel pending HTTP requests on dynamic query changes, avoiding memory leaks and unnecessary network overhead.
• Managed dynamic page title changes synchronized with the current movie selection.

4. Controlled Components & Ref Hook (useRef)

• Applied useRef to target DOM nodes directly for search input focus without trigger-causing re-renders.
• Extracted reference counts to persist user interactions across component renders.

---

💻 Tech Stack

• Frontend: React.js, JavaScript (ES6+), HTML5, CSS3
• API Integration: OMDB RESTful API
• State Management: React Hooks (useState, useEffect, useRef, Custom Hooks)
• Tooling: Create React App / Vite

---

⚙️ Getting Started

Prerequisites

• Node.js (v16.0 or higher)
• npm or yarn
• OMDB API Key (free at omdbapi.com)

Installation

1. Clone the repository:

   git clone [https://github.com/your-username/usepopcorn.git](https://github.com/your-username/usepopcorn.git)
   cd usepopcorn