Aplidex it's a Single Web Page that shows the info of the pokemon using the Pokeapi
To use it only go to aplidex.rurick.dev
The objective is to create a Single Page Application (SPA) that shows a list of pokémon and when one its clicked the side panel shows the details of the selected pokémon like in this mockups
This is what was finished
You could check the production version in https://aplidex.rurick.dev
Note: there is a little easter egg in this app. Could you find it?
Tip: inspect my picture
Technologies Used:
- NextJs (ReactJs)
- Bulma (Sass)
- Now (CI / CD)
- Amazon Web Services
- Figma (Mockups)
- GitLab Board (Organization)
- Material Design Community Icons
- Pokéapi
Thanks to NextJs it posible to use Server Side Rendering to optimase loading times, and using react window the big grid (~900 items) its virtualized to reduce the rendering in screen. With Bulma the style it's easy to make because of his column system based on flexbox. Using Now for the deploy allows to deploy every commit and merge directly to the web. AWS S3 was used as cdn to have an space to save all the static files like images and a Lambda serves a json with the data of the user Figma allows to create amazing mockups in an easy way. GitLab's kanban board, Issues and Milestones lets organice and define objetives to complete de challenge. The pokeapi was used to get all the info and sprites of pokémon