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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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

• Live Page

My process

Built with

• React - JS library
• Styled Components - For styles
• Vitejs
• Axios
• LeafletJS - For map generation
• IP Geolocation API by IPify - To obtain the information of the IP or domain

(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

• React Leaflet - Made it easy for me to use leaflet in React

(back to top)