Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

IP Address Tracker using Netlify functions

@david-tejada

Desktop design screenshot for the IP Address Tracker coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

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.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord