usePopcorn is a sleek, highly interactive movie database application. It allows users to search for real-time movie data, view detailed information, rate movies, and maintain a personalized "Watched" list with integrated analytics.
- 🔍 Live Movie Search: Instant fetching from the OMDb API as you type.
- ⭐ Custom Star Rating: A fully interactive, animated rating component built from scratch.
- 📊 Personal Dashboard: Track your cinema habits with automated stats (average ratings, total runtime).
- 🎨 Premium UI/UX: Features Glassmorphism, smooth staggered animations, and a high-contrast dark theme.
- 💾 Data Persistence: Uses Local Storage to ensure your watched list remains saved after refresh.
- ⌨️ Pro Navigation: Includes custom hooks for global keyboard shortcuts (e.g.,
Enterto focus search).
- Framework: React.js (Functional Components & Hooks)
- Styling: Tailwind CSS (PostCSS)
- Animation: Framer Motion
- Icons: Lucide React
- API: OMDb (Open Movie Database)
The project is organized into modular components to ensure a "Clean Code" approach:
| Component Type | Responsibility |
|---|---|
| UI | Global elements like Logo, StarRating, Loader, and ErrorMessage. |
| Layout | Structural wrappers like NavBar, Main, and the toggleable Box. |
| Movies | Search results and the deep-dive MovieDetails view. |
| Watched | The summary dashboard and the list of saved movies. |
| Hooks | Reusable logic for APIs (useMovies), Keys (useKey), and Storage. |
- Clone the repository:
git clone [https://github.com/your-username/usePopcorn.git](https://github.com/your-username/usePopcorn.git)
- Install dependencies:
npm install
- Start the application:
npm run dev
##📝 Core Logic: Custom Hooks To keep the components lean, the app utilizes specialized hooks:
useMovies(query): Handles complex fetching, loading states, and error handling for the API.
useLocalStorage(initialState, key): Keeps the watched movies list persistent across sessions.
##🤝 Contributing Contributions are what make the open-source community such an amazing place to learn, inspire, and create.
Fork the Project.
Create your Feature Branch (git checkout -b feature/AmazingFeature).
Commit your Changes (git commit -m 'Add some AmazingFeature').
Push to the Branch (git push origin feature/AmazingFeature).
Open a Pull Request.
##⭐ If you find this project useful, please consider giving it a star on GitHub!