Inventory management Desktop App Using ElectronJS

File Structure

inventory-app/
├── assets/
│   └── icon.png
├── node_modules/
├── src/
│   ├── renderer/
│   │   ├── index.html
│   │   ├── renderer.js
│   │   └── styles.css
│   └── main/
│       ├── main.js
│       ├── database.js
│       └── inventory.js
├── inventory.db
├── package.json
├── package-lock.json
└── README.md

1. `main.js` (`src/main/main.js`)

This file handles the Electron app lifecycle and creates the main window.

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const { addItem, getItems } = require('./inventory'); // Import inventory logic

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
});

// Handle inter-process communication (IPC)
ipcMain.on('add-item', (event, item) => {
  addItem(item, (err) => {
    if (err) {
      event.reply('error', 'Error adding item');
    } else {
      event.reply('success', 'Item added');
    }
  });
});

ipcMain.on('get-items', (event) => {
  getItems((err, items) => {
    if (err) {
      event.reply('error', 'Error fetching items');
    } else {
      event.reply('inventory-data', items);
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

2. `database.js` (`src/main/database.js`)

This file handles the SQLite database connection and initialization.

const sqlite3 = require('sqlite3').verbose();
const path = require('path');

// Initialize SQLite database
const db = new sqlite3.Database(path.join(__dirname, '../../inventory.db'), (err) => {
  if (err) {
    console.error('Error opening database:', err);
  } else {
    db.run(`
      CREATE TABLE IF NOT EXISTS inventory (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT NOT NULL,
        quantity INTEGER NOT NULL
      )
    `, (err) => {
      if (err) {
        console.error('Error creating table:', err);
      }
    });
  }
});

module.exports = db;

3. `inventory.js` (`src/main/inventory.js`)

This file contains the logic to interact with the database, such as adding or fetching items.

const db = require('./database');

// Add item to the database
function addItem(item, callback) {
  db.run('INSERT INTO inventory (name, quantity) VALUES (?, ?)', [item.name, item.quantity], callback);
}

// Get all items from the database
function getItems(callback) {
  db.all('SELECT * FROM inventory', callback);
}

module.exports = { addItem, getItems };

4. `index.html` (`src/renderer/index.html`)

This is the frontend HTML page that the Electron app loads.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inventory Management</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <h1>Inventory Management</h1>
  <div id="inventory-list"></div>

  <form id="item-form">
    <input type="text" id="item-name" placeholder="Item name" required />
    <input type="number" id="item-quantity" placeholder="Quantity" required />
    <button type="submit">Add Item</button>
  </form>

  <script src="./renderer.js"></script>
</body>
</html>

5. `renderer.js` (`src/renderer/renderer.js`)

This file manages communication between the frontend and the backend (main process) and updates the UI.

const { ipcRenderer } = require('electron');

// Handle form submission
document.getElementById('item-form').addEventListener('submit', (event) => {
  event.preventDefault();

  const itemName = document.getElementById('item-name').value;
  const itemQuantity = document.getElementById('item-quantity').value;

  // Send the item data to the backend
  ipcRenderer.send('add-item', { name: itemName, quantity: parseInt(itemQuantity) });
});

// Success/Error handling from backend
ipcRenderer.on('success', (event, message) => {
  alert(message);
  loadInventory();
});

ipcRenderer.on('error', (event, message) => {
  alert(message);
});

// Load and display inventory items
function loadInventory() {
  ipcRenderer.send('get-items');
}

ipcRenderer.on('inventory-data', (event, items) => {
  const inventoryList = document.getElementById('inventory-list');
  inventoryList.innerHTML = '';

  items.forEach(item => {
    const itemElement = document.createElement('div');
    itemElement.innerHTML = `<p>${item.name} - ${item.quantity}</p>`;
    inventoryList.appendChild(itemElement);
  });
});

// Initial load of inventory
loadInventory();

6. `styles.css` (`src/renderer/styles.css`)

Basic styling for the app.

body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

h1 {
  text-align: center;
}

form {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

#inventory-list {
  margin-top: 20px;
}

#inventory-list div {
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

7. `package.json` (`package.json`)

This is the package.json for your project, defining the scripts and dependencies.

{
  "name": "inventory-app",
  "version": "1.0.0",
  "description": "A simple inventory management desktop app using Electron.js, SQLite, and Node.js",
  "main": "src/main/main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^26.0.0"
  },
  "dependencies": {
    "sqlite3": "^5.1.2"
  }
}

8. `README.md` (Optional)

This file should explain how to run and use the app.

# Inventory Management App

A simple desktop application built with Electron.js, SQLite, and Node.js to manage inventory.

## How to Run

1. Clone the repository:

bash
git clone https://github.com/your-username/inventory-app.git


2. Navigate to the project directory:

bash
cd inventory-app


3. Install dependencies:

bash
npm install


4. Start the Electron app:

bash
npm start


## Features

- Add inventory items with name and quantity
- View all items in the inventory

## Technologies Used

- **Electron.js** for desktop application framework
- **SQLite** for database management
- **Node.js** for backend logic

How to Run the Application

Install Dependencies: Run npm install to install all necessary dependencies (like electron and sqlite3).
Start the Application: Use npm start to launch the Electron app.

Blog

Inventory management Desktop App Using ElectronJS

Abdul Haseeb

File Structure

1. `main.js` (`src/main/main.js`)

2. `database.js` (`src/main/database.js`)

3. `inventory.js` (`src/main/inventory.js`)

4. `index.html` (`src/renderer/index.html`)

5. `renderer.js` (`src/renderer/renderer.js`)

6. `styles.css` (`src/renderer/styles.css`)

7. `package.json` (`package.json`)

8. `README.md` (Optional)

How to Run the Application

Join Our Newsletter. No Spam, Only the good stuff.

Related

Inventory management Desktop App Using ElectronJS

Abdul Haseeb

File Structure

1. main.js (src/main/main.js)

2. database.js (src/main/database.js)

3. inventory.js (src/main/inventory.js)

4. index.html (src/renderer/index.html)

5. renderer.js (src/renderer/renderer.js)

6. styles.css (src/renderer/styles.css)

7. package.json (package.json)

8. README.md (Optional)

How to Run the Application

Join Our Newsletter. No Spam, Only the good stuff.

Related

1. `main.js` (`src/main/main.js`)

2. `database.js` (`src/main/database.js`)

3. `inventory.js` (`src/main/inventory.js`)

4. `index.html` (`src/renderer/index.html`)

5. `renderer.js` (`src/renderer/renderer.js`)

6. `styles.css` (`src/renderer/styles.css`)

7. `package.json` (`package.json`)

8. `README.md` (Optional)