https://github.com/debski-patrick/ip-address-tracker

📍 A website to track and obtain information based on an IP address or a domain. This is a solution to the IP address tracker challenge on Frontend Mentor. To get the IP Address info I used the IP Geolocation API by IPify. To generate the map I used Leaflet.js.
https://github.com/debski-patrick/ip-address-tracker

axios frontend-mentor ipify javascript leafletjs reactjs styled-components vite

Last synced: about 1 month ago
JSON representation

📍 A website to track and obtain information based on an IP address or a domain. This is a solution to the IP address tracker challenge on Frontend Mentor. To get the IP Address info I used the IP Geolocation API by IPify. To generate the map I used Leaflet.js.

• Host: GitHub
• URL: https://github.com/debski-patrick/ip-address-tracker
• Owner: debski-patrick
• Created: 2024-03-26T10:55:57.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-03-26T11:04:00.000Z (9 months ago)
• Last Synced: 2024-08-05T21:24:07.376Z (5 months ago)
• Topics: axios, frontend-mentor, ipify, javascript, leafletjs, reactjs, styled-components, vite
• Language: JavaScript
• Homepage: https://ip-trackerr.vercel.app
• Size: 407 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# IP Address Tracker

📍A website to track and obtain information based on an IP address or a domain. This is a solution to the [IP Address Tracker challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/ip-address-tracker-I8-0yYAH0). To get the IP Address info I used the [IP Geolocation API by IPify](https://geo.ipify.org/). To generate the map I used [LeafletJS](https://leafletjs.com/).

[Live Page][live-page]



Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshots](#screenshots)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Useful resources](#useful-resources)

- [Author](#author)

## 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

### Screenshots

        

		    

                

            

            

                

            

        

### Links

- [Live Page][live-page]

## My process

### Built with

- [React](https://reactjs.org/) - JS library

- [Styled Components](https://styled-components.com/) - For styles

- [Vitejs](https://vitejs.dev)

- [Axios](https://axios-http.com)

- [LeafletJS](https://leafletjs.com/) - For map generation

- [IP Geolocation API by IPify](https://geo.ipify.org/) - To obtain the information of the IP or domain

(back to top)


### What I learned

This challenge in particular was easy except for one thing: updating the map when getting the information, in the official Leaflet documentation it is made clear that the map is immutable, so I decided to investigate and found [React Leaflet](https://react-leaflet.js.org), which made it much easier for me. To update the map I used React's key.

At the end the code of the map is as follows:

```js

  

  

```

(back to top)


### Useful resources

- [React Leaflet](https://react-leaflet.js.org) - Made it easy for me to use leaflet in React

(back to top)


[live-page]: https://ip-trackerr.vercel.app