Welcome to the usePopcorn project! This is a movie search application built with React JS, designed to provide a hands-on learning experience for React beginners. It's a perfect starter project if you're just beginning your journey with React and want to get familiar with concepts like useState, useEffect, and component composition.
usePopcorn allows users to search for movies, view details, and keep track of their watch history. It utilizes the OMDb API to fetch movie data. The project aims to showcase the fundamental React concepts in a practical and engaging way.
This project was originally inspired by the usePopcorn site, but with additional features and improvements made by me to enhance the learning experience.
- Search for movies by title
- View detailed information about a movie (plot, rating, genre, etc.)
- Add movies to a personal watch list
- Remove movies from the watch list
- Responsive design for optimal viewing experience on different devices
To get started with this project, follow these steps:
- Clone the repository
- Navigate to the project directory:
cd usepopcorn-v2 - Install dependencies:
npm install - Start the development server:
npm start
The application will now be running at http://localhost:3000.
As a beginner in React, working on this project will help you understand and practice the following concepts:
- React components and component composition
- State management with
useState - Side effects and lifecycle methods with
useEffect - Handling user events and interactions
- Working with APIs and fetching data
- Conditional rendering
- List rendering
- CSS styling and responsive design
If you find any issues or have suggestions for improvements, feel free to open an issue or submit a pull request. Contributions are always welcome!
This project was inspired by the usePopcorn site and built with the help of various online resources and tutorials. Special thanks to the React community for their invaluable contributions and support.
The illustration used in this project is from GitHub
Happy coding and enjoy your journey with React! 🚀