/ip-address-tracker

App that shows visitors IP address on initial page load and their physical location on map (not always precise). It also allows to search with IP or domain. Challenge from https://www.frontendmentor.io.

Primary LanguageJavaScript

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.

You can check Live Site URL here

Table of contents

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 addresses or domains and see the key information and location

Screenshot

My process

Built with

  • React with Context API and hooks
  • Geolocation API by IPify
  • LeafletJS for generating map
  • Flexbox
  • Sass
  • Mobile-first workflow

In this project I tried to organize folder structure a little better, but still I'm not sure if this is correct as there are so many approaches in react projects.
Initially I wanted to use react-leaflet library for map generation, but it didn't work as I expected, so next time it would be better to read documentation first.