Pokénex

Pokédex app in card style. Swipe through pokemon cards or guess who's that pokemon?.
Explore the docs »

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

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

• PokéAPI
• Nextjs
• TypeScript
• Sass
• redux-toolkit
• Framer
• next-auth
• MongoDB
• Mongoose
• Pokémon Assets from HybridShivam

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

1. Clone the repo

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

2. Go to project directory

   cd pokenex
   

3. Install NPM packages

   yarn
   

4. Create MongoDB, set up your database and copy MONGODB_URI
5. Create Github-OAuth and copy client ID and secrets
6. Create .env file and add URI and keys

   MONGODB_URI = "xxxxxxxxxxxxxxxxxxxxxxxx"
   GITHUB_CLIENT_ID = "xxxxxxxxxxxxxxxxxxxxxxxx"
   GITHUB_CLIENT_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxx"
   AUTH_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxx"
   JWT_SECRET = "xxxxxxxxxxxxxxxxxxxxxxxx"
   JWT_SIGNING_PRIVATE_KEY = "xxxxxxxxxxxxxxxxxxxxxxxx"
   NEXTAUTH_URL = "http://localhost:3000/"
   

7. Start the application in your localhost

   yarn dev
   

   
   
   

Roadmap

This project is still under development.

Contact

Kit Harvey - linkedIn

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