IP tracking technologies are very useful to easily search, find, track and trace the location along with other subtle information not only of your public IP but other publicly accessible IPs and domains in the world.

In this project I implement these functionalities using the IPify and LeafletJS APIs.

N/B: Disable adblockers on the browser for optimum performance.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learnt
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

• Solution URL: GitHub Repo
• Live Site URL: Hosted with Netlify

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Scss/Sass
• Mobile-first workflow
• Git and GitHub
• LeafletJS
• IPify

• Reinforced my knowledge of page layouts and resonsive web design.
• Practiced more asynchronous JS working with two different apis
• Practiced more functional programming.
• Learnt more about validation for ipv4/ipv6, & domain name using regex.
• Ways to Fix the “Failed to Load Resource: net::ERR_BLOCKED_BY_CLIENT” Error.

Continue building out awesome web applications. Learn more about HTML forms and regular expressions.

• 4 Ways to Fix the “Failed to Load Resource: net::ERR_BLOCKED_BY_CLIENT” Error - This articled helped me resolve the error I kept getting, when I tried to fetch from the IPify endpoint.
• Domain Name validation - This is an amazing resource helped me figure out the standard regex for validation of domain names.
• Regex Testing from Dan's tool - This is an amazing resource helped me figure out the standard regex for validation of ipv4/ipv6 addresses.
• IP Geolocation API - Documentation for IPify api.
• Leaflet JS - Quick start guide to using LeafletJS.
• Normalize CSS - Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

• Frontend Mentor - @Minard-NG
• LinkedIn - Michael Nwankwo

Special thanks to Frontend Mentor for setting up this challenge to help developers improve their coding skills by building realistic projects.