A free and simple IP tracker app, allowing users to search for location of particular IP address, domain or E-mail address. Providing visual map of location and details.

Table of contents

• Table of contents
• Overview
• The challenge
• Video
• Built with
• What I learned
• Author
• Acknowledgments

Overview

The project was a challenge from IP Tracker. It was yet another challenge to solidify my external API usage, responsive layout, and React skills.

The challenge

The challenge consisted of three external API's usage, state management, responsive layout all wrapped in a single-page React App. User stories that needed to be fulfilled:

• View the optimal layout for the site 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

Video

IP-tracker-view.mp4

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Tailwind CSS - A utility-first CSS framework

What I learned

The project was another small step in my Web Developer journey. It strengthened my skills in areas like API usage, React Hooks, and Tailwind CSS.

Author

• Website - Chris Pantak
• Frontend Mentor - @Kielx

Acknowledgments

• Again used beautiful CSS spinner from Loading.io
• This is a solution to the IP Tracker

Huge thanks to authors of API's that I used in this project:

• https://getjsonip.com/
• https://geo.ipify.org/
• https://leafletjs.com/