usePopcorn is a sleek, modern React application that transforms how you track your cinematic journey. Search thousands of movies, dive into detailed plots, and build your ultimate watched list—all with a seamless, keyboard-optimized interface.
Experience real-time movie discovery powered by the OMDb API. Results appear as you type (3+ characters), giving you instant access to global cinema.
Your opinion matters! Rate movies on a 1–10 scale using our custom, hand-crafted Star Rating component. See your rating persist alongside official IMDB scores.
Manage your "Watched" collection with ease.
- Persistent Storage: Thanks to
localStorage, your list is safe even if you refresh or close the tab. - Dynamic Stats: Automatically calculates your personal viewing statistics (average ratings, total runtime).
Keyboard enthusiasts will love the accessibility:
Enter: Instant focus on the search bar.Esc: Quickly exit movie details and return to your list.
The app's logic is cleanly encapsulated into three core custom hooks:
useMovies(query): Manages complex API fetching, including loading states and request abortion (race condition safety).useLocalStorageState(initial, key): A powerful abstraction that syncs your app's state with the browser's storage effortlessly.useKey(key, action): A clean, reusable way to bind keyboard shortcuts to specific UI actions.
- Component Composition: Uses 'children' props for maximum layout flexibility.
- State Management: Sophisticated use of standard Hooks and custom wrappers.
- Cleanup Patterns: Ensures zero memory leaks or ghost event listeners.
-
Clone & Enter
git clone https://github.com/Mohamed-Alkafory/usePopcorn.git && cd usePopcorn
-
Install & Run
npm install && npm start -
Enjoy! Open http://localhost:3000 and start exploring.
This project was built as part of my professional front-end development path. I developed this application while following Jonas Schmedtmann's highly acclaimed course:
The Ultimate React Course 2025: React, Next.js, Redux & More
Through this project, I masterfully applied:
- Advanced State Management: Lifting state, derived state, and the specialized
useLocalStorageStatepattern. - The Power of Effects: Handling side effects, API integration, and cleanups using
useEffect. - Custom Hook Logic: Encapsulating complex behavior into reusable primitives like
useMoviesanduseKey. - Component Composition: Building a flexible UI architecture using the
childrenprop pattern to avoid "prop drilling".
Built with ❤️ by Mohamed Hamed