Design a single page application, using React with Redux, that contains the following pages:
- An About page, which should just contain text with information about the application. Just a simple description of who built the app and when is fine.
- A Home page, which displays a collection of cat gifs in a carousel.
- We recommend using the public Giphy "Search" API to retrieve your data: Giphy "Search" API (Note: you will need to create an app on Giphy's site to obtain an API key.)
- You should fetch at least 5 gifs at a time, so the carousel will have several gifs the user can flip through.
- Your carousel should have a ‘Next’ button that will display the next gif when it is clicked.
- The Next button should be disabled when the user is viewing the last gif in the collection.
- Your carousel should have a ‘Previous’ button that will display the last gif the user viewed when it is clicked.
- The Previous button should be disabled if the user is viewing the first gif in the collection.
- The Home page should fetch the gifs upon load. It should display some kind of loader component instead of the carousel while the data is being fetched.
- Your data and internal UI state should be managed in Redux. You can use any redux architecture strategy you prefer.
- The app has been bootstrapped with create-react-app and Redux already installed, and some Redux boilerplate already set up for you.
- We have installed Material UI and Semantic UI React Frameworks for you to use for styling, but you can use any framework you wish, or none at all.
- We have installed Axios already but you can use any async library to handle your API call.
- We have installed Redux Thunk already and set up the middleware boilerplate for you to use it, but you can use any async redux middleware to manage your redux async actions that you like.
- A navigation bar that contains links to the Home page and About page, shared between both pages.
- Graceful error handling of the API call