/fe-pokemon-picker

Primary LanguageTypeScript

Pokemon Picker 🎒

Frontend application to search and collect pokemons from Pokeapi.co

Features

In this application “Pokemon Picker” have some features, such as

  • Search, sort & filter pokemon
  • View detail of pokemon (ability, stats, etc)
  • Catch pokemon
  • List caught pokemon
  • Release pokemon
  • Select avatar
  • Explained on Tutorials (my collection > 3 dot icon )

Example

How to catch & release the pokemon

  • (sc: documentation/img/catching.gif) alt text

Result

you could try the Deployed Frontend here fe-pokemon-picker.vercel.app

  • please inform me, if the server got down, chat me at linkedin

Run locally

Requirements

NodeJs

Clone the project

git clone (url)

Go to the project directory

cd (folder name)

Install depedencies

npm i

Run NextJs project

npm run dev

Finally your Pokemon Picker has been launch 🚀🚀🚀

Run unit testing

Start check test case

npm run test

Run Integration testing

Start check

npm run cypress open

Tech stack

Frontend

  • node js
  • next js
  • typescript
  • eslint
  • prettier
  • antd
  • axios
  • dexie js (connect to browser DB)
  • jest
  • cypress
  • etc

Browser Database

  • IndexedDB

Utilities

  • git
  • github
  • vscode

Devops

  • vercel

Improvement

With all my lack skill and limited time. So there are many features that should be improved in the next progress. Such as:

  • Offline handler
  • More unit testing
  • More integration testing (E2E)
  • Etc

Author

@baariqazhar