https://github.com/azlibdar/usepopcorn-v2

usePopcorn allows users to search for movies, view details, and keep track of their watch history.
https://github.com/azlibdar/usepopcorn-v2

react reactjs usepopcorn usepopcorn-v2

Last synced: 21 days ago
JSON representation

usePopcorn allows users to search for movies, view details, and keep track of their watch history.

• Host: GitHub
• URL: https://github.com/azlibdar/usepopcorn-v2
• Owner: azlibdar
• Created: 2024-06-07T14:21:59.000Z (5 months ago)
• Default Branch: master
• Last Pushed: 2024-06-07T14:27:35.000Z (5 months ago)
• Last Synced: 2024-06-07T15:58:52.817Z (5 months ago)
• Topics: react, reactjs, usepopcorn, usepopcorn-v2
• Language: JavaScript
• Homepage: https://usepopcornv2.netlify.app/
• Size: 203 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# usePopcorn v2 🍿

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.




## About the Project 🔠

usePopcorn allows users to search for movies, view details, and keep track of their watch history. It utilizes the [OMDb API](http://www.omdbapi.com/) 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](https://usepopcorn.netlify.app/) site, but with additional features and improvements made by me to enhance the learning experience.


 

## Features ✨

- 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


 

## Getting Started ⚛️

To get started with this project, follow these steps:

1. Clone the repository

2. Navigate to the project directory: `cd usepopcorn-v2`

3. Install dependencies: `npm install`

4. Start the development server: `npm start`

The application will now be running at `http://localhost:3000`.


 

## Learning Opportunities 📖

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


 

## Contributing 🎖️

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!




## Acknowledgements 📄 

This project was inspired by the [usePopcorn](https://usepopcorn.netlify.app/) 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]('https://github.com/')

Happy coding and enjoy your journey with React! 🚀