https://github.com/mahmudhmh/react-movies-watchlist-context-api

This project is a simple Movie Watchlist application built using React Hooks, Context API for state management, and LocalStorage for persisting data.
https://github.com/mahmudhmh/react-movies-watchlist-context-api

context-api dispatcher hooks localstorage react reactjs reducer

Last synced: 24 days ago
JSON representation

This project is a simple Movie Watchlist application built using React Hooks, Context API for state management, and LocalStorage for persisting data.

• Host: GitHub
• URL: https://github.com/mahmudhmh/react-movies-watchlist-context-api
• Owner: mahmudhmh
• Created: 2024-05-20T16:59:39.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-21T04:57:49.000Z (9 months ago)
• Last Synced: 2024-11-13T12:44:42.911Z (3 months ago)
• Topics: context-api, dispatcher, hooks, localstorage, react, reactjs, reducer
• Language: JavaScript
• Homepage: https://movies-watchlist-context-api.vercel.app
• Size: 3.21 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Movie Watchlist with React Hooks, Context API, and LocalStorage

This project is a simple Movie Watchlist application built using React Hooks, Context API for state management, and LocalStorage for persisting data. Users can add movies to their watchlist, mark them as watched, and remove them from the list.

### Screenshots

![Context 1](./screens/context-1.jpeg)

![Context 2](./screens/context-2.jpeg)

![Context 3](./screens/context-3.jpeg)

![Context 4](./screens/context-4.jpeg)

![Context 5](./screens/context-5.jpeg)

### Features

- **Add Movies:** Users can add movies to their watchlist by entering the movie title and clicking the "Add" button.

- **Mark as Watched:** Movies in the watchlist can be marked as watched by clicking the checkbox next to each movie.

- **Remove Movies:** Users can remove movies from the watchlist by clicking the "Remove" button next to each movie.

- **LocalStorage Persistence:** The watchlist data is stored in the browser's localStorage, so it persists even after the browser is closed.

### Technologies Used

- React: JavaScript library for building user interfaces.

- React Hooks: Functional components utilize hooks like useState and useContext for managing state.

- Context API: Provides a way to pass data through the component tree without having to pass props manually at every level.

- LocalStorage: Browser-based storage mechanism for persisting data.

### How to Run

1. Clone this repository to your local machine.

2. Navigate to the project directory in your terminal.

3. Run `npm install` to install the project dependencies.

4. Run `npm start` to start the development server.

5. Open your browser and navigate to `http://localhost:3000` to view the application.

### Contributors

- [Mahmoud Hussien](https://github.com/mahmudhmh)