Frontend Mentor - IP address tracker solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • 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

Screenshot

Links

• Live Site URL: Live demo site

My process

Built with

• React - JS library
• Material UI - For styles
• IP Geolocation API - API for IP Addresses
• React LeafLetJs - API for the map component

What I learned

A learnt to work with simple LeafLet components, also using Material UI, custom hooks and axios calls.

export default function useFetch() {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState();

    useEffect(() => {
        async function fetchData(ip = null) {
            setLoading(true);
            setError();
            const data = ip ? await API.getIpLocation() : await API.getLocation();
            setData(data);
            setLoading(false);
            
        }

        try {
            fetchData()
        } catch (error) {
            setError(error);
        }

    }, [])
return [data, loading, error]
};

function ChangeView({ center, zoom }) {
  const map = useMap();
  map.setView(center, zoom);
  return null;
}

const MyMapComponent = ({ position }) => {

  
  return (
    <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
    <ChangeView center={position} zoom={13} />
    <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={position} icon={new Icon({iconUrl: markerIcon, iconSize: [25, 41], iconAnchor: [12, 41]})}>
        <Popup>Text</Popup>
      </Marker>
    </MapContainer>
  );
};

Continued development

React is my favorite framework/library to work with web apps, and I plan to continue working learning about hooks, states, context, redux and more.

Useful resources

• Material UI Documentation - Great documentation, easy to follow, very organized and with good examples.

Author

• Website - Daniel Portillo
• Frontend Mentor - @dportillo23
• Twitter - @DaniDev23