Pokemon App retrieves data from The Pokemon API. You can get to view a list of pokemons and also view the full details of each pokemon by clicking on the pokemon image. It is built using React and utilizes Redux state management.
Home Page
Single Pokemon Page
- A list of Pokemons from the official Api.
- When the image of a single item in the list is clicked, the full details will be displayed.
- You can navigate back to the home page.
| Dependency | Use |
|---|---|
| axios | Promise based HTTP client for the browser and node.js |
| enzyme | JavaScript Testing utility for React and its components |
| lodash | provides utility functions for simplifying the handling and edition of objects, arrangements, etc |
| prop-types | Declare types for props passed into React components |
| react | React library |
| react-dom | React library for DOM rendering |
| react-redux | Connects React components to Redux |
| react-router-dom | React library for routing |
| redux | Library for unidirectional data flows |
| redux-thunk | Async redux library |
| Dependency | Use |
|---|---|
| babel-eslint | Lint modern JavaScript via ESLint |
| eslint | Lints JavaScript |
| eslint-plugin-react-hooks | Adds additional React-hooks-related rules to ESLint |
| eslint-plugin-import | Advanced linting of ES6 imports |
| eslint-plugin-react | Adds additional React-related rules to ESLint |
| axios-fetch-mock | Mock fetch calls |
| jest | Automated testing framework |
| node-fetch | Make HTTP calls via fetch using Node - Used by fetch-mock |
| react-test-renderer | Render React components for testing |
| @testing-library | Test React components |
| redux-immutable-state-invariant | Warn when Redux state is mutated |
| redux-mock-store | Mock Redux store for testing |
| stylelint | Lints Css |
| stylelint-config-standard | Advanced linting configoration for css |
| stylelint-csstree-validator | Advanced linting validation for css |
| stylelint-scss | Adds additional SCSS-related rules to StyleLint |
- Node
- Npm
- git clone
git@github.com:tzvaita/react-redux-api-spa.git - cd react-redux-api-spa
- npm install
- npm start
- Install React developer tools and Redux Dev Tools in Chrome.
👤 Tennyson Takudzwa Zvaita
- Github: @tzvaita
- Twitter: @tennyzvaita
- LinkedIn: tennyzvaita
- Mail: tzvaita@gmail.com
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Microverse
- You can access all the design info (color, typography, layouts) in this link:
- Design
- Design idea by Nelson Sakwa on Behance
- Pokeapi
- Bootstrap