This is my solution to the IP address tracker challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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 URL: here
• Live Site URL: here

• Mobile-first workflow
• react-leaflet - a javascript map library
• React - JS library
• Styled Components - For styles

I learnt the basics of the leaflet library, an open source library for maps.

<MapContainer center={center} zoom={13} scrollWheelZoom={false}>
  <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={center} icon={locationIcon}>
    <Popup>{region}</Popup>
  </Marker>
</MapContainer>

I haven't been able to rerender the map after state has been updated. I will do more research and add that feature.

• react-leaflet - The react leaflet documentation.
• leaflet setup - A good blog on setting up react leaflet.

• Website - Kiprop
• Frontend Mentor - @kiprop-dave