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.
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
- Live Site URL: Live demo site
- React - JS library
- Material UI - For styles
- IP Geolocation API - API for IP Addresses
- React LeafLetJs - API for the map component
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='© <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>
);
};
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.
- Material UI Documentation - Great documentation, easy to follow, very organized and with good examples.
- Website - Daniel Portillo
- Frontend Mentor - @dportillo23
- Twitter - @DaniDev23