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.

Solution . 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

• Solution
• 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)

Author

• Email - cosmohydra17@gmail.com
• Instagram - @cosmo_art0
• Twitter - @CosmoArt0
• Frontend Mentor - @CosmoArt

(back to top)