DEV Community

Cover image for IpLookup website - know your device IP in the network and device specifications
B Mithilesh
B Mithilesh

Posted on • Edited on

1

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

Image description

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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();

Enter fullscreen mode Exit fullscreen mode

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();

Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay