This is a solution to the IP address tracker challenge on Frontend Mentor.
Blog write-up here.
The purpose of this project is to build a functional web application that allow users to search IP addresses and get real-time details about it, including the location of it via a map.
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
To run this project locally, create an account at IP Geolocation API and get an API key.
Create a .env.local
file in the root directory and add the following variable:
NEXT_PUBLIC_API_KEY='YOUR API KEY HERE'
Install the necessary dependencies using NPM:
$ npm install
Afterwards, run the project in dev mode:
$ npm run dev
- Next.js
- Typescript
- Tailwind CSS
- React Leaflet
- IP Geolocation API
Working on this project was not an easy walk-in-the-park but provided me further experience on building web applications utilizing APIs. More specifically, I learned more about the Next's development environment and working around it.
Since the application relies on mainly client-side interactivity, a majority of the application is built with client components to provide that required functionality. Client components are pre-rendered on the server, then hydrated upon arriving to the client, marked with a use client
directive.
Because of this, this also means that fetching data from the API is done within the client components with hooks. This results in not utilizing Next.js's new data fetching system via the App Router.
My development cycle for this project is quite linear as I first needed to create the appropriate types for the API data, functions to fetch the API data, then combined them to cover the full functionality of the application.
When the functionality of the application has been covered, the next process of development would to create the UI of the app that matches the given style guide and wire it to the functionality of the application while covering any bugs along the way.