https://github.com/subhangisati/movie-search-system-react

It is an end-to-end system to search movie. A single-page web application that allows users to search for movies based on their queries. It searchs movies based on name provided. It searches the most relevant movie to the input query.
https://github.com/subhangisati/movie-search-system-react

html-css-javascript react reactjs webapp webdevelopment-project

Last synced: 28 days ago
JSON representation

It is an end-to-end system to search movie. A single-page web application that allows users to search for movies based on their queries. It searchs movies based on name provided. It searches the most relevant movie to the input query.

• Host: GitHub
• URL: https://github.com/subhangisati/movie-search-system-react
• Owner: SubhangiSati
• Created: 2024-07-06T18:18:10.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-06T19:43:27.000Z (7 months ago)
• Last Synced: 2024-11-08T14:48:42.208Z (3 months ago)
• Topics: html-css-javascript, react, reactjs, webapp, webdevelopment-project
• Language: JavaScript
• Homepage:
• Size: 1010 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Movie Search App - Application Based on React

### About the Project

A single-page web application that allows users to search for movies based on their queries. It searchs movies based on name provided. It searches the most relevant movie to the input query.

### Technologies

- **React**

  - Hooks

  - Components

- **CSS**

  - CSS Flex

- **JavaScript**

  - Fetch API

  - ES6

- **API**

  - OMDB API

### Libraries Used

- `styled-components`

- `axios`

### API Used

Open Movie Database (OMDB) API

Generate your API key from: [OMDB API Key](http://www.omdbapi.com/apikey.aspx)

### API Information

- **Method**: `GET`

- **Search URL**: `https://www.omdbapi.com/?s={MOVIE_NAME}&apikey={API_KEY}`

- **Movie Details URL**: `https://www.omdbapi.com/?i={MOVIE_ID}&apikey={API_KEY}`

### How It Works

1. Enter a movie name in the search input.

2. The app fetches movie information from the OMDB API.

3. The information is returned as a JSON object.

4. React components structure the data into a presentational format.

5. CSS creates a visually appealing and user-friendly application.

### Screenshots

The UI looks like:-

![Initial UI](I1.png)

![First Image](I2.png)