Viewfinder - Front End
The problem:
Usually when you want to find a film to stream online, you need to search through all the different streaming services or google.
Both of these can be quite awkward.
If a film or TV show isn’t available anywhere, you would then need to repeat that same search at an arbitrary later date.
The Solution:
Viewfinder allows you to create a ‘watch list’ of films/TV shows which will show you where those are available to stream. The app also displays where the film / TV is available.
Project Screen Shots
Installation and Setup Instructions
Clone down this repository. You will need node and npm installed globally on your machine.
Environment Variables
- REACT_APP_REST_API = http://localhost:5001/ - This is needed to ensure that the app is able to run on windows and macOS
- REACT_APP_API_KEY = (API key needed from https://www.themoviedb.org/)
Installation:
npm install
installs the relevant packages to run the app
npm start
Runs the front end in the development mode.
Opens http://localhost:3000 in your browser (click link if it doesn't).
The page will reload when you make changes.
You may also see any lint errors in the console.
To Start Server:
npm run dev
starts the back end of the app.
To Visit App:
localhost:3000/
Packages
The packages that are used in this app are:
- country-flag-icons: ^1.4.25,
- react: ^17.0.2,
- react-dom: ^17.0.2,
- react-router-dom: ^6.2.2,
- react-scripts": 5.0.0,
- styled-components": ^5.3.3,
- web-vitals": ^2.1.4
Credits
A project by:
Also thank you to https://www.themoviedb.org/ for allowing us to use the API.