Skip to content

A responsive web app built with Leaflet library, TypeScript, Sass, and HTML. You can track IP addresses and domains

License

Notifications You must be signed in to change notification settings

CodeWithAlamin/IP-Address-Tracker

Repository files navigation

IP Address Tracker

Status License

Welcome to the IP Address Tracker! This web application, updated with TypeScript from version 1.0.1, lets you search for IP addresses and domains, providing essential information and geolocation details with a map view. Using Leaflet maps, TypeScript, Sass, and HTML, the app offers a smooth and responsive user experience. Additionally, interactive popups give friendly feedback in case of errors.

Screenshot

Key Features

Users should be able to:

  • See their own IP address on the map when the page loads
  • Search for any IP addresses or domains to view key information and location
  • Bonus: Interactive Popup/Dialog - Receive feedback popups for errors or invalid inputs
  • View the optimal layout for each page based on their device's screen size
  • See hover states for all interactive elements on the page

Built with

  • TypeScript (updated from v1.0.1)
  • Leaflet - JavaScript library for interactive maps
  • Sass
  • HTML5
  • Mobile-first workflow
  • Webpack - Module bundler for JavaScript

What I Learned

During the development of this project, which has been updated with TypeScript from version 1.0.1, I enhanced my error handling skills, particularly with APIs. Managing errors and providing user feedback through interactive popups was a valuable learning experience.

I also focused on improving code organization by separating functions and functionalities into different TypeScript files. This approach increased maintainability and made the codebase easier to understand and work with.

Installation

  • Clone this repo:
git clone https://github.com/CodeWithAlamin/IP-Address-Tracker.git
  • Install dependencies:
npm install
  • Build the project:
npm run build
  • Start the development server:
npm start

Author

👤 Alamin

Feel free to contact me with any questions or feedback!

Acknowledgments

This project, updated with TypeScript from version 1.0.1, was inspired by the "IP Address Tracker" challenge from Frontend Mentor. Special thanks to Frontend Mentor for providing the design and specifications for this project.

License

This project is licensed under the MIT License - see the LICENSE file for details.