jackz070 / pokeapp3

Pokedex app that utilises react-query to fetch the data from PokeAPI, displays it, features auth0 authentication, ability to save Pokemon, change avatars, has dark/light mode. Created with React, TypeScript, React Query and Tailwind. Hosted on Netlify.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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!

Contact


About

Pokedex app that utilises react-query to fetch the data from PokeAPI, displays it, features auth0 authentication, ability to save Pokemon, change avatars, has dark/light mode. Created with React, TypeScript, React Query and Tailwind. Hosted on Netlify.


Languages

Language:TypeScript 96.1%Language:CSS 1.5%Language:HTML 1.2%Language:JavaScript 1.2%