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 and see the key information and location
- Solution URL: Frontend Mentor Solution
- Live Site URL: Netlify - ⚠ You may have to disable your adblocker. In order for the api to work correctly!
- IPData API
- leaftlet
- React-Leaftlet
- Date-fns
- TailwindCSS
- React
- Vite
- Ip data - IP Geolocation
- React - JS library
- tailwind - CSS classes
- React-leaflet - React components for Leaflet maps
To use React-Leaflet, a component to create Leaflet maps and use 'fly to' events with a smooth animation. Also learned to use date-fns to format current time of a timezone given from api.
import { useEffect, useState } from "react";
import { formatInTimeZone } from "date-fns-tz";
function FormatDate({ date, timezoneName }) {
console.log(date, timezoneName);
const [time, setTime] = useState("");
const [seconds, setSeconds] = useState(0);
useEffect(() => {
update();
const newDate = new Date();
const tempo = formatInTimeZone(
newDate,
timezoneName,
"HH:mm:ss dd-MM-yyyy"
);
setTime(tempo);
}, [seconds]);
const update = () => setInterval(() => setSeconds((prev) => prev + 1), 1000);
return <div className="text-lg text-zinc-900 font-bold">{time}</div>;
}
export { FormatDate };
Read more documentation to be independent from youtube tutorials.
- Tutorial from youtube - help me to use react-leaftlet.
- Date-fns-tz - This package helped me to format from timezone.
- Frontend Mentor - @rm0909