smavo-all / pokedex-angular-app

For The Love Of Pokemon.

A PWA (Progressive Web App) Built using Angular 9 with Service Workers. Works Offline and can be installed.
Built using the PokéAPI.

Website : hybridshivam.tech/pokedex
[For best experience use Chrome or any other Chromium-based browser]

Leave a ⭐ if you liked it, also share 🔗 with those who may be interested.

Screenshots

Versions

v1.0

• 807 Pokemon Species with all alternate forms including Alolan and Megas.
• Special Mega Evolution Animation for Desktop Clients. (Can be disabled)
• Abilities.
• Moves.
• Evolution Chains.
• Training, Breeding, Typing and Forms.
• Flavor Text according to the selected the Games.
• Works Offline. ✔️
• Can be installed. ✔️

Getting Started:

Repo with all the assets : PokeDex Assets

Setting up the environment:

1. Install Node.js and use node -v to check version.
2. IMP Note: You might need to use sudo depending on the npm configuration.
3. Install Angular CLI as npm install -g @angular/cli
4. Clone or download this repo.
5. Run npm install inside this project folder to install all dependencies.
6. Make sure you use the latest version of the CLI (upgrade guide below)
7. I have set the serviceWorker flag to false in angular.json : So Now there are two ways to start the server:

• If false

  • Without Service Worker
    1. Run ng serve to see the app in action (try npm start in case ng serve fails).
    2. Connect to app on localhost:4200 (I use ng serve -o --host 0.0.0.0 so that I can connect to the server via my Mobile device while on the same network and navigating to <ip-address-of-server>:4200)
  • With Service Worker
    1. Due to angular-pwa this can can only be viewed on production builds so use ng build --prod --serviceWorker true , this creates a build in \dist directory.
    2. To serve this you'll need http server : npm install -g http-server
    3. Run the server using http-server -c-1 dist\pokedex

• If true

  • With Service Worker
    1. As service worker is enable here, it can can only be viewed on production builds so use ng build --prod , this creates a build in \dist directory.
    2. To serve this you'll need http server : npm install -g http-server
    3. Run the server using http-server -c-1 dist\pokedex

Upgrading Angular CLI version

• Run the below commands - use "sudo" only on Mac/ Linux.

1. sudo npm uninstall -g angular-cli @angular/cli
2. npm cache clean --force
3. sudo npm install -g @angular/cli

Credits

Thanks to PokéAPI.co. & Veekun for the data, Bulbapedia for the images, duiker101 for the type icons and of course to Nintendo, Game Freak, and The Pokémon Company for making such an awesome series of games.

Copyright Notice

This is an unofficial, non-commercial, fan-made app and is NOT affiliated, endorsed or supported by Nintendo, Game Freak and The Pokémon Company in any way. Many images used in this app are copyrighted and are supported under fair use. Pokémon and Pokémon character names are trademarks of Nintendo. No copyright infringement intended.