• Vue (dev version 3.0.0 and project created with Vue CLI 4.5.12)
• Tailwind CSS (dev version 2.2.17)
• PokéAPI

(back to top)

• Yarn (dev version 1.22.17)

Install the latest version of npm, on the command line, run the following command:

> npm install -g npm

Once you have npm installed you can run the following both to install and upgrade Yarn:

> npm install --global yarn

• Node.js (dev version 16.13.2)

(back to top)

Follow the steps below to get started with this project's development environment.

1. Clone this repository and navigate into it.

> git clone https://github.com/VichithLy/pokedex-vue-tailwindcss
> cd pokedex-vue-tailwindcss/

2. Install the project's dependencies.

> yarn install

3. Start the development environment.

> yarn serve

4. You should see the following after yarn serve

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://xxx.xxx.x.x:8080/

Open the link in your browser. You're now ready to develop!

If you want to compile and minify the project for production, use

> yarn build

To lint and fix files, use

> yarn lint

(back to top)

• ESLint: recommended rules
• Vue Style Guide: recommended rules
• Prettier: code formatter

(back to top)

• Get all Pokémon from the API
• Search Pokémon by Name or ID
• Sort Pokémon by
  • Region (only 1)
  • Type (maximum 2)
  • Name (ascending and descending)
  • ID (ascending and descending)
• Get some basic information about a Pokémon
  • Name
  • Number (or ID)
  • Types
  • Base stats
  • Small description
  • Measurements (height and weight)
  • Evolution chain
  • Main abilities
• Reset form
• Search bar with autocomplete search suggestions
• Display simple and detailed cards of Pokémon
• Infinite scroll (Load more Pokémon)
• Loading skeletons (on first landing Home page and when a Pokémon is loading)

(back to top)

.
├── ...
├── src
│ ├── assets # Images, icons and style files
│ ├── components # Vue Components
│ ├── composables # Composable functions (for Vue Composition API)
│ ├── constants # Mostly enumerations (types, regions, etc.)
│ ├── data # Static JSON data (regions, types, Pokémon)
│ ├── router # Vue router configuration
│ ├── services # PokéAPI requests
│ ├── store # Vuex configuration
│ ├── utils # Useful functions
│ └── views # Main pages of the app
└── ...

(back to top)

• More details on Pokémon
• Dark Mode
• Progressive Web App
• Offline mode
• Multilingual app

(back to top)

MIT License

Copyright (c) 2022 Julien MILLOT and Vichith LY

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

(back to top)

Julien MILLOT - https://github.com/Jilvo
Vichith LY - [email protected] - https://github.com/VichithLy
Project link: https://github.com/VichithLy/pokedex-vue-tailwindcss

(back to top)

• Inspired by PokéDex
• PokéAPI Docs
• Heroicons
• Tailwind CSS Docs
• Vue.js Docs
• Vuex Docs
• Pokémon Logo Generator

(back to top)