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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- SCSS - For styles
- Tailwind CSS - For styles
- React Hook Form - For form
- Leaflet - For interactive maps
- React Leaflet - For React Leaflet binding
- IP api - IP Location API
The purpose of this project is to practice tools such as React Hook Form, fetching data and useContext in TypeScript.
Using Leaflet in Next.js also requires import dynamic so that the map doesn't load on server side
import dynamic from "next/dynamic";
const Map = dynamic(() => import("./Map"), {
ssr: false,
});
export default Map;Another issue I faced was that I used https://ip-api.com/ which only has http endpoint available. It worked fine during development but couldn't work on deployment due to insecure XMLHttpRequest endpoint. I have to switch to https://ipapi.co/