A Detailed system information App using React and electron for unified workflow
Tags: apps, electron
Published: 2023-12-06 09:14:56

---
title: A Detailed system information App using React and electron for unified workflow
published: true
date: 2023-11-27 00:21:00 UTC
tags: Apps,Electron
canonical_url: https://reactjsexample.com/a-detailed-system-information-app-using-react-and-electron-for-unified-workflow/
---

 ![A Detailed system information App using React and electron for unified workflow](https://github.com/shehari007/SysPeek-hwinfo-react-electron-app/raw/main/public/logo192.png?raw=true)

# SysPeek System Information Viewer
 ![A Detailed system information App using React and electron for unified workflow](https://reactjsexample.com/content/images/2023/11/Code_2023-11_14-16-12.jpg)

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/](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](https://github.com/shehari007/SysPeek-hwinfo-react-electron-app/raw/main/screenshots/syspeek%20(1).png?raw=true)
#### Home (About) View
 ![A Detailed system information App using React and electron for unified workflow](https://github.com/shehari007/SysPeek-hwinfo-react-electron-app/raw/main/screenshots/syspeek%20(2).png?raw=true)

## 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
```

Go to the project directory

```
cd SysPeek-hwinfo-ract-electron-app
```

Install dependencies

```
npm install
```

Start the Electron Project in Windows

```
npm run electron:start
```

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
```

## For Linux

```
npm run electron:package:linux
```

## For MacOS

```
npm run electron:package:mac
```

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

## License

[MIT](https://choosealicense.com/licenses/mit/)

## Feedback

If you have any feedback, please reach out at [shehariyar@gmail.com](mailto:shehariyar@gmail.com)dont't forget to give us a star if you like this project.

## GitHub

[View Github](https://github.com/shehari007/SysPeek-hwinfo-react-electron-app)