IP Address Tracker

An IP address tracker app that allows users to view IP details of any IP address and view the location on the interactive map.

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 or domains and see the key information and location.

My process

Built with

• Semantic JSX markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Tailwind CSS - CSS framework
• Leaflet - JS library for mobile-friendly interactive maps
• IP Geolocation API - API to look up IP locations accurately
• pnpm - Fast, disk space efficient package manager

What I learned

This project enhanced my understanding of several key concepts, including:

• Integrating external APIs into a Next.js project and managing dynamic responses effectively.
• Implementing interactive map features using the Leaflet library.
• Securing sensitive information, such as API keys, through environment variables to prevent exposure in public repositories.
• Utilizing Next.js Server-Side Rendering (SSR) to handle API requests securely, thereby avoiding key exposure in network traffic.

Continued development

In future projects, I intend to focus on the following areas for improvement:

• Incorporating TypeScript to improve type safety and code reliability.
• Utilizing shadcn/ui to streamline the development of accessible and customizable UI components.

Useful resources

• <dl>: The Description List element - This MDN Web Docs article provided valuable insight into the semantic use of description lists, improving my HTML structure.
• Building a Pricing Section With Tailwind CSS - This YouTube video by simonswiss offered practical guidance on centering elements precisely using Tailwind CSS, which proved applicable to this project.