https://github.com/chanda-abdul/frontend-mentor-ip-address-tracker-angular
This is a solution to the IP address tracker challenge on Frontend Mentor.
https://github.com/chanda-abdul/frontend-mentor-ip-address-tracker-angular
angular api observables regex rxjs sweetalert2 typescript
Last synced: about 1 month ago
JSON representation
This is a solution to the IP address tracker challenge on Frontend Mentor.
- Host: GitHub
- URL: https://github.com/chanda-abdul/frontend-mentor-ip-address-tracker-angular
- Owner: Chanda-Abdul
- Created: 2022-10-26T06:46:07.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-08T21:27:56.000Z (over 3 years ago)
- Last Synced: 2025-01-13T16:49:20.669Z (over 1 year ago)
- Topics: angular, api, observables, regex, rxjs, sweetalert2, typescript
- Language: TypeScript
- Homepage: https://tubular-cheesecake-3b5f91.netlify.app
- Size: 19.5 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - IP address tracker
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)
- [Screenshots](#screenshots)
- [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
Your challenge is to build out this IP Address Tracker app and get it looking as close to the design as possible.
* To get the IP Address locations, you'll be using the [IP Geolocation API by IPify](https://geo.ipify.org/).
* To generate the map, we recommend using [LeafletJS](https://leafletjs.com/).
### Users should be able to:
- [x] View the optimal layout for each page depending on their device's screen size
- [x] Mobile: `375px`
- [x] Desktop: `1440px`
- [x] See hover states for all interactive elements on the page
- [x] See their own IP address on the map on the initial page load
- [x] Search for any IP addresses or domains and see the key information and location
## Screenshots
### Mobile `@375px`
### No one asked but, Tablet `@768px`
### Desktop `@1140px`
#
### with Input Validation
#### valid IP address input
I used RegEx to validate the input,
```js
checkIpAddressRegex = /\S+@\S+\.\S+/;
...
validateInput(ipOrDomain){
...
this.checkIpAddressRegex.test(ipOrDomain)
...
}
```
if the input IS valid the user will see the "success" alert below
#### invalid IP address input
if the input IS NOT valid the user will see the "error" alert below
#### valid domain input
❗️the [IP geolocation API by Abstract](https://app.abstractAPI.com/API/ip-geolocation/documentation) does not have a domain query parameter, so I skipped this for now.
I also used RegEx to check if the input is a valid domain,
```js
checkDomainRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9]
[0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\
.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\
.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
...
validateInput(ipOrDomain){
...
(this.checkDomainRegex.test(ipOrDo
main));
...
}
```
if so the user will see the "warning" alert below
## Links
- Solution URL: [View Solution](https://github.com/Chanda-Abdul/Frontend-Mentor-IP-address-tracker-Angular)
- Live Site URL: [View Live site](https://tubular-cheesecake-3b5f91.netlify.app)
## My process
### Design
- I started by reviewing the starter design files that were included in this project. The Sass/CSS was pretty straightforward. `styles.scss` for the global styles, `_variables.scss` for re-useable styles, and style sheets for each component.
- I created a new Angular project and decided on components that would be needed.
For components I went with
- `` as the entry component. I wanted to keep the code and functionality to a minimum in this component. Within the this component we have
- The `` component, which captures the user's input. Once the input is submitted, it is sent to the `GeoLocationService` so that a new API/http request can be made and the data will be re-rendered.
- The `` component, to display the current IP Address, location, Timezone, and Internet Service Provider. This contains the
- ``component which handles the API/call for the mapping functionality, which could be moved to a Service later.
#
### API Selection
Geolocation API
To get the IP Address locations, I decided to go with the [IP geolocation API by Abstract](https://app.abstractAPI.com/API/ip-geolocation/documentation) because the
[IP Geolocation API by IPify](https://geo.ipify.org/docs) has a very small lifetime limit of 1,000 🆓 requests; compared to Abstract's 22,000 🆓 requests per month *and* optional ip address query parameter.
##### `GET` request:
`https://ipgeolocation.abstractapi.com/v1/`
##### Input parameters:
`api_key`(required): 🤫
`fields`(optional): `=ip_address,city,region_iso_code,postal_code,longitude,latitude,timezone,connection`
`ip_address`(optional): ex. `210.138.184.59`
Google Maps API
For the mapping API, I went with [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript). I've used [LeafletJS](https://leafletjs.com/) before and I wanted to try something new, I also thought that a google API would pair well with Angular.
##### `GET` request:
`http://maps.googleapis.com/maps/api/js`
##### Input parameters:
`key`(required): 🤫
- I also used a custom `Marker` and removed the `disableDefaultUI` controls.
#
### Reactive Development with RxJs
This was a good project to practice Reactive development and RxJs/Observables. The data returned from the API calls are Observables.
## Built with
### APIs
- [IP geolocation API by Abstract](https://app.abstractAPI.com/API/ip-geolocation/documentation) to get the IP Address locations.
- [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript), for the mapping API.
- [Insomnia](https://insomnia.rest/) to test API endpoints and query parameters.
### Frameworks and Librarys
- [Angular](https://angular.io/) (JavaScript framework)
- [TypeScript](https://www.typescriptlang.org/)
- [JavaScript](https://www.javascript.com/)
- [RxJs](https://rxjs.dev/) a library for reactive programming using Observables.
- [sweetalert2](https://sweetalert2.github.io/) - A beautiful, responsive, customizable, accessible replacement for JavaScript’s popup boxes. I used this for the sweet input error alerts 😋.
- [Figma](https://www.figma.com/) collaborative web application for interface design.
- [Sass](https://sass-lang.com/)/CSS custom properties
- Mobile-first workflow
- Responsive Styling
- Flexbox
- Semantic HTML5 markup
## What I learned
Observables and RxJs
[BehaviorSubject](https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject) - I knew that it would be best to use Observables for the API data. I decided to go with a `BehaviorSubject` because multiple components would need to subscribe to the API data and notified when there were changes.
this is what it looks like...
### 📂 `fetch.geolocation.service.ts`
```js
private geolocationResult!;
private geoBehaviorSubject = new BehaviorSubject(this.geolocationResult);
readonly geolocation$ = this.geoBehaviorSubject.asObservable();
...
fetchGeolocation(ipAddress?): void {
this.http.get(
`${this.geoURL}?api_key=${environment.IP_GEOLOCATION_API_KEY}`
+ (ipAddress ? `&ip_address=${ipAddress}` : ""),
{
params: {
fields: 'ip_address,city,country,continent,region_iso_code,postal_code,
longitude,latitude,timezone,connection'
}
})
.subscribe(
res => {
this.geoBehaviorSubject.next(res);
}
)
}
```
### 📂 `display.component.ts`
```js
geolocation$ = this.fetchGeolocationService.geolocation$;
geolocation: Geolocation;
...
this.fetchGeolocationService.fetchGeolocation();
...
this.geolocation$.subscribe(res => this.geolocation = res);
```
### 📂 `display.component.html`
```html
...
Timezone
{{geolocation.timezone.abbreviation}}
{{this.formatTimezone(geolocation.timezone.gmt_offset)}}:00
...
```
Selecting an API
The most challenging part, for the APIs, was just selecting which two APIs would be best for this project.
For the Geolocation API, I started with the recommended, [IP Geolocation APIby IPify](https://geo.ipify.org/) , but I quickly learned that the lifetime request limit is pretty low. So I looked into a few other geolocation/ip address APIs and there weren't very many free APIs that would also give me the data I need, and a decent request amount, while being easily incorparated into an Angular project. I ended up going with the [IP geolocation API by Abstract](https://app.abstractAPI.com/API/ip-geolocation/documentation)
For the mapping API, I skipped [LeafletJS](https://leafletjs.com/), because I've used it before and I wanted to try something new, and it also doesn't seem to work well with Angular at the moment. I went with the [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript), but i'm not sure if this is the best long-term option.
## Continued development
- [ ] implement search by domain input functionality, may need to use a different API?
## Useful resources
- [Get data from a server](https://angular.io/tutorial/toh-pt6) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
- [Integrating Google Maps API w/ Angular 7+](https://medium.com/@jkeung/integrating-google-maps-API-w-angular-7-e7672396ce2d) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- [How to Display Spinner...](https://www.geeksforgeeks.org/how-to-display-spinner-on-the-screen-till-the-data-from-the-API-loads-using-angular-8/) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
- [PluralSight Course - RxJS in Angular: Reactive Development
by Deborah Kurata](https://app.pluralsight.com/library/courses/rxjs-angular-reactive-development) 💯 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
- [Learn RxJs - BehaviorSubject](https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- [Maps JavaScript API > Markers](https://developers.google.com/maps/documentation/javascript/markers) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
## Author
- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)
- Website - [Chanda Codes](https://chandacodes.com/)
- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)
## Acknowledgments