This is a web app that consumes the MovieDB API. You can check the API docs here
We're using a proxy server for the API which automatically injects an api_key query parameter so you don't have to ask for your own. This is its url: https://reactworkshop-api.herokuapp.com/
If you would like to continue this afterwards don't forget to change all API calls into the original API: https://api.themoviedb.org/
- Node: >= 10.16.0
- Yarn: >= 1.19.0
nvm use
yarn install
yarn start
Each challenge has its own branch. Before you start the challenge you must checkout to the corresponding branch. Before you move on to the next challenge first do git stash -u so that you can later continue if you want. Every challenge has a list of todos in the code to help you in the process.
Build search input with a button and text blow with the query, all this using setState.
Branch: challenge1
Note: we only want to show the query once the user has submitted it.
Todos
- Provide the necessary props to the input
- Handle the submission of the input
- Render the submitted query
Add useEffect to fetch the search results.
Branch: challenge2
Todos
Implement the closing detection for modals with a useEffect with a cleanup
Branch: challenge3
Todos
- Add a useEffect
- Add a window mousedown listener to detect outside clicks
- Note: use the
wasClickOutsidefunction for this
- Note: use the
- Add a window keyup listener to detect
Escapepresses
Memoize the cards in the search results
Branch: challenge4
Todos
Convert the value of the search input into a ref
Branch: challenge5
Todos
Use refs directly on elements
Branch: challenge6
Todos
- Remove the
inputValueRefand use a ref directly on the input - Instead of
document.getElementByIduse a ref
Instead of prop drilling the API configuration create a shared context and consume it using useContext directly.
Branch: challenge7
Todos
- Move the
useEffectthat fetches the configuration into a context provider - Add the context provider around the children in App.js
- Remove the configuration props in the tree and connect any component that needs it to the context
- Create a custom hook that consumes the context. E.g
useConfiguration
Implement the loading and error state in SearchResults only using useState
Branch: challenge8
Todos
Convert the loading, error and data state into a single useReducer
Branch: challenge9
Todos
Move the reducer inside SearchResults into a shared context.
Branch: challenge10
- Move the reducer into its own context provider
- Wrap the app with the context provider
- Consume the context using your custom hook
Move the fetch inside the SearchContextProvider.
Branch: challenge11
- Move the fetch code into
SearchContextProvider - Instead of
dispatchreturn an object with your own custom actions - Use the new function in SearchContextProvider
We left you some suggestions for future work on this project if you feel like. These don't have solutions made by us so they're completely up to you.
Add caching to the search reducer.
Hint: Use the page and query to determine if you already have the data in memory.
Implement a component to render the people media type.
Add a button to add a tv show or movie to your favorites.
Links:
Implement the favorites page.
Add a button to add a tv show or movie to your watchlist.
Links:
Implement the watchlist page.
Add filters for the type of media you'd like to search for.
Links:
Add a discover page
Add the features you would find useful and deploy your app to netlify or other cloud services.