Go to file
Jason Zhu ad2317b524 Update webstorm Project.xml 2023-06-02 22:15:35 +10:00
.husky Added husky and lint-staged for pre-commit check 2023-03-18 23:31:08 +11:00
.idea Update webstorm Project.xml 2023-06-02 22:15:35 +10:00
.storybook Rename .storybook/main.js to main.ts and add type to make it works 2023-05-15 20:03:20 +10:00
README Modified README to add .gif files 2023-05-31 14:43:47 +10:00
public Modified README to add .gif files 2023-05-31 14:43:47 +10:00
src Centralised all infoDialogSlice related storybook preparation in infoDialogSlice.storybook.ts to reduce code footprint 2023-05-20 15:46:28 +10:00
.eslintrc Add eslint no-empty-function rule to stop reporting building problem 2023-05-31 19:39:19 +10:00
.gitignore Add *.log and *.tsbuildinfo into .gitignore 2023-05-17 21:51:17 +10:00
.nvmrc modified .nvmrc file 2023-03-21 17:28:18 +11:00
.prettierrc Fixed lint & format using prettier and eslint 2023-03-18 23:21:20 +11:00
README.md Update deploy website 2023-05-31 18:23:26 +10:00
lint-staged.config.js Changed lint-staged.config.js for json files 2023-03-26 18:39:34 +11:00
package.json Add eslint no-empty-function rule to stop reporting building problem 2023-05-31 19:39:19 +10:00
tsconfig.json Use Create-React-App absolute path feature 2023-03-19 15:17:58 +11:00
yarn.lock Add eslint no-empty-function rule to stop reporting building problem 2023-05-31 19:39:19 +10:00

README.md

PokeRtk = Pokedex + Redux-Toolkit

A simple PokemonCard catalogue frontend app, build with React, Redux-Toolkit, Material-UI. It uses backend powered by PokeAPI.

It's a learning project following pokedex. In this project, I practised following skills:

  • Use React to create View for FE
  • Use redux, react-redux, redux-toolkit (RTK) for state management
  • Use storybook to design component
  • Use RTK Query for fetching

Feature of the pokedex application:

  • Display list of pokemon cards
  • Fetching pokemon cards by region fetching by region
  • Filter pokemon cards by type filter by type
  • Sort pokemon cards by name or ID sort by name
  • Filter pokemon cards by search naming filter by search
  • Show pokemon card detail show detail

Deployed on Netlify

Available Scripts

In the project directory, you can run:

  • nvm use: use node version according to .nvmrc
  • yarn start: run the development server
  • yarn storybook: start storybook server to check component rendering
  • yarn build: build the app for production

TODO

  • Fix css of Filter component
  • Fix Poke logo size via css
  • Add day/night toggle in header
  • Add github icon in header
  • Use material.ui to display pokemon cards
  • Fix round corner of InfoDialog component
  • Add error handling for data fetching across app
  • Deploy through netlify