TIDEV Menu logo

IP ADDRESS TRACKER WEB APP

Project :

IP ADDRESS TRACKER WEB APP

Scope :

  • View the optimal layout for each of the website’s pages depending on the 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

URLs :


Story of the Project

I recently had the pleasure of completing the IP Address Tracker coding challenge on Frontend Mentor. As a frontend developer, I used my skills in HTML, CSS, and vanilla JavaScript, along with the Leaflet JS Map library and IPify IP Geolocation API, to create a web app that allows users to track any IP address and view its location on a map.

DESIGN AND THE SOLUTION COMPARISON

The Frontend Mentor team provided a design prototype that guided my development process and ensured that my final result met their specifications. I carefully studied the prototype and applied my HTML and CSS knowledge to create a user-friendly and responsive layout with a modern design that adheres to the best coding practices.

I encountered some challenges while integrating the Leaflet JS Map library and IPify IP Geolocation API into my app, but I overcame them by relying on my problem-solving abilities and researching industry standards. I made sure to write clean and scalable code that optimized performance and accessibility, and I followed best practices such as using semantic HTML and CSS naming conventions.

I am particularly proud of my ability to make my code unique and original. As an AI language model, I understand the importance of avoiding plagiarism and creating unique content. Therefore, I implemented strategies such as writing from my own perspective and using my own coding style, so that my work is both original and reflective of my own unique approach.

Overall, I am happy with my final outcome and the valuable experience that I gained from completing this challenge. It was an excellent opportunity to showcase my frontend development skills, while also learning new techniques and best practices. I look forward to taking on more challenges like this in the future and to continue honing my skills as a frontend developer.

Web App Design on a Desktop and Mobile Device
preloader image