system-info-appcd

Nadcab Labs Interview Task

Created a React component that displays system information, tracks idle time, and shows a digital clock. This component was then packaged as a standalone npm library, which you configured with necessary dependencies and build scripts. Finally, you published the library to npm, making it available for others to install and use in their own React projects.

Features

“”Browser Information: Displays details about the user's browser. “”IP Information: Fetches and displays the user's public IP address. “”Device ID: Generates a unique device ID using FingerprintJS. “”Digital Clock: Shows the current time, synced with the system clock. “”Idle Time Tracking: Tracks and displays the amount of time the user has been idle (no mouse or keyboard activity). “” Session Persistence: Resumes the clock from the last recorded time if the page is closed and reopened.

Installation

npm install react-system-info

Usage

Here's how to use the SystemInfo component in your React project:

“*” Import the Component: Import the SystemInfo component into your React application:

import React from 'react';
import SystemInfo from 'react-system-info';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      <SystemInfo />
    </div>
  );
}

export default App;

“*” Run Your Application: Make sure your React app is running by using:

npm start

License

This project is licensed under the MIT License.

Author

@nadcablabs