https://github.com/bamof25th/ip-tracker
📌 A website to track and obtain information based on an IP address or a domain
https://github.com/bamof25th/ip-tracker
api api-integeration leflet react react-leaflet tyepscript
Last synced: 2 months ago
JSON representation
📌 A website to track and obtain information based on an IP address or a domain
- Host: GitHub
- URL: https://github.com/bamof25th/ip-tracker
- Owner: Bamof25th
- Created: 2024-08-28T16:07:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-28T18:55:41.000Z (over 1 year ago)
- Last Synced: 2024-11-16T17:18:56.179Z (about 1 year ago)
- Topics: api, api-integeration, leflet, react, react-leaflet, tyepscript
- Language: TypeScript
- Homepage: https://ip-tracker-xcpn-gmr3v6g3s-bamof25ths-projects.vercel.app/
- Size: 4.92 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- 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
### 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
### 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
```
### Useful resources
- [React Leaflet](https://react-leaflet.js.org) - Made it easy for me to use leaflet in React
[live-page]: https://ip-tracker-xcpn.vercel.app/
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ["./tsconfig.node.json", "./tsconfig.app.json"],
tsconfigRootDir: import.meta.dirname,
},
},
});
```
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
```js
// eslint.config.js
import react from "eslint-plugin-react";
export default tseslint.config({
// Set the react version
settings: { react: { version: "18.3" } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs["jsx-runtime"].rules,
},
});
```