VITE, Bootstrap, SASS, API Leaflet , API IPify

Project has been completed and delivered with VITE package manager and a lot of satisfaction due to many struggles along the way.

Technologies:

• VITE - server / bundler
• Bootstrap
• SASS
• API - Leaflet and Ipify

Problems occured:

1. API key security , environment variables , package manager?
2. What is a package manager and how do i use it ? what is better Webpack or VITE?
3. How do I use VITE and what are npm scripts?
4. What is CORS and SOP?
5. type="module" in script tag is the only way i know to use import and export in js modules , so why can't I use console to debug before coding Leaflet API functions for map control ? what is strict mode ?
6. API and Fetch

Solutions :

1. Using a package manager (VITE in his case) and development server ( backend ) allowed the use of .env files which are the base of keeping security of the environment variables
2. and 3. Research outcome was in favour of VITE as the new and faster technology. I have spent hours with Vite documentation , Stack Overflow and Googling web to understand the concept of packing the assets into as few files as possible as well as why the hell do i need a backend . After that i spent even more hours learning how to configure a working development environment , what is npm and how to use it.
3. Setting proxy in VITE was the solution, but that is the effect of a few hour research about Cross Origin Resource Sharing and Same Origin Policy
4. It happens that when in strict mode there are no user global variables available and You need to be very precise with addressing your communication between JavaScript modules, preferably by communicating with functions (that worked for me). Created an completely clean website just for this purpose and debugging.
5. API and fetch was very easy and proved to be of a little challenge. Challenge emerged when i had to use two API to get the data and coordinate JS modules communication and functions synchronization between each other.

Conclusion, demanding challenge that i am happy to have overcome with hours of reading , research and work. As a touch of my creativity I have added a opacity transition for the info panel in mobile to clear the users view. When it disappears just click or touch and it will show itself back.