Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stephenkati/ip_address_tracker
https://github.com/stephenkati/ip_address_tracker
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/stephenkati/ip_address_tracker
- Owner: stephenkati
- License: mit
- Created: 2023-10-23T13:34:26.000Z (about 1 year ago)
- Default Branch: dev
- Last Pushed: 2023-11-02T11:57:11.000Z (about 1 year ago)
- Last Synced: 2024-10-23T12:36:33.300Z (21 days ago)
- Language: JavaScript
- Size: 1.45 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#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 addresses or domains and see the key information and location
### Screenshot
### Links
- Solution URL: [Ip_address_tracker](https://github.com/stephenkati/Ip_address_tracker)
- Live Site URL: [IP Address Tracker](https://addresstracker.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- [React](https://reactjs.org/) - JS library
- [Redux](https://redux.js.org/) - React framework
### What I learned
In this project, I gained valuable experience in integrating `Leaflet.js` into a React application. This allowed me to create _dynamic_, _interactive maps_ and display location data using the `IP Geolocation API`.
I learned how to **set up maps**, **add markers**, and **popups** to provide additional information to users.
Moreover, I integrated `OpenStreetMap` (OSM) data, enhancing the project's functionality. Overally, this project deepened my understanding of working with maps in web applications and honed my skills in React development, making me better equipped to implement mapping features in future web projects.
### Continued development
I want to explore default locations to display on load.
### Useful resources
- [Open Street Map](https://www.example.com) - I loved the display provided by this map, very accurate.
- [IP Geolocation API](https://www.example.com) - I liked this API because it provided me with so much information from just an IP address like city, postal code, cordinates, ISP, e.t.c.
- [Leaflet JS](https://leafletjs.com/) - I liked this library because it is super lightweight and dynamic which is very useful in designing a responsive web application
## Author
- Website - [Stephen Katuli](https://stephenkatuli.netlify.app/)
- Frontend Mentor - [@stephenkati](https://www.frontendmentor.io/profile/stephenkati)
- Twitter - [@Stephen57913145](https://www.twitter.com/Stephen57913145)
## Acknowledgments
I would like to thank and hugely recommend FrontEnd Mentor, Ip Geolocation API, Leaflet Js and Open Street maps for providing me with the tools that made this project a success.