https://github.com/codewithalamin/ip-address-tracker
A responsive web app built with Leaflet library, TypeScript, Sass, and HTML. You can track IP addresses and domains
https://github.com/codewithalamin/ip-address-tracker
codepapa360 codewithalamin css frontend-development frontendmentor-challenge html5 javascript webdevelopment website
Last synced: about 2 months ago
JSON representation
A responsive web app built with Leaflet library, TypeScript, Sass, and HTML. You can track IP addresses and domains
- Host: GitHub
- URL: https://github.com/codewithalamin/ip-address-tracker
- Owner: CodeWithAlamin
- License: mit
- Created: 2023-08-02T18:14:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T08:34:23.000Z (8 months ago)
- Last Synced: 2024-10-30T10:38:29.717Z (8 months ago)
- Topics: codepapa360, codewithalamin, css, frontend-development, frontendmentor-challenge, html5, javascript, webdevelopment, website
- Language: SCSS
- Homepage: https://ip-address-tracker-alamin.netlify.app/
- Size: 2.01 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# IP Address Tracker
Challenge from [Frontend Mentor](https://www.frontendmentor.io/challenges)
[🚀Live Site](https://ip-address-tracker-alamin.app/)
||
[💡Frontend Mentor](https://www.frontendmentor.io/solutions/responsive-ip-address-tracker-M7UO70Sb4n)
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.
## 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](https://leafletjs.com/) - JavaScript library for interactive maps
- Sass
- HTML5
- Mobile-first workflow
- [Webpack](https://webpack.js.org/) - 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:
```sh
git clone https://github.com/CodeWithAlamin/IP-Address-Tracker.git
```
- Install dependencies:
```sh
npm install
```
- Build the project:
```sh
npm run build
```
- Start the development server:
```sh
npm start
```
## Author
**👤 Alamin**
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)
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](https://github.com/CodeWithAlamin/IP-Address-Tracker/blob/main/LICENSE.md) License - see the LICENSE file for details.