Expanded Pokedex app designed and created for learning purpose
- 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.
- HTML
- CSS
- JavaScript
- React
- React-query
- Auth0
- Vite
- 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.
https://radiant-choux-0a80ea.netlify.app/
- 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)
- Thanks to the PokeAPI - my favourite (and challenging) free Public API!
- Used the awesome Pokemon icons created by Roundicons Freebies - Flaticon
