https://github.com/eddiejibson/pokemon

https://github.com/eddiejibson/pokemon

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/eddiejibson/pokemon
• Owner: eddiejibson
• Created: 2019-04-29T18:17:14.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-02T18:40:15.000Z (over 5 years ago)
• Last Synced: 2024-10-12T04:27:16.133Z (about 1 month ago)
• Language: Vue
• Homepage: https://pokemon.jibson.me
• Size: 157 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PokéAPI UI

> Simple UI utilizing some of Pokéapi's endpoints

[Live version here](https://pokemon.jibson.me)

For this project, I used [NuxtJS](https://nuxtjs.org/) which is effectively VueJS with added features such as Server Side Rendering which is handy for SEO purposes. I made sure to also use vanilla Javascript in manipulating the DOM in some places - to prove I'm not limited just to using Vue all the time. This may have looked strange in some places or inconsistent as it wasn't needed, but such is the reason behind it. The only other dependencies used were [Axios](https://github.com/axios/axios) which was used for retrieving data from the API endpoints provided (I'm aware I could have used vanilla XHR within JavaScript, but chose this simply for ease) and [Ionicons](https://ionicons.com/) which isn't a library as such and basically provides the SVG icons I used. **No CSS frameworks have been used at all**.

## Pages

`pages/index.vue` [/] - Allows user to browse Pokémon. Will intially fetch 15 Pokémon and render on the server (server side rendering). Then, upon a user's scroll to the bottom of the page, an additional 15 Pokémons will load (and so on). In the event a user clicks on a Pokémon card, they will be transported to a more advanced card (with the statistics and such).

`pages/pokemon/_id.vue` [/pokemon/id] (where _id is the index of the Pokémon being viewed) - This will display one card with the specified Pokémon's information (statistics and the like). As well as this, it also displays various options to favourite the current Pokémon or compare it with another. On favourite of a pokemon, they can also remove such here, too.

`pages/favourites` [/favourites] - This will display cards of the user's favourite Pokémon. On click (like the index page), it will also take the user to a more detailed version.

## Plugins

There is only one plugin that is being used:

`plugins/pokemon.js` - This was obviouisly self-written to handle API requests properly and perform other various functions that may be required globally (e.g setting & getting data from localstorage e.t.c).

## Running yourself

```bash

# Install dependencies

npm install

# Run in developer mode

npm run dev

# Or, in production

npm run build

npm run start

```