IP Address Tracker is a React app that allows users to search and view geographical, timezone and ISP information of any IP address or domain.
On the first load, the app shows your IP address' region, city, timezone, ISP and loads its location on the map. Every subsequent search for a specific IP Address or domain will update the information on the page. You can zoom in and out of the map for a better view.
This app fetches IP addresses and domain information from the IP Geolocation API. React Leaflet that binds to Leaflet JS was used to create the interactive map.
Users should be able to:
- View the optimal layout 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
- See an error message if they input an invalid IP address or domain
- See an error message if they search for a non-existent IP address or domain
Hosted by Vercel
Source on GitHub
This application was first built using vanilla JavaScript only. In this step I used:
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Sass
- Parcel Bundler
I later converted it to a React application.
- Migrating from Parcel bundler to webpack 4. I learned how to adapt the projects file structure based on how different bundlers handle entry points.
- CSS Grid is better than Flexbox when creating layout that should be consistent when content is dynamic on each search.
- Working with Map API.
IP Geolocation API
React Leaflet
Leaflet JS
- Add an history feature to store search results of the last 5 searches
To get a local copy up and running locally, follow these simple steps.
- npm
npm install npm@latest -g
- Clone the repo
git clone https://github.com/b-kip/ip-tracker-master.git
- Install NPM packages
npm install
- Start dev server
npm start