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:
- Install Node.js and use
node -v
to check version. - IMP Note: You might need to use sudo depending on the npm configuration.
- Install Angular CLI as
npm install -g @angular/cli
- Clone or download this repo.
- Run
npm install
inside this project folder to install all dependencies. - Make sure you use the latest version of the CLI (upgrade guide below)
- I have set the
serviceWorker
flag tofalse
inangular.json
: So Now there are two ways to start the server:
-
If
false
- Without Service Worker
- Run
ng serve
to see the app in action (trynpm start
in caseng serve
fails). - Connect to app on
localhost:4200
(I useng 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
)
- Run
- With Service Worker
- Due to
angular-pwa
this can can only be viewed on production builds so useng build --prod --serviceWorker true
, this creates a build in\dist
directory. - To serve this you'll need http server :
npm install -g http-server
- Run the server using
http-server -c-1 dist\pokedex
- Due to
- Without Service Worker
-
If
true
- With Service Worker
- 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. - To serve this you'll need http server :
npm install -g http-server
- Run the server using
http-server -c-1 dist\pokedex
- As service worker is enable here, it can can only be viewed on production builds so use
- With Service Worker
Upgrading Angular CLI version
- Run the below commands - use "sudo" only on Mac/ Linux.
sudo npm uninstall -g angular-cli @angular/cli
npm cache clean --force
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.