SteveSchilz / ReactMovieDB

Movie Browser Application from Jonas Schmedtman's Ultimate React Course on Udemy

React Open Movie Database

This simple react program uses the Open Movie Database to allow you to search for movies, and build a list of movies that you have seen with your own ratings for them. My version extends the version built in the class as follows: a) You can open items in the "Watched" List by clicking on them b) You can change your rating after the first time, and it will be recorded properly and the statistics updated.

This app was constructed as part of the Ultimate React Course on Udemy.com by Jonas Schmedtmann.

React Features Demonstrated

Basic React Features Including:

• React Components
• passing props to react components
• useState to save local state for the app
• useEffect hook to fetch movieData from the omdbApi

Setup and Running

In order to run this app you will need the following

1. Install Node.js for local development.

2. run npm install in the app folder

3. Obtain an OMDB key as described below and place it in a src/secrets.json file.

4. run npm start in the app folder

5. open a local browser at http://localhost:3000

OMDB Api Key

The Open Movie Database requires you to have an API key to access their database. For security, this key is not part of the GitHub project, but instead you will need to obtain your own key and create a src/secrets.json file to hold the key as described below.

You will need to create a free account to obtain the following key as described at omdbapi.com/apikey.aspx.

Once you have your key, place it in a plaintext file at "/src/secrets.json" with the contents as follows:

{
  "omdbApiKey" : "1a2a3a4a"
}

This approach of using a secrets file was found here. There are more advanced ways documented on GitHub at GtHub-Keeping Your Api Credentials Secure

TODO List

• Add tool tips to Star Rating components
• Make responsive for mobile

Create-React-App Readme

This app was bootstrapped using npx create-reac-app@5 projectNameThe default readme for react apps is found at ReadmeReact.md

Markdown Syntax

This file is a Markdown file, which is a plaintext file that can be rendered into HTML and is capable of containing hyperlinks, images, tables and other formatting syntax. See the GitHub Document Writing page for more information.