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
• Links
• My process
  • Built with
  • Continued development
• Author

Overview

• This is an IP address tracker app. This website initially loads with users IP address and show some info about their IP and user can also search other IP addresses as well.

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: View the solution
• Live Site URL: View live site here

My process

• I was a little bored and thinking about a vanilla javascript project then I saw a tweet about Frontend Mentor then I find this challenge. for building this project I have tried to follow the MVC architecture pattern. I know for this project MVC pattern is overkilling 😅 but never mind I just love this pattern ❤.

Built with

• Semantic HTML5 markup
• SCSS/SASS
• Flexbox
• Vanilla JavaScript
• MVC Architecture (for better management)
• Parcel (for bundling)
• ipify API - A Simple Public IP Address API
• Leaflet - an open-source JavaScript library for mobile-friendly interactive maps

Author

• Facebook - Mainul Islam
• Frontend Mentor - @main1479
• Twitter - @main1479