Problems and Solutions

• Store pokemon data locally so it is available offline

Solution

• Get pokemon data from pokeapi.com.
• Process the data then push it to a cloud database.
• Dump the data into text files. Text file allow us to get the data quickly with one request from the front-end
• Implement local first architecture to enable data availability. On user first visit, we will get the data from our cloud database, at the same time, fetch the text files and populate our local database in the background. On subsequent visit, data will be available locally so internet connection is no longer necessary.

• Minimalize pokemon sprite size to increase initial load speed

Solution

• Organize pokemon sprites into a spritesheet which will make sprite available in 1 request.
• Order sprites by id. Using pokemon id, we can programmatically calculate the coordinate of a sprite on the spritesheet.

• Display filter data without lag

Solution

• User input is continuous which cause the page to rerender for every character input.
• Re-rendering 800 pokemon at once is costly, we can fix this using virtualized window.
• Filtering is also costly, we can move the filter process to a worker thread so it doesn't block the main thread.

• Provide a way for user to update cache using service worker

Solution

• If there is a new service worker available, display on the footer an update button which will refresh the page and install the new service worker.