Styling and Design
The first step in building this application was deciding the initial layouts of the application. The initial idea was to give each Pokemon a map of where they were found individually, but that ended being scrapped for a much larger, worldwide map of the entire region. From there, minimaps of each region were laid out and a 'city card' was put next to it to present details of each area.
Next was designing each Pokemon's profile. There was definitely an emphasis on power-guaging just how each Pokemon was, so a move list and stat chart were the first things implemented. After that, I believed including a visual of all of the Pokemon's locations with blinking lights would create an illusion of a 'roadmap' of where to find them, making it much more visually appealing to a user. Finally, miscellaneous details of each one were added, including their typing, genus, etc.
Technical Process
When building the backend of this application, I had to ask myself whether I wanted to pull directly from the API itself or seed the data separately into my own table. The challenge here was that though the first option was easier and required less time, it wouldn't set up the relationships I need between the classes. For example, if I had used the API, I wouldn't have been able to separate all of the Pokemon by region or by typing. This made the data a lot more flexible to use. For the frontend, I had to consider a couple questions...
- How would I navigate from page to page?
- Where would I fetch the data and where am I storing state?
- How would I highlight different parts of the map?
- Is there a faster way of loading all of the data onto the DOM instead of all at once?
- Are there any external libraries that can help my App run smoother?