Frontend Mentor - IP Address Tracker Solution

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
• Acknowledgments

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
• Live Site URL

My Process

Built With

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React
• Next.js
• Styled Components

What I Learned

During this project, I improved my skills in responsive design, API integration, and state management in React. I also learned how to use Leaflet.js for interactive maps and how to handle asynchronous data fetching in Next.js.

// Example: Fetching IP data
const fetchIPData = async (ip) => {
  const res = await fetch(`https://geo.ipify.org/api/v1?apiKey=YOUR_API_KEY&ipAddress=${ip}`);
  return res.json();
};

Continued Development

In future projects, I want to focus more on accessibility, advanced map features, and optimizing performance for large datasets.

Useful Resources

• React Documentation
• Leaflet.js Documentation
• Frontend Mentor Community

Author

• Website: Your Name
• Frontend Mentor: @yourusername
• Twitter: @yourusername

Acknowledgments

Thanks to the Frontend Mentor community for feedback and support during this challenge.