IpLookup website - know your device IP in the network and device specifications

https://ip.mithileshdev.co/

Dev Blog: Building a Web App to Display IP Address, Geolocation, and Device Specs

Introduction

In this blog, I'll walk you through the process of building a web application that displays your IP address, geolocation, and detailed device specifications. This project was a fantastic learning experience, showcasing the power of modern web technologies and APIs.
Project Overview

Our web app provides the following features:

• IP Address and Geolocation
• Device Specifications
• Network Information

Let's dive into the implementation, breaking it down into small, digestible snippets.
Setting Up the Project

We started with a basic HTML structure to create the foundation of our web app.

This simple setup includes placeholders for the different pieces of information we plan to display.
Fetching IP Address and Geolocation

To get the user's IP address and geolocation, we used the IP Geolocation API. Here's the snippet for fetching and displaying this data:

javascript

async function fetchIPAndLocation() {
    const response = await fetch('https://api.ipgeolocation.io/ipgeo?apiKey=YOUR_API_KEY');
    const data = await response.json();
    document.getElementById('ip-address').innerText = `IP Address: ${data.ip}`;
    document.getElementById('location').innerText = `Location: ${data.city}, ${data.country_name} (Lat: ${data.latitude}, Lon: ${data.longitude})`;
}

fetchIPAndLocation();

Using fetch, we make an API call to get the IP address and geolocation data, then update the HTML with this information.
Gathering Device Specifications

To collect various device specs, we used multiple browser APIs. This snippet illustrates how to get screen size, device memory, CPU cores, and GPU info:

javascript

function getDeviceSpecs() {
    const specs = {};
    specs.screenWidth = window.screen.width;
    specs.screenHeight = window.screen.height;
    specs.deviceMemory = navigator.deviceMemory || 'N/A';
    specs.hardwareConcurrency = navigator.hardwareConcurrency || 'N/A';

    const gl = document.createElement('canvas').getContext('webgl');
    specs.gpu = gl.getParameter(gl.UNMASKED_RENDERER_WEBGL);

    document.getElementById('device-specs').innerHTML = `
        <h2>Device Specs:</h2>
        <p>Screen Size: ${specs.screenWidth} x ${specs.screenHeight}</p>
        <p>Device Memory: ${specs.deviceMemory} GB</p>
        <p>CPU Cores: ${specs.hardwareConcurrency}</p>
        <p>GPU: ${specs.gpu}</p>
    `;
}

getDeviceSpecs();

We accessed properties like window.screen.width and navigator.deviceMemory, and used WebGL to get GPU information.
Displaying Battery Information

The Battery Status API provides battery level details:

javascript

async function getBatteryInfo() {
    const battery = await navigator.getBattery();
    document.getElementById('device-specs').innerHTML += `
        <p>Battery Level: ${battery.level * 100}%</p>
        <p>Battery Temperature: Not directly available, simulated value: 30°C</p>
    `;
}

getBatteryInfo();

Although direct battery temperature isn't available, we simulated it for demonstration purposes.
Fetching Network Information

We used the Network Information API to display network details:

javascript

function getNetworkInfo() {
    const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    const type = connection.effectiveType;
    const downlink = connection.downlink;
    const rtt = connection.rtt;

    document.getElementById('network-info').innerHTML = `
        <h2>Network Info:</h2>
        <p>Connection Type: ${type}</p>
        <p>Downlink: ${downlink} Mbps</p>
        <p>RTT: ${rtt} ms</p>
    `;
}

getNetworkInfo();

This snippet accesses connection properties to show the type, downlink speed, and round-trip time.
Calculating FPS

For calculating FPS, we used the Performance API:

javascript

function calculateFPS() {
    let lastFrame = performance.now();
    let frameCount = 0;
    let fps = 0;

    function loop() {
        const now = performance.now();
        frameCount++;
        if (now - lastFrame >= 1000) {
            fps = frameCount;
            frameCount = 0;
            lastFrame = now;
            document.getElementById('device-specs').innerHTML += `<p>FPS: ${fps}</p>`;
        }
        requestAnimationFrame(loop);
    }

    loop();
}

calculateFPS();

By measuring the time between frames, we calculated and displayed the FPS.

Conclusion

Building this web application was a fantastic experience, allowing us to explore various web APIs and enhance our understanding of client-side scripting. The combination of these technologies resulted in a comprehensive tool that provides users with insightful information about their device and network.

Feel free to explore and extend this project. The full code is available on our GitHub repository. Happy coding!