• PokeApp
  • 👉 Website
  • Table of Contents
  • Features
  • Frontend
  • Deployment
    • Deploying the app for production
    • Deploying the app locally
  • API endpoints
  • Djoser API endpoints
  • Problems

1. Has user authentication (login/sign-up) mechanisms

   • Utilized Djoser and JWTAuthentication
   • Each user has to login with a username and password

2. Allows users to view the current portfolio of pokemon they own and their stats

   • Each pokemon may only be owned by a single user and identified by its unique ID
   • Each owner may own any number of pokemon
   • Each pokemon has a (int) level 1-100 that is randomly generated upon capture

3. Allows users to add newly captured pokemon to their portfolio, and remove pokemon from their portfolio

   • Show a randomly generated pokemon from the dataset (from the list of all pokemons), available for capture
   • To capture, we implement a simple “guess the number” game (see https://www.funbrain.com/games/guess-the-number)
   • If the user correctly guesses the number within 3 tries, the pokemon is captured, and added to the user’s portfolio
   • If the user is not able to guess the number within 3 tries, the pokemon is returned to the wild, the page is refreshed, and a new game instance is generated (with new randomly generated pokemon)

4. Allows users to view the names of pokemons they do not own yet (only names, not the stats)

Home

Collection

Catch

Login

• Front end -> AWS EC2 (T2.micro)
• Back end -> AWS EC2 (T2.micro)
• Database -> AWS Relational Database Service (PostgreSQL)

Start the Django server

py -m pip install -r requirements.txt // in backend folder
py manage.py makemigrations
py manage.py migrate
py manage.py collectstatic
py manage.py run server 0.0.0.0:80

• Set up database
  • py manage.py makemigrations
  • py manage.py migrate
• Start the Django server
  • py manage.py runserver
  • Go to localhost:8000 to view the PokeApp
• Run frontend react app
  • npm install
  • npm run start
• Build frontend react app
  • npm run build
• Update frontend static files
  • Run npm run build in frontend directory
  • Copy the build folder to the backend directory

1. pokemon/unownedpokemon/ - a GET request here should return a serialised list of all the pokemon that the user does not currently own
2. pokemon/mypokemon/ - a GET request here should return a serialised list of the pokemon owned by the user
3. pokemon/allpokemon/ - a GET request here should return a serialised list of all pokemon in the dataset
4. pokemon/addpokemon/ - a POST request here should add a pokemon to the user’s collection
5. pokemon/releasepokemon/ - a POST request here should allow a user to discard one of his pokemons in his collection

Create User:

POST http://localhost:8000/auth/users/

HEADERS Content-Type application/json

BODY
{
    "username": "Jing Hua",
    "password": "123toh45",
    "re_password": "123toh45"
}

Get JSON Web Token:

POST http://localhost:8000/auth/jwt/create/

HEADERS Content-Type application/json

BODY
{
    "username": "Jing Hua",
    "password": "123toh45"
}