[Frontend Mentor] IP Address Tracker

IP Address Project

A web application that allow users to enter an IP address and view the physical location of the IP address via a map. In additional, some information regarding the IP address will also be retrieved, such as the IP address's ISP. This is a solution to a Frontend Mentor challenge.

See challenge here: https://www.frontendmentor.io/challenges/ip-address-tracker-I8-0yYAH0

Live site here: https://ip-address-tracker-hny-codes.vercel.app/

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

Why this project?

I wanted to practice my skills in creating an application in Next. With the news of the app directory being stable, it became the perfect opportunity to try out what has changed in Next 13 and the new features of this version. In addition, more practice for Tailwind and Typescript as well so more opportunities to apply them in practice really!

Build Tools

Next.js
Typescript
Tailwind CSS
React Leaflet
IP Geolocation API

Next.js 13

Next Hero

Next is an all-in-one web framework built for creating full-stack applications written in React. As stated, the reason for me choosing Next for this application rather than a simple build tool like Vite is simply because I wanted to try out the new app directory introduced in Next version 13. This version brings Next a new development environment and is pushed to become the preferred way on creating Next applications, so better to get a jump start than never, right?

IP Geolocation API

IP Geo API

First things first, we need to create an account on IPify in order to retrieve information about an IP address. It's a simple as entering the usual information typical of creating an account (username, email, etc), and bam, API key to use! This API will give us the ability to grab information regarding any IP address we want, especially the latitude and longitude of the IP address, which we'll need for this project.

Leaflet

Once we grab the latitude and longitude of an IP address, we need to create a map and a marker that pinpoints that exact location on the map. This is where Leaflet comes in, an open-source library for creating mobile-friendly interactive maps. Since I am developing this application in React, I opt to use React Leaflet, which is essentially a collection of Leaflet map components for development with React. I used the API documentation for mainly changing the default Leaflet marker to the one given in the challenge starter files but it was quite easy to work with.

Development Process

There are several things that I reflected upon finishing this project.

Map Component

I had a bit of trouble when it came making the Leaflet map load on Next, so first and foremost, I would like to thank this post on StackOverflow that helped me overcome this problem. tl;dr create the separated map component file outside of the main directory and utilize Next's dynamic loading feature to enable the map to be created (the post is quite detailed to please take a look there to learn how it works).

use client Directive

use client example

Since this application consists of mainly client-side interactions, I opted for the use client directive in order to render parts of the application for those interactions. Because of this, it also means that I am unable to take advantage of full advantage of Next 13's ability to fetch data directly. Instead, I used the classic async & await to grab my data and stored it within state instead.

async await example

Development Roadmap

The actual development process is quite linear. I needed to make sure I got used to working with the intended libraries for creating this project so I did just that; I tested the API calls and made sure the data from each response is appropriate and needed for the project and after that, I connected the response calls (mainly latitude and longitude) to the Map component and make sure it displays the right location.

Once the base work has been done for the map and API call, the next step in the development process is to create the text input bar that'll receive IP addresses. By utilizing a bit of regex, we can validate that the input is truly an IP address and display a message when the input is not an IP address.

ip address validation

Once the validation is complete, it was just a matter of creating the UI for the application and connecting it to the other components with a mobile-first approach. This included prop drilling, testing component responsiveness, and additional nitty-gritty details to match the given style guide; styling is done with Tailwind.

Conclusion

Looking back at this project, the development cycle is quite straight-forward. Besides reading up on the functionality of the API and Leaflet, in addition to having the Next documentation on my second monitor (can't tell you how long I've had this window open..), there wasn't anything major that troubled me. I am still quite inexperienced when it comes to Typescript so I did spend some time when it came to typing my application (basically learning Typescript as a whole really) but otherwise, this project proved to be a valuable learning experience and helped further my knowledge in all of the tooling used for this project. Thanks!