IP Address Tracker

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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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.

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/ip-address-tracker-solution-OMnMwcpeo7
• Live Site URL: https://iat-gshukla.vercel.app

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.

Author

• Website - Gaurav Shukla
• Frontend Mentor - @heygauravshukla
• X - @heygauravshukla