DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

A Detailed system information App using React and electron for unified workflow

A Detailed system information App using React and electron for unified workflow

SysPeek System Information Viewer

A Detailed system information App using React and electron for unified workflow

With SysPeek, users can quickly access vital information about their system, including details about the CPU, memory, storage, operating system, network connections, and more. This user-friendly tool offers a straightforward interface, making it easy for both novice and experienced users.

Tech Stack

CLIENT: React, Hooks, Ant Design 5+, Electron, Node

SYSTEM API: SystemInformation npm package from -> (https://systeminformation.io/)

Features

  • Get detailed insights into your computer's hardware components.
  • Access info about your OS, Hardware, software, and drivers and many more.
  • Monitor CPU, disk, and network usage in real-time. (in progress..)
  • View IP, DNS, and network adapters information.
  • Check disk space and file system details.
  • Show current detected Bluetooth, WiFi, Printers, USB Devices.
  • Deployable on Windows, Linux, macOS

Screenshots

See SS here.

App View

A Detailed system information App using React and electron for unified workflow

Home (About) View

A Detailed system information App using React and electron for unified workflow

Pre Requirements For Local Development

  • React 18+
  • Node, NPM
  • Python with pip
  • VSCODE With ES6+ Module

Installation

Clone the project

git clone https://github.com/shehari007/SysPeek-hwinfo-react-electron-app.git
Enter fullscreen mode Exit fullscreen mode

Go to the project directory

cd SysPeek-hwinfo-ract-electron-app
Enter fullscreen mode Exit fullscreen mode

Install dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

Start the Electron Project in Windows

npm run electron:start
Enter fullscreen mode Exit fullscreen mode

Project will open in window mode not in browser as normal react app would, Happy Hacking!

Deployment

Deployment is never been easy before, package.json is already configured for every platform (Window, Linux, MacOs). Just need to run build commands for each platform as follows:

For Windows

npm run electron:package:win
Enter fullscreen mode Exit fullscreen mode

For Linux

npm run electron:package:linux
Enter fullscreen mode Exit fullscreen mode

For MacOS

npm run electron:package:mac
Enter fullscreen mode Exit fullscreen mode

Running these commands will give you a package file (Windows->NSIS .exe) || (Linux->.deb) || (macOS->.dmg).

License

MIT

Feedback

If you have any feedback, please reach out at shehariyar@gmail.comdont't forget to give us a star if you like this project.

GitHub

View Github

Top comments (1)

Collapse
 
clouwood profile image
Vishal Goyal