A React-based movie discovery and rating application that allows users to search for movies, view details, rate them, and maintain a personal watchlist with comprehensive movie information.
usePopCorn is a comprehensive movie application that provides:
- Movie search and discovery functionality
- Detailed movie information and ratings
- Personal movie rating system
- Watchlist management
- Movie recommendations
- Responsive design for all devices
- Movie Search: Search for movies using the OMDB API
- Movie Details: View comprehensive movie information including ratings, cast, and plot
- Personal Ratings: Rate movies with a 5-star system
- Watchlist: Maintain a personal list of watched movies
- Statistics: View average ratings and watch statistics
- Responsive Design: Optimized for desktop, tablet, and mobile
- Keyboard Navigation: Enhanced accessibility with keyboard shortcuts
- Frontend: React 19.0.0
- API Integration: OMDB API for movie data
- Build Tool: Vite 6.1.0
- State Management: React hooks (useState, useEffect)
- Styling: CSS with modern design patterns
- Development: ESLint for code quality
- Node.js (version 18 or higher)
- npm or yarn
- OMDB API key (free at omdbapi.com)
- Clone the repository
- Navigate to the project directory:
cd Websites/usePopCorn/main - Install dependencies:
npm install
- Set up your OMDB API key in the
src/App.jsxfile:const KEY = "your-omdb-api-key-here";
- Start the development server:
npm run dev
- Open your browser and visit
http://localhost:5173
npm run dev- Start development servernpm run build- Build for productionnpm run lint- Run ESLintnpm run preview- Preview production build
src/
├── App.jsx # Main application component
├── data.js # Static data and constants
├── index.css # Global styles
├── main.jsx # Application entry point
├── StarRating.jsx # Star rating component
├── useKey.js # Custom hook for keyboard events
├── useLocalStorage.js # Custom hook for localStorage
└── useMovies.js # Custom hook for movie API
- Search input with real-time results
- Movie poster and basic information display
- Click to view detailed movie information
- Comprehensive movie information
- Star rating system (1-5 stars)
- Add to watched list functionality
- Movie poster and plot summary
- List of rated movies
- Average rating calculation
- Remove movies from watchlist
- Watch statistics
- Total number of watched movies
- Average rating across all movies
- Rating distribution
- Handles movie search functionality
- Manages API calls to OMDB
- Error handling and loading states
- Movie data management
- Persists watchlist data in localStorage
- Handles data serialization/deserialization
- Provides consistent data access
- Manages keyboard event listeners
- Handles Enter key for search focus
- Enhances accessibility
The application integrates with the OMDB API:
- Search: Find movies by title
- Details: Get comprehensive movie information
- Posters: Display movie posters
- Ratings: Access IMDB and other ratings
- Real-time search results
- Movie poster thumbnails
- Basic movie information
- Click to expand details
- 5-star rating interface
- Personal rating storage
- Average rating calculation
- Rating validation
- Add movies to personal list
- Remove movies from list
- Persistent storage
- Watch statistics
- Responsive design
- Loading states
- Error handling
- Keyboard navigation
- Smooth animations
The application uses localStorage to persist:
- Watched movies list
- Personal ratings
- User preferences
The application features:
- Clean, modern design
- Responsive layout
- Interactive star ratings
- Movie poster displays
- Loading and error states
This is a comprehensive movie application demonstrating:
- API integration with external services
- Custom React hooks
- Local storage management
- Component composition
- State management with hooks
- Responsive design principles
- Accessibility features
This project is for educational purposes.