Submitted about 3 years ago

IP Address Tracker built with React, styled components and Mapbox

Matthias• 235

@MatthiasSmith

Preview site View code

This is a solution for...

IP Address Tracker

HTML
CSS
JS
API

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

First time using styled components outside of a tutorial.

I added loading and error states for when the API is fetching and/or returns unsuccessfully.

Learned a lot about leaflet. And getting environment variables to work in a production environment. Guess I relied on dev-ops folks too much in the past. 😅

Community feedback

Oleh Tovkaniuk• 505

@OlehTovkaniuk

Posted about 3 years ago

Are you aware that enviroment variable doesn't secure your API key? Here is discussion about this theme: https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app

Matthias• 235

@MatthiasSmith

Posted about 3 years ago

Thanks for posting this resource. It helped motivate me to take some time to learn and use the serverless functions features that are available on Vercel. I've updated the app with the changes.

Oleh Tovkaniuk• 505

@OlehTovkaniuk

Posted about 3 years ago

@MatthiasSmith you've got some bug. ip addresses don't fetch

Matthias• 235

@MatthiasSmith

Posted about 3 years ago

@OlehTovkaniuk - Yes, just fixed this. Thanks again for testing! 🙏

Oleh Tovkaniuk• 505

@OlehTovkaniuk

Posted about 3 years ago

@MatthiasSmith You've done some decent work on this challange. It is really great opportunity for me to have a look at work of a skilled developer and learn from it. Thanks a lot.

Matthias• 235

@MatthiasSmith

Posted about 3 years ago

@OlehTovkaniuk Thanks! It means a lot. And thank you for your continuous feedback and testing. Happy coding! 😎

Chamu• 12,970

@ChamuMutezva

Posted about 3 years ago

Good work Matthias. It is working as expected, i like most the error handling functionality.

Happy coding

Oleh Tovkaniuk• 505

@OlehTovkaniuk

Posted about 3 years ago

Did you have any issues with AdBlocker in Opera and Brave browsers??

Matthias• 235

@MatthiasSmith

Posted about 3 years ago

@OlehTovkaniuk Yes, I did. The IP Geolocation API was being blocked. Switching over to making the requests from the server instead of the client fixed the issue for me (in addition to hiding my API tokens).

Please log in to post a comment

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