IP Tracker with Vue 3 (Composables, Pinia, Axios, Leaflet.js, TS)

What are you most proud of, and what would you do differently next time?

Somehow this time I had less Type errors during development and this is quite an enjoyable remark.

I am satisfied with the structure of the logic too, with the composables separated by their respective roles:

• one to render map with Leaflet.js;
• one to communicate with the Geolocation API;
• one to handle localStorage to look for past results);

and binding them together later

One of the focus of the solution is to "save" some usage of the API requests since it is limited to 1000 requests. To do so, I pretty much save every pair search/IP result in a Map on localStorage. Possibly not the most memory-wise-performant, so this is a part that I would do differently next time. Perhaps saving only needed properties, and a simple array to processo to a Map instead of saving the key + entry pair

What challenges did you encounter, and how did you overcome them?

The Leaflet.js rendering, my goodness... for some reason the package from npm don't import the CSS or something like that and kind of wasn't working at all until I added the stylesheet manually at index.html. After that, Leaflet kind of started to work more smoothly.

Another challenge that I had was to make requests and rendering reactive to the change of the states. The initial idea was to create a reactive object with ipAddress or domain, and fetch the API when that object changes. But after some tests, I scratched that approach because:

1. It overcomplicates the architecture;
2. It was more risky to waste usage of requests to the API.

The watch of the lat+lng change to render the updated map was somehow challenging too, not sure why. But after some attempts and changes in the watch function and the useLeaflet composable, it worked

What specific areas of your project would you like help with?

There are some points:

• [TypeScript] The declaration of types at src/types/GeolocationAPI.d.ts and their usage at src/stores/ip-tracking.ts and src/composables/useGeolocationAPI.ts. Are they ok or it could be better in some another way?
• [TypeScript] I'd love some feedback about the use of generics at src/composables/useCachedResponses.ts
• [Pinia] This is the first time I use Pinia for anything, so I'm not sure if it is organized enough since it is kind different with the Vuex
• [SCSS] If there are some alternative ways to apply the styles inside the components, I'd like to hear
• [Logic] The overall feedback of the logic, if possible. What you'd do different, what could be better, I'd like to know