Spec - Sturlen/pokedex-pwa GitHub Wiki

Technical Specification

Written by Sturle

I'm making this to make it easier for myself to see where I wanna go with the Pokedex idea. This is not finished, but ya gotta start somewhere.

Scenarios

Scenario 1

Jessie and James have finally had enough of being electrified by Pikachu, and want to know what types would be effective against it. They sneakily break into the nearest Poké Center and open the Pokedex App. From the main page, they selected the Type Effectiveness page (WIP).

They knew pikachu was a pure electric type, so James tapped Electric. Blazingly fast the machine then displayed the types of move that would be super effective or ineffective. And there it was! Ground was the only effective type. They then ran out to steal a new Pokémon.

Scenario 2

Biker Jonas gets off his Harley Davison bike after a hard shift at the Fax Machine factory. He just had an idea for a painting he wanted to make, and sits down in the sofa with his all-american iPad. While scratching his greasy sideburns he opens the Pokedex App. He doesn't have a particular Pokémon in mind, so he goes for the Pokedex option. The entire National Dex is then at his very large fingertips. Since he was looking for cute, he decided to go for pure fairy types. He tapped Fairy as a filter and the list changed instantly. Scrolling for a bit, he found the adorable Swirlix.

Fluffball He taps on Swirlix's card, then on the the its image to see it in glorious fullscreen. He had found his Nirvana. He then brought out his favorite colors and brushes, and got to work.

Non-goals (maybe future goals)

No berries, items, etc. I want the focus to be on Pokemon, their moves and their types. Items, locations, berries and eggs can be considered for a future release. No Localization, everything in V1 will be in English. Should be a goal in the future though. No Onigiri for you. Selection of multiple Pokémon. Pokemon will not link to their forms or evolutions.

Pages

Main view

When users open the app for the first time, they will see an App Bar on the top, a Bottom Navigation on the bottom and some content in the middle. The bottom navigation will let you go between all the main categories, which for now is Pokémon and Moves. Clicking on a navigation button will transition the page with a fade. Navigation will change the pathname, and push it to the

Pokémon List

A scrollable list of less-detailed Pokémon Cards. Uses infinite downward scrolling. Show a skeleton for each Pokemon before its loaded. Tapping a card will display the detail page for that Pokémon.

Display:

  • Pokedex Nr.
  • Name
  • Types

Try icons ground

Pokemon Details

A full detail page for a single Pokemon. Displayed above other content. Render Details Show a high res picture of the Pokemon, which can be interacted with to see it in fullscreen. Show copyright info here.

Also display:

  • National Pokedex Nr., as #NNN
  • Name, in Titlecase
  • Types
  • Stats, Atk, Def, Sp. Atk, etc.
  • Vulnerable to (2x damage) moves
  • Resistant to (1/4x damage) moves
  • Immune to (0x damage) moves

Events

Dismiss when swiped or with navigate back event.

Move list

Move Details

  • Learned from (TM,HM, level, etc.)
  • Super effective against Types
  • Not very effective against Types
  • Useless against Types

Type Effectiveness (v2)

Select a Pokémon type (primary!, secondary)

is it really necessary then?

Backend requirements

Hosting

Will use Heroku, as it is in my price range, has good support and I am familiar with it. Could probably run on a toaster, so I don't see it becoming very expensive.

Backend API

GrapQL seems like the easiest alternative. Good schema with types and support for autocomplete and other tooling. I find it and would like to try it properly.

Web Server

Use NodeJS and Express. It's what I am used to, and it easily supports GraphQL.

Data Storage

Right now we are fetching the data from someone else's server. This is not very reliable and their API is poorly suited for this app. For now this will work, but a database should be considered.