/IP-Adress-Tracker

Challenge from Frontend Mentor

Primary LanguageJavaScript

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

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

Screenshot

screenshot

Links

My process

Built with

  • 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

What I learned

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 };

Continued development

Read more documentation to be independent from youtube tutorials.

Useful resources

Author