This is a solution to the IP address tracker challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for each page depending on their device's screen size
- See hover states for all interactive elements on the page
- See their own IP address on the map on the initial page load
- Search for any IP addresses or domains and see the key information and location
- Solution URL: david-tejada/fem-ip-address-tracker
- Live Site URL: Frontend Mentor | IP Address Tracker
- Semantic HTML5 markup
- Flexbox
- CSS Grid
- Mobile-first workflow
- Tailwind CSS
- Vite
- Netlify Functions
- LeafletJS
- IP Geolocation API by IPify
For this challenge I wanted to learn how to secure an API key. In the readme of the challenge it's suggested to simply not provide card details to avoid getting charges. I wanted to go the extra mile and learn how this would be done in a real project were exposing your API key is not an option.
My first idea was to use local .env files and avoid committing this to source control. The problem with this approach is that the API keys are still exposed in the front end. Anybody can look in the network tab of the developer tools where the API key is visible in plain text.
My next idea and what I ended up doing was using Netlify functions. Netlify functions allow you to run small snippets of code in the backend without the need to set up a server. This is the reason they are also known as "serverless functions". Netlify functions, along with the Netlify CLI and Netlify environment variables have allowed me to completely hide my API keys or even have the need to store them locally.
- Website - David Tejada
- Frontend Mentor - @david-tejada