https://github.com/achinthyadulshan/ip-address-tracker
This is a solution to the IP address tracker challenge on Frontend Mentor.
https://github.com/achinthyadulshan/ip-address-tracker
frontend-mentor ipgeolocation-api leafletjs openstreetmap react tailwindcss vite
Last synced: 2 months ago
JSON representation
This is a solution to the IP address tracker challenge on Frontend Mentor.
- Host: GitHub
- URL: https://github.com/achinthyadulshan/ip-address-tracker
- Owner: AchinthyaDulshan
- Created: 2024-12-08T12:30:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-08T15:01:11.000Z (over 1 year ago)
- Last Synced: 2025-02-17T10:47:56.296Z (over 1 year ago)
- Topics: frontend-mentor, ipgeolocation-api, leafletjs, openstreetmap, react, tailwindcss, vite
- Language: JavaScript
- Homepage: https://achinthyadulshan.github.io/ip-address-tracker/
- Size: 2.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - IP address tracker solution
This is a solution to the [IP address tracker challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/ip-address-tracker-I8-0yYAH0).
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [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
### Screenshot
### Screenshot - Desktop View

### Screenshot - Mobile View

### Links
- Solution URL: [Frontend Mentor](https://www.frontendmentor.io/solutions/ip-address-tracker-using-react-and-tailwind-xOU298dHpF)
- Live Site URL: [GitHub Pages](https://achinthyadulshan.github.io/ip-address-tracker/)
## My process
### Built with
- Semantic HTML5 markup
- [Tailwind CSS](https://tailwindcss.com/)
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev/)
- [IP Geolocation API](https://geo.ipify.org/)
- [Leaflet](https://leafletjs.com/)
- [OpenStreetMap](https://www.openstreetmap.org/)
- Desktop-first workflow
## Author
- Website - [Achinthya Dulshan](https://achinthyadulshan.github.io/portfolio/)
- Frontend Mentor - [@AchinthyaDulshan](https://www.frontendmentor.io/profile/AchinthyaDulshan)
- LinkedIn - [Achinthya Dulshan](https://www.linkedin.com/in/achinthya-dulshan-6a0616221/)
- X - [@Achi_Dulshan](https://x.com/Achi_Dulshan)