Pokedex Vue Tailwindcss
A simple online Pokédex using PokéAPI.
A simple online Pokédex using PokéAPI.
View Demo
Table of Contents
Getting Started
Built With
- Vue (dev version 3.0.0 and project created with Vue CLI 4.5.12)
- Tailwind CSS (dev version 2.2.17)
- PokéAPI
Prerequisites
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
Installation
Follow the steps below to get started with this project's development environment.
- Clone this repository and navigate into it.
> git clone https://github.com/VichithLy/pokedex-vue-tailwindcss
> cd pokedex-vue-tailwindcss/
- Install the project's dependencies.
> yarn install
- Start the development environment.
> yarn serve
- 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
Style Guide
- ESLint: recommended rules
- Vue Style Guide: recommended rules
- Prettier: code formatter
Features
- 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)
Folder Structure
.
├── ...
├── 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
└── ...
Improvements / Features to add
- More details on Pokémon
- Dark Mode
- Progressive Web App
- Offline mode
- Multilingual app
License
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.
Authors and Contact
Julien MILLOT - https://github.com/Jilvo
Vichith LY - ly.vichith@gmail.com - https://github.com/VichithLy
Project link: https://github.com/VichithLy/pokedex-vue-tailwindcss
Acknowledgments
