Build a UI to search the Movie DB: The user should be able to enter some text into a search field, see and browse the results from the Movie DB. Anything else it does it up to you!
- Use React to demonstrate knowledge of the framework used in the role
- Use Webpack and Babel to build and run the code
- Use dotenv to store the Moive DB API token and don't commit
.env
file in the repo - Create unit tests using Jest
- Create an autocomplete suggestions widget to help users find movies quickly
- Make network requests to search the Moive DB as a user types
- Debounce to limit network request intervals to no more than 2 per second
- Display the selected movie details below the search field
- Create a route for each movie so these can be bookmarked by users
- Retrieve movie posters to give more colour to users
- axios has been used to make HTTP requests.
- React Router has been used for routing. Movie info can be access by directly entering a URL, for example http://localhost:8080/movie/680
- Clone the repo
- Rename the file in the root of the project named
.env.example
to.env
- Replace the string
abc123
with your The Movie DB API Read Access Token. Your access token can be found at the bottom of the The Movie DB account settings page. - In the terminal in the root of the project:
- Install dependencies using the command
npm install
oryarn
- Run the development server using the command
npm start
oryarn start
- Install dependencies using the command
- Navigate to the URL
http://localhost:8080/
in your browser
Run Jest using the command npm test
or yarn test
- Limited movie ditails
- Basic CSS styling
- Minimium accessibility
- Display more movie information and images
- Improve layout of movie information
- Better handling of error situations
- Activity indicators
- More beautiful design
- Greater test coverage
- Simulate and test search text input events using React Testing Library or Enzyme