Merge pull request #289 from khushi-purwar/dev-kp

Added Movie Finder App

Author: harshita2216

Index.md

@@ -108,5 +108,7 @@
 | [Sudoku Solver](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Sudoku%20Solver) |It solves Sudoku using backtracking|
 | [Counter APP](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/counter_App) |It is a simple react app which is used to incere or decrease the value of counter.
 | [BMI Calculator (JS)](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/BMI%20Calculator%20(JS)) |Calculates the Body Mass Index of a person, provided with a BMI chart.
+| [React Movie Finder Application](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/react-movie-app) |A single page web application that allows users to search movies based on their query.
 | [Maths Quiz Game](https://github.com/nisha331/Web-dev-mini-projects/tree/main/Maths%20quiz%20game) | A maths quiz game for kids to practice addition.
-| [Personal Blog Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Personal-blog) |A simple and responsive personal blog template.
+| [Personal Blog Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Personal-blog) |A simple and responsive personal blog template.
+

react-movie-app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

react-movie-app/README.md

@@ -0,0 +1,62 @@
+# Movie Finder App - React Based Application   
+
+### About the Project
+A single page web application that allows users to search movies based on their 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 API key from : http://www.omdbapi.com/apikey.aspx
+
+### API Info
+
+* 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
+
+- Search a movie in the search input
+- Grabs the movie information from OMDB API.
+- Information is returned has a JSON object
+- Using React components to structure data into presentational format
+- Using CSS to create visually appealing and user friendly application
+
+### Screenshots
+
+Initially, the UI looks like:
+
+<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-kp/react-movie-app/Screenshots/ss1.png?raw=true" />
+
+Type your movie in the search bar
+
+<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-kp/react-movie-app/Screenshots/ss2.png?raw=true" />
+
+After clicking on any movie, first it will show the loader and then the movie detailed information
+
+<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-kp/react-movie-app/Screenshots/ss3.png?raw=true" />
+
+<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-kp/react-movie-app/Screenshots/ss4.png?raw=true" />
+
+### Live Demo
+
+<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/dev-kp/react-movie-app/Screenshots/demo.gif?raw=true" />