Git Product home page Git Product logo

radespratama / pokegames Goto Github PK

View Code? Open in Web Editor NEW
51.0 1.0 22.0 1.44 MB

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

Home Page: https://pokegames.vercel.app

License: MIT License

HTML 3.03% TypeScript 96.14% JavaScript 0.82%
pokemon-api react typescript colorcrafts css-in-js emotion fun-project mini-project portofolio communityexchange

pokegames's Introduction

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:

  • Get all list pokemon.
  • Catch a pokemon and bring it to inventory.
  • Animation pokeball when catch the pokemon.
  • Give nickname to a pokemon
  • Releasing a pokemon
  • 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)

pokegames's People

Contributors

radespratama avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

pokegames's Issues

img blurred (heres how to fix it)

add this css code to make the all images rendered as pixelated img.

img{
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

Before
image

After
image

new minor feature

New minor feature:

  • New not found page
  • Checking status offline or online
  • New banner in splash screen
  • Update package version

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.