usePopcorn is a movie database app built with React.js and styled with CSS. This documentation will guide you through the features and usage of the application.
usePopcorn is a movie database app that allows users to search for movies using the Omdb API. The app provides a user-friendly interface to view detailed information about movies, add them to a watched movies list, and manage their watch history.
-
Movie Search:
- Users can search for movies using a query.
- Results are displayed with movie posters and basic information.
-
Movie Details:
- Clicking on a movie in the search results opens a sidebar with detailed information.
- Information includes poster, duration, genres, release date, name, IMDb rating, synopsis, cast, and director.
-
Rating and Watched List:
- Users can rate movies out of 10.
- They can add movies to a watched list, and the list shows total watch time, average IMDb rating, and average user rating.
-
Watched List Management:
- Removing the search query reveals the user's watched movies list.
- Users can remove movies from their watched list.
-
Error Handling:
- The app displays a loading state and handles errors gracefully.
- Node.js and npm installed on your machine.
- Internet connection to fetch movie data from the Omdb API.
- Clone the repository:
git clone [repository URL] - Navigate to the project directory:
cd usePopcorn - Install dependencies:
npm install
- Start the application:
npm start - Open your browser and go to
http://localhost:3000
Now, you can use the app to search for movies, view details, rate them, and manage your watched movies list.
- React.js
- CSS
- Omdb API
If you want to contribute to usePopcorn, follow these steps:
- Fork the repository.
- Create a new branch for your feature:
git checkout -b feature-name - Make your changes and commit them:
git commit -m 'Add feature' - Push to the branch:
git push origin feature-name - Create a pull request.