pokegames icon indicating copy to clipboard operation
pokegames copied to clipboard

A minigame where you can explore and catch the pokemon. Built with React JS and consumes public PokeAPI. ๐Ÿบ

Pokegames

โšก Pokemon Apps ใƒพ(โ‰งโ–ฝโ‰ฆ*)o


Typescript ReactJS ViteJS Emotion Forks Contributors Stars

A pokemon minigame where you can explore and catch them all. Built with React JS and consumes public PokeAPI.๐Ÿบ

Features๐Ÿ’ก

By using Pokegames you can:

  • [x] Get all list pokemon.
  • [x] Catch a pokemon and bring it to inventory.
  • [x] Animation pokeball when catch the pokemon.
  • [x] Give nickname to a pokemon
  • [x] Releasing a pokemon
  • [x] Pokemon stats

Technology ๐Ÿ‘จโ€๐Ÿ’ป

Pokegames is created using:

  • Typescript - TypeScript is JavaScript with syntax for types.
  • React - React a JavaScript library for building user interfaces.
  • Vite - Next Generation Frontend Tooling.
  • Emotion - Emotion is a library designed for writing css styles with JavaScript.
  • Vercel - Vercel is a cloud platform that we use to deploy our apps.

Requirements ๐Ÿ“ฆ

  • Node JS 16 or later
  • Typescript v4 or later

Installation ๐Ÿ› ๏ธ

Run the website locally

git clone https://github.com/radespratama/pokegames.git pokegames

Setting up the project

cd pokegames

# Install deps
yarn || npm install

# Copy Pokemon API in .env file
# You can visit https://pokeapi.co

VITE_POKEMON_API= <API URL HERE>
VITE_POKEMON_IMAGE=https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/

Starting server

yarn start || npm run start

๐Ÿคž Contributing

After setting up the project, and making changes:

git add .
git commit -m "commit message"
git push YOUR_REPO_URL YOUR_BRANCH

๐ŸŽ‰ Thanks to

  • @kuronekony4n [#15] img blurred (heres how to fix it)