MarySed/movie-widget

🎬 Movie Widget using The Movie Database API, React Hooks, Redux, React-Bootstrap, and Sass

Setup Instructions:

1. Run yarn to install dependencies.

2. Create a .env file and inside of that file make REACT_APP_API_KEY = your API key.

3. Run yarn serve and go to http://localhost:3000 in your browser.

4. Or, if you want to check the production version, run yarn build and yarn start and go to http://localhost:5000 in your browser.

Check it out here on Heroku.

Scripts List

yarn serve

Runs the app in the development mode.
Open http://localhost:3000 to see it.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.

yarn start

Runs your production app from the build folder at http://localhost:5000.

Notes

API Endpoints used are:

• The Movie Database Multi Endpoint for Search results.
• The Movie Database Movies Endpoint for Movie trailers
• The Movie Database TV Endpoint for TV trailers.
• The Movie Database People Endpoint for actor biographies.

I'm using one extra endpoint in order to match the project idea shown in the requirements.

If there is a mismatch between API calls and results shown, it is because of extra calls to get actor biographies.

For reusability, I was curious if it meant reusability throughout the same project, or reusability in external projects. I decided to design with external projects in mind, and tried to use props more than useSelector so components were not too closely tied to the specific redux store this project uses.

Tips:

1. Search "Dwayne Johnson" to see not only some great movie examples but also what it looks like when text is shortened.
2. This app is fully responsive, so feel free to look at it on your cellphone too.