kitharvey / pokedecks

A pokédex in card style. Explore and swipe through random pokemon cards and play "who's that pokemon?".

Pokedecks

A pokédex in card style. Explore and swipe through random pokémon cards and play "who's that pokémon?".
Explore the docs »

View Demo · Report Bug · Request Feature · How it's made?

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contact
6. Acknowledgements

About The Project

There are many great pokédex apps online but I found most of them are similarly built, displayed in a grid, scroll and click a pokémon to view more details about it. So I build my own but in a different style.

No mobile version yet.

Features:

• Swipe pokémon cards to explore
• Add to favorites
• Play "who's that pokémon?"
• Climb the leaderboard

Of course, I will be adding more soon or you can request a feature.

Built With

Frontend

• PokéAPI
• React
• TypeScript
• Tailwind CSS
• react-query
• Framer
• pokémon Assets from HybridShivam
• Firebase-Auth

Backend Repo

• NodeJS
• ExpressJS
• MongoDB
• Mongoose

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• yarn

  npm install --global yarn

Installation

Set up client

1. Clone the frontend repo for client

   git clone https://github.com/kitharvey/pokedecks.git

2. Go to project directory

   cd pokedecks

3. Install NPM packages

   yarn

4. Create .env file and add server url

   REACT_APP_BACKEND_SERVER_URL = "http://localhost:5000";

5. Create a firebase web app and add Firebase SDK to .env file

   REACT_APP_API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxx";
   REACT_APP_AUTH_DOMAIN = "your_firebase_app.firebaseapp.com";
   REACT_APP_PROJECT_ID = "your_firebase_app";
   REACT_APP_STORAGE_BUCKET = "your_firebase_app.appspot.com";
   REACT_APP_MESSAGING_SENDER_ID = "101010101010";
   REACT_APP_APP_ID = "xxxxxxxxxxxxxxxxxxxxxxxx";

6. Start the application

   yarn start

Set up server

7. Go to home directory

   cd ..

8. Clone the backend repo for server

   git clone https://github.com/kitharvey/pokedecksbackend.git

9. Go to project directory

   cd pokedecksbackend

10. Install NPM packages

    yarn

11. Create .env file
12. Create MongoDB Atlas account, set up your database and add MONGODB_URI to .env

    MONGODB_URI = xxxxxxxxxxxxxxxxxxxxxxxx;

13. Start the server, "http://localhost:5000"

    yarn dev

Usage

How to signin?

1. Go to Sign In page.
2. Sign in with Google or Github.
3. You'll be redirected to the dashboard.

How to explore?

1. Swipe/Drag the cards to see the next card.
2. Click the undo button to go back to the previous card.
3. Enter the pokémon name to search.
4. Click the heart icon to add/remove the pokemon card to/from your favorites.
5. Click the information icon to see more details about the pokemon.

How to play?

1. Guess the pokémon.
2. You have 4 options to choose which is the correct pokémon name.
3. Guess the correct answer and your score will increment by one.
4. Pick the wrong answer and your lives will decrement by one.
5. You only have 3 lives.
6. Score as many as you can before your lives run out.
7. Only your best score will be recorded on the leaderboard.

How to check account?

1. Click your name on the top right of the dashboard, then click account.
2. Check your details and favorite.
   • Sort or filter your favorite pokémons.
   • Click the delete button at the bottom to delete your account.

Roadmap

See the open issues for a list of proposed features (and known issues).

Contact

Kit Harvey - linkedIn

Project Link: https://github.com/kitharvey/pokedecks