🚀 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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • 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

Screenshots

desktop version

mobile version

Links

• Solution URL: GitHub
• Live Site URL: Vercel

---

🎯 My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Next.js – React framework
• React – JS library
• TanStack Query (FKA React Query) – Data fetching library
• Axios - HTTP client
• Tailwind CSS – For styles
• React Hook Form - For form state management

What I learned

This challenge was very interesting for me. It gave me the opportunity to deepen my knowledge of Tanstack query v4 so that I can fetch data from external APIs in a more powerful way, especially by using the useQuery hooks together with the useIsFetching hook.

Also, this was the first time that I had used Tailwind CSS to implement a design, and I had also integrated Mapbox to enable the display of custom markers on online maps in precise coordinates, which is what makes this site unique.

Useful resources

• Next.js Documentation
• React Documentation
• TanStack Query Documentation
• Tailwind CSS Documentation
  • Quick reference
  • Customizing Screens
  • Functions & Directives
  • Default configuration
  • Default spacing scale
• React Hook Form Documentation
• Heroicons

---

👨‍💻 Author

• Website – www.jakubjirous.cz
• Frontend Mentor – @jakubjirous
• LinkedIn – jakubjirous