https://github.com/radespratama/pokegames

A minigame where you can explore and catch the pokemon. Built with React JS and consumes public PokeAPI. 🍺
https://github.com/radespratama/pokegames

colorcrafts communityexchange css-in-js emotion fun-project learn mini-project pokemon-api portofolio react reactjs typescript vite

Last synced: 6 months ago
JSON representation

A minigame where you can explore and catch the pokemon. Built with React JS and consumes public PokeAPI. 🍺

• Host: GitHub
• URL: https://github.com/radespratama/pokegames
• Owner: radespratama
• License: mit
• Created: 2022-04-19T13:09:48.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-09T02:22:31.000Z (over 1 year ago)
• Last Synced: 2025-03-29T07:33:34.786Z (7 months ago)
• Topics: colorcrafts, communityexchange, css-in-js, emotion, fun-project, learn, mini-project, pokemon-api, portofolio, react, reactjs, typescript, vite
• Language: TypeScript
• Homepage: https://pokegames.vercel.app
• Size: 1.41 MB
• Stars: 55
• Watchers: 1
• Forks: 20
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  

  
Pokegames

  
⚡ Pokemon Apps ヾ(≧▽≦*)o





![Typescript](https://img.shields.io/badge/Typescript-3B82F6?style=for-the-badge&logo=Typescript&logoColor=white)

![ReactJS](https://img.shields.io/badge/ReactJs-1F2937?style=for-the-badge&logo=react&logoColor=white)

![ViteJS](https://img.shields.io/badge/ViteJS-1F2937?style=for-the-badge&logo=vite&logoColor=white)

![Emotion](https://img.shields.io/badge/Emotion-352DAC?style=for-the-badge&logo=emotion&logoColor=white)

![Forks](https://img.shields.io/github/forks/radespratama/pokegames?style=for-the-badge)

![Contributors](https://img.shields.io/github/contributors/radespratama/pokegames?style=for-the-badge)

![Stars](https://img.shields.io/github/stars/radespratama/pokegames?style=for-the-badge)

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](https://www.typescriptlang.org) - TypeScript is JavaScript with syntax for types.

- [React](https://reactjs.org) - React a JavaScript library for building user interfaces.

- [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling.

- [Emotion](https://emotion.sh/docs/introduction) - Emotion is a library designed for writing css styles with JavaScript.

- [Vercel](https://vercel.com/) - 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

```bash

cd pokegames

# Install deps

yarn || npm install

# Copy Pokemon API in .env file

# You can visit https://pokeapi.co

VITE_POKEMON_API= 

VITE_POKEMON_IMAGE=https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/

```

#### Starting server

```bash

yarn start || npm run start

```

## 🤞 Contributing

After setting up the project, and making changes:

```git

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)