1. Must use the marvel API (https://developer.marvel.com/)
2. Primary language used must be JS
3. It must display a list of characters
4. Each character must link to their own details page
5. The layout must be responsive for desktop and mobile clients
6. Browser history must be maintained when navigating between views

When creating the app consider the following areas :

• Modern development practices
• Performance
• Scalability
• Testability

This has been tested with:

• [email protected]
• [email protected]
• [email protected]
• Chrome @ Version 55.0.2883.95

In your terminal...

• Run git clone https://github.com/patrickgordon/jumbo-marvel.git patrickgordon-jumbo-marvel
• Run cd patrickgordon-jumbo-marvel
• Run yarn install
• Run yarn start

• I used create-react-app to get the ball rolling.
• Decided to roll my own CSS to keep things lightweight
• Redux added to ensure that the route structure can be upheld and when opening that route there is already hydrated data
• I added selectors to show how they can be used in a redux app. Not really that necessary but gave some neatness to the app and allowed me to remove a lot of ternary operators from the render of CharacterDetails. Also speaks to the performance aspect of the spec due to reselect only recalculating when the redux state that it is using changes not when the component re-renders.
• There is a bug with the pagination when returning from looking at a character it resets the page to 1 despite being on a different page. One way to resolve this is by putting the pagination state in to the store - something like state.ui.pagination or similar. I just ran out of time.
• There is an issue where if you navigate to a different page, select a character, then refresh it will not have any details. One solution is to dispatch an action in componentWillMount or componentDidMount to fetch for a specific ID. I haven't implemented the appropriate actions etc. yet.

The way I have set up the directory structure draws some inspiration from this post

Below paths are relative to src

1. Hit the Index route which renders the App component and it's child CharactersList. Upon app starting it has dispatched to API to get data.
2. CharactersList shows the data once it has completed fetching.
3. Clicking on a character link navigates to /characters/:id which will render the CharacterDetails component