This is a Pokedex Explorer where you can browse through a list of Pokemon, view detailed information and stats of each Pokemon, add them to your favourites and filter/search by the name of the Pokemon or by their type.
View Pokedex Explorer: https://pokedex-explorer-jf.netlify.app
- ⚡️ Table View of Pokemon List: Data is being fetched on the fly with the use of Apollo whilst browsing through the list
- ❤️ Favourites Management: Users can add and remove their favourites from a separate page with the use of 🍍Pinia
- 🔍 Easy Searching of Pokemon: Users can search easily looking for a Pokemon or can filter by type
- 🌟 Simple UI/UX: Users can enjoy a smooth experience browsing through the list whether they are on their desktop machine or their mobile device
- Sort data by column
- Pinia Persist Storage for Favourites
- Improve GQL implementation with codegen generation
- Add more TypeScript types
Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
| Package Manager | Command |
|---|---|
| yarn | yarn install |
| npm | npm install |
| pnpm | pnpm install |
| bun | bun install |
These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
This section covers how to start the development server and build the project for production.
To start the development server with hot-reload, run the following command. The server will be accessible at http://localhost:3000:
npm run dev(Repeat for npm, pnpm, and bun with respective commands.)
Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node v21.3.0 or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
To build your project for production, use:
npm build(Repeat for npm, pnpm, and bun with respective commands.)
Once the build process is completed, your application will be ready for deployment in a production environment.