Skip to content

๐Ÿ“ A website to track and obtain information based on an IP address or a domain. This is a solution to the IP address tracker challenge on Frontend Mentor. To get the IP Address info I used the IP Geolocation API by IPify. To generate the map I used Leaflet.js.

Notifications You must be signed in to change notification settings

debski-patrick/ip-address-tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

2 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

IP Address Tracker

๐Ÿ“A website to track and obtain information based on an IP address or a domain. This is a solution to the IP Address Tracker challenge on Frontend Mentor. To get the IP Address info I used the IP Geolocation API by IPify. To generate the map I used LeafletJS.

Live Page

Table of contents

Overview

The challenge

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

Screenshots

Links

My process

Built with

(back to top)

What I learned

This challenge in particular was easy except for one thing: updating the map when getting the information, in the official Leaflet documentation it is made clear that the map is immutable, so I decided to investigate and found React Leaflet, which made it much easier for me. To update the map I used React's key.

At the end the code of the map is as follows:

<MapContainer
  key={JSON.stringify([info.location.lat, info.location.lng])}
  center={[info.location.lat || 0, info.location.lng || 0]}
  zoom={17.5}
  id="map"
>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <Marker
    position={[info.location.lat || 0, info.location.lng || 0]}
    icon={locationIcon}
  ></Marker>
</MapContainer>

(back to top)

Useful resources

(back to top)

About

๐Ÿ“ A website to track and obtain information based on an IP address or a domain. This is a solution to the IP address tracker challenge on Frontend Mentor. To get the IP Address info I used the IP Geolocation API by IPify. To generate the map I used Leaflet.js.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published