kitharvey / pokedecksbackend

Server side of the pokédecks app.

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

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.

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 Repo

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

Backend

• 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. Install NPM packages

        yarn

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

        MONGODB_URI=xxxxxxxxxxxxxxxxxxxxxxxx

12. 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.
3. Sort or filter your favorite pokémons.
4. 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