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

• Solution
• Live Page

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

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)

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

(back to top)

• Email - [email protected]
• Instagram - @cosmo_art0
• Twitter - @CosmoArt0
• Frontend Mentor - @CosmoArt

(back to top)