Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 2 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 (almost 3 years ago)
Default Branch: main
Last Pushed: 2023-12-23T06:20:19.000Z (about 1 year ago)
Last Synced: 2023-12-23T07:26:26.205Z (about 1 year 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: 40
Watchers: 1
Forks: 13
Open Issues: 0
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)