https://github.com/rurickdev/aplidex
https://github.com/rurickdev/aplidex
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rurickdev/aplidex
- Owner: rurickdev
- Created: 2020-05-20T05:02:15.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T18:21:48.000Z (over 3 years ago)
- Last Synced: 2025-01-23T22:20:37.694Z (over 1 year ago)
- Language: JavaScript
- Size: 2.11 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ApliDex
### Aplidex it's a Single Web Page that shows the info of the pokemon using the [Pokeapi](https://pokeapi.co)
### To use it only go to [aplidex.rurick.dev](https://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
### Desktop Version
### Mobile Version
[Detailed version](https://www.figma.com/file/BbhSm3yKgu2Y5TGbxfde8J/ApliDex?node-id=0%3A1)
---
This is what was finished
### Desktop Version
### Mobile Version
You could check the production version in [https://aplidex.rurick.dev](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)](https://nextjs.org)
- [React Window](https://react-window.now.sh)
- [Bulma (Sass)](https://bulma.io)
- [Now (CI / CD)](https://now.sh)
- [Amazon Web Services](https://aws.amazon.com/)
- [S3](https://aws.amazon.com/es/s3/)
- [Lambda](https://aws.amazon.com/es/lambda)
- [Figma (Mockups)](https://figma.com)
- [GitLab Board (Organization)](https://gitlab.com/rurickdev/aplidex/-/boards)
- [Material Design Community Icons](https://materialdesignicons.com)
- [Pokéapi](https://pokeapi.co)
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