PokeApp 3.0

Expanded Pokedex app designed and created for learning purpose

General Information

• PokeApp 3.0 is a Pokedex app serving data from PokeAPI created with HTML, React, Tailwind, React-Query and a number of smaller libraries

• It's a practice project meant to serve widely-available information in an interesting, consistent way.

• Learning and practicing usage of HTML, React, Tailwind, React-Query. Big challenges included fetching large amounts of data in an efficient way, handling deeply-nested and filled with reference urls responses from PokeAPI, debugging issues coming from React, third-party libraries and those specific to environment (iOS).

• The process of creating this app was very enjoyable. It's work in progress, but all the refactors, bugs, read threads on Stack Overflow and realizations of dead-ends made it a great experience.

Technologies Used

• HTML

• CSS

• JavaScript

• React

• React-query

• Auth0

• Vite

Features

• Fetching and caching data from PokeAPI with react-query (which I love btw)

• Very cute dark mode switch I've built myself with awesome icons referenced below. Also cool gradient backgrounds for Pokemon (colored based on types!)

• Ability to authenticate with Google using Auth0 and change profile picture to select custom images & backgrounds. This functionality is a mock-up in a sense that there is no backend, no accounts are created, users are not kept track of at all.

• Ability to mark Pokemon as caught, check that list and type distribution visualised with a pie-chart. Normally this functionality would be available for users who log in only, but as I have no backend here to store data for users it's available publicly and persisted only via local storage.

• Acknowledging bug: Pokemon search functionality doesn't work on iOS and I have no idea on how to fix it.

Project Status: In Progress

Live Version:

https://radiant-choux-0a80ea.netlify.app/

To Be Done

• I would like to re-implement basic data fetching, management, sorting and filtering - with those features available in two different areas of the app with slightly differently structured data there is a lot of repetition, props passed only for the components to work and general spaghetti

• Further code clean-up - there is some repetition that doesn't make code any more readable thus worth fixing, some unused imports and props probably

• Performance optimizations, considered lazy loading in some places and Suspend, but need to do metering first

• Understanding and fixing a funny bug with seeded random number generator used for Pokemon of the Day on 12/12/2022 (with other days supplied as seed it functioned well, with this - not so much)

Acknowledgements

• Thanks to the PokeAPI - my favourite (and challenging) free Public API!

• Used the awesome Pokemon icons created by Roundicons Freebies - Flaticon

Contact