Submitted almost 2 years ago

Ip Tracker app, built with React JS

Renan Tiscoski• 1,240

@DonUggioni

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

IP Address Tracker

HTML
CSS
JS
API

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Howdy,

Here is my solution for this project. It's my first React project ever.

The app is pretty straight forward, not that complicated at all. I still have some difficulties understanding how passing data around components work but I believe that is expected as a beginner.

I decided to use the google maps API for this project, wanted to give it a try instead of leaflet. I thought it was pretty easy to use, had one issue though importing one of it's components, where the icon wouldn't show up on the map. After a few hours of trial and error and research, I found out that since I'm working with a function component base in React, I had to import "MarkerF" instead of "Marker", which is used for a class component approach. Definitely a FFS moment.

Other than that, I have to thanks @catherineisonline for the help on this project. We can always learn from each other and that's what this community should be all about.

Please, feel free to go through my code and give me any feedback on where I could improve or have done things more efficiently.

Happy coding 🤓

Community feedback

Daniil• 170

@Daniil034

Posted almost 2 years ago

Hey! Good job with this API) I haven't yet done any project with API and I have no idea how to deal with it and with async functions at all. Why did you name your style files with 'module'? What convention is it? And... Are you sure that it is okay to show everyone your private GoogleMapsAPI key? Maybe you should've hidden it somehow? Just a suggestion)

Marked as helpful

Renan Tiscoski• 1,240

@DonUggioni

Posted almost 2 years ago

@Daniil034 Hey there,

Yeah I will have to hide that API key, just haven't done it yet. It is restricted to maps only though, but at the time, I didn't really know or was aware of the importance of hiding it.

For the API it is quite straight forward. Works the same as if you were using vanilla JS, just use the fetch API and pass into it the IP address coming from the input, then just use the info you get from the API response. In this case I used ipapi.co, it's free and the info you get is pretty good!

Regarding the style.module files, if you do that, and then import the style into your js file, they become scoped and react will create a unique id for each class name, so that means you can use the same class names in different files and you won't have a naming conflict. That doesn't happen with global files, you have to give different names to all your classes.

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