valleyman89/IP-Address-Tracker

Frontend Mentor challenge solution

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

• Frontend Mentor - IP address tracker solution
  • Table of contents
  • Overview
    • The challenge
    • Links
    • Screenshot
      • Desktop
      • Mobile
  • My process
    • Built with
    • Useful resources
  • Author
  • Acknowledgments

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 address and see the key information and location ✅

note: turn off adblocker if page doesn't load.

Links

• Solution URL
  • https://www.frontendmentor.io/solutions/react-contextbased-using-leafletjs-dP-UdZyHt5
• Live Site URL
  • https://valleyman89.github.io/IP-Address-Tracker

Screenshot

Desktop

Mobile

My process

Built with

• CSS custom properties
• Desktop-first workflow
• React - JS library
• ipify API - geolocation API
• LeafletJS - library for maps
• react-leaflet - React components for LeafletJs
• gh-pages - package to deploy app to GitHub Pages

Useful resources

• "React Leaflet Basics pt. 1", YouTube - This video was a good starting off point for getting react-leaflet to work.

Author

• GitHub - @valleyman89
• Frontend Mentor - @valleyman89
• Twitter - @steven_rolph

Acknowledgments

Thanks to StackOverflow user ptay for their RegEx pattern for determining an IP address - stackoverflow.com