packages/libraries used.

• react-loadable - A higher order component for loading components with dynamic imports.
• ant-design - An enterprise-class UI design language and React-based implementation.
• react - awesome view library
• react-router - for routing
• react-boilerplate - A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
• ImmutableJS - Immutable data structures can be deeply compared in no time. This allows us to efficiently determine if our components need to rerender since we know if the props changed or not!
• react-redux - state management library. The state of your whole application is stored in an object tree within a single store.
• redux-saga - middleware to handle promises
• reselect - Selectors can compute derived data, allowing Redux to store the minimal possible state.
• styled components - Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components.

Structure for the project

• Top Level

app
│
│
├── components  <--- stateless components
│   ├── Button
│   │   ├── css.js <-- styled component
│   │   └── index.js
│   │
│   └── Img
│       ├── css.js
│       └── index.js
│
├── containers <--- stateful components/route components
│   ├── App
│   │   ├── index.js
│   │   └── logo.png
│   │
│   ├── HomePage
│   │   ├── actions.js
│   │   ├── constants.js
│   │   ├── index.js
│   │   ├── reducer.js
│   │   ├── selectors.js
│   │   └── tests
│   │       ├── actions.test.js
│   │       └── reducer.test.js
│   └──NotFoundPage
│       └── index.js
│
│
├── index.html
├── routes.js
├── manifest.json
├── configureStore.js
└── app.js

remove the stubdata for pokemon list and pokemon nature

I would have used these apis:

To get the list of pokemons: https://pokeapi.co/api/v2/pokemon/

To get list of pokemon nature: https://pokeapi.co/api/v2/nature/

To get specific pokemon data: https://pokeapi.co/api/v2/pokemon/:id/

I planned to have a saga specifically when selectPokemon action is dispatched, that way I can fetch the specific pokemon data and dispatch supposedly an action called selectPokemonSuccess so that I will be able display pokemon image on the PokemonLineup component and other details about the pokemon when displayed on PokemonData component.

The current implementation would have been a little different specifically on design aspects, as currently I am only displaying pokemon name instead of an image of the pokemon on PokemonLineup component.