DEV Community

Cover image for Building a Modern ReactJS App to Detect Browser and Device Details
Ghazi Khan
Ghazi Khan

Posted on • Originally published at open.substack.com

Building a Modern ReactJS App to Detect Browser and Device Details

In today's multi-device world, understanding the environment in which your users are interacting with your application is crucial. Whether you're a web developer optimizing your app for different browsers and operating systems or simply someone curious about the specs of your device, having access to detailed user agent information can be incredibly useful.

In this article, we'll walk through building a sleek and modern ReactJS app that detects and displays detailed information about the user's browser, OS, and device. Inspired by the design of modern weather apps, our tool will present this information in a dark-themed, user-friendly interface.

Why User Agent Detection Matters

User agent detection plays a vital role in web development. By identifying the user's browser, operating system, and device, developers can optimize content delivery, enhance performance, and ensure compatibility across different platforms. This is particularly important in a world where users access websites and apps on a variety of devices, from desktops and laptops to tablets and smartphones.

With our ReactJS app, you'll be able to easily access detailed user agent information, including:

  • Browser: Name, version, major version, type
  • Engine: Name, version
  • Operating System: Name, version
  • Device: Model, type, vendor
  • CPU: Architecture

Let's dive into how we can build this app.

Video Tutorial: If you don't like to read

Setting Up the ReactJS Project

First, we'll start by setting up a new ReactJS project. If you haven't done so already, you can create a new project using Create React App:

npx create-react-app browser-info-app
cd browser-info-app
npm start
Enter fullscreen mode Exit fullscreen mode

This will set up the basic scaffolding for your React app and start the development server. Now, let’s move on to installing the necessary libraries.

Installing the ua-parser-js Library

To parse user agent strings and extract detailed information, we'll use the ua-parser-js library. This lightweight library provides an easy-to-use API for extracting information about the browser, OS, device, and more.

Install ua-parser-js via npm:

npm install ua-parser-js
Enter fullscreen mode Exit fullscreen mode

Next, let's create a utility function to use ua-parser-js in our app.

Creating the User Agent Detection Utility

Create a new file called userAgent.js in the src directory:

import UAParser from 'ua-parser-js';

export const getUserAgentDetails = () => {
  const parser = new UAParser();
  return {
    browser: parser.getBrowser(),
    engine: parser.getEngine(),
    os: parser.getOS(),
    device: parser.getDevice(),
    cpu: parser.getCPU(),
  };
};
Enter fullscreen mode Exit fullscreen mode

This utility function returns an object containing all the relevant user agent details.

Building the User Interface

Next, we’ll create a modern, sleek UI to display this information. We’ll use a dark theme with card components to present the different categories of information.

Create a new component called UserAgentInfo.js:

import React, { useEffect, useState } from 'react';
import { getUserAgentDetails } from './userAgent';
import './UserAgentInfo.css';

const UserAgentInfo = () => {
  const [details, setDetails] = useState({});

  useEffect(() => {
    const userDetails = getUserAgentDetails();
    setDetails(userDetails);
  }, []);

  return (
    <div className="user-agent-info">
      <div className="info-card">
        <h2>Browser</h2>
        <p>Name: {details.browser.name}</p>
        <p>Version: {details.browser.version}</p>
        <p>Major: {details.browser.major}</p>
        <p>Type: {details.browser.type || 'N/A'}</p>
      </div>
      <div className="info-card">
        <h2>Engine</h2>
        <p>Name: {details.engine.name}</p>
        <p>Version: {details.engine.version}</p>
      </div>
      <div className="info-card">
        <h2>Operating System</h2>
        <p>Name: {details.os.name}</p>
        <p>Version: {details.os.version}</p>
      </div>
      <div className="info-card">
        <h2>Device</h2>
        <p>Model: {details.device.model || 'N/A'}</p>
        <p>Type: {details.device.type || 'N/A'}</p>
        <p>Vendor: {details.device.vendor || 'N/A'}</p>
      </div>
      <div className="info-card">
        <h2>CPU</h2>
        <p>Architecture: {details.cpu.architecture}</p>
      </div>
    </div>
  );
};

export default UserAgentInfo;
Enter fullscreen mode Exit fullscreen mode

Styling the App

To complete the modern look, we need to style our components. Here’s some sample CSS to get you started:

.user-agent-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #121212;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  min-height: 100vh;
}

.info-card {
  background-color: #1e1e1e;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.info-card h2 {
  margin-top: 0;
  color: #00adb5;
}

.info-card p {
  margin: 5px 0;
}
Enter fullscreen mode Exit fullscreen mode

This CSS gives the app a dark, modern aesthetic with smooth gradients and clear typography.

Running the App

With everything in place, your app should be ready to run. Open your browser and navigate to http://localhost:3000. You should see your new ReactJS app displaying detailed information about your browser, OS, device, and CPU.

Conclusion

In this tutorial, we've created a ReactJS app that detects and displays detailed browser and device information. The sleek, modern design mimics the layout of a weather app, providing users with easy-to-read, organized information.

This project not only highlights the importance of user agent detection in web development but also serves as a practical example of how to build a user-friendly interface using ReactJS.

Feel free to extend this project by adding more features or refining the UI further. Whether you're a developer needing detailed environment data or just someone curious about your device, this app is a great tool to have in your arsenal.

Happy coding!


Subscribe to Newsletter: https://codewithghazi.substack.com/

Follow me for more content like this:

LinkedIn: https://www.linkedin.com/in/ghazi-khan/

Twitter: https://twitter.com/ghazikhan205

Youtube: http://www.youtube.com/@codewithghazi

Instagram: https://www.instagram.com/codewithghazi/

Top comments (0)