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 react js

#react#sass/scss#fetch
solitary_coderβ€’ 1,000

@kabir-afk

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


Hey there , this was my attempt to ip-address-tracker app , for the resources I've used you can check my github readme.... as far as the data is concerned it may/may not be accurate.. not my fault , api at work needs to be worked upon...the map fails to be interactive , but i'll work on that later . . . and one more thing , the API I used didnt have ISP in json so I replaced it with country instead , what else ? idk. . . cheers!! πŸ₯‚πŸ₯‚

Community feedback

enzmrg πŸ’«β€’ 870

@enzo-mir

Posted

Hi ! firstly good job ! One things is on the responsive of the map :

  • You should dispach map and header background in 2 grid instead of using flat height or margin
  • Place you'r main content as "position : absolute" with "display : flex" in column and give gap Maybe for the api try to see my solution, I have used the "fly" method to travel with animation after ip checked.

Else if, nice one !

Marked as helpful

0

solitary_coderβ€’ 1,000

@kabir-afk

Posted

@enzo-mir I loved your animated panning effect, wanted to do the same but didn't want to spend time learning a library I'm gonna use once, also for some reason my <MapContainer> component and <Marker> component weren't centering when I assigned with {[Lat,Lng]} values , so I had to make a new ChangeView component to go the new location , but that took away the functionality of the map, like it isn't interactive anymore and the zoom buttons don't work as well . . .it'd be a great if you could help me with that as well , I'll look up your code as well . . . thanks anyways .

1
solitary_coderβ€’ 1,000

@kabir-afk

Posted

@enzo-mir hey , no doubt the flyTo method definately makes it look more impressive , thanks to you , also made my map interactive now , actually I set the z-index of map to -1 due to which it wasn't interactive . . . thanks again ate . . .cheers!! πŸ₯‚πŸ₯‚

1
enzmrg πŸ’«β€’ 870

@enzo-mir

Posted

@kabir-afk Oh god the z-index killed the code ahah ! Well done for your code !

1
solitary_coderβ€’ 1,000

@kabir-afk

Posted

@enzo-mir hehe

0

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