https://github.com/kadirkarabacak/usepopcorn

Exiciting film site
https://github.com/kadirkarabacak/usepopcorn

Last synced: about 2 months ago
JSON representation

Exiciting film site

• Host: GitHub
• URL: https://github.com/kadirkarabacak/usepopcorn
• Owner: KadirKarabacak
• Created: 2023-12-29T15:32:08.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-29T22:27:57.000Z (about 1 year ago)
• Last Synced: 2023-12-30T16:46:00.845Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://usemypopcorn.netlify.app/
• Size: 1.51 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React usePopCorn project 🍿🎬

**This project is a movie site which using React features.**

Live Version 🟢 usePopCorn

## What you can do with this project?

- You can **search** for a movie with a specific name.

- You can get more information about the movie by clicking on the movie you are looking for. Film length, production date, film genre, film content, producer name, actors and imdb rating.

- You can **rate** the movie you watched and add it to your watched list.

- You can change your rating and remove any movie you want from your watched list.

## Which React features did I use?

- React controlled elements to take control of search input.

- Conditional rendering depending on search status. "Start searching", "Loading", "Not Found" etc.

- Fetching data from API based on search key.

- Custom hooks to fetch data, save local storage and keyPress situations.

- useState and useEffect to keep UI sync with data.

- Complately reusable and flexible StarRating component which can be used other projects. Used Proptypes, external state.

- Clearing previous API calls after each data entered in the input field to improve performance.

- UseRef to select an element in the component in order not to break the declarative structure of React.

![React-use-Pop-Corn](public/usePopCorn.gif)