🖥️ Building a Smart Finance System with Electron, React & SQLite

A Complete Offline-First Loan Management System for NBFCs & Local Lending Businesses

Keywords (SEO): loan management system, Electron React SQLite, offline finance software, EMI generator, NBFC loan app, React desktop app, SQLite loan database, PDF report generator, daily collection report, smart finance system, open-source loan manager.

🚀 Introduction

Excel sheets for loan management? I’ve watched finance teams lose EMI records, duplicate entries, and misplace KYC documents. One wrong formula and the entire month’s collection report breaks.

I needed something better — offline-first, fast, installable as a simple .exe, and easy enough for branch-level staff to use without training.

So I built Smart Finance System, an open-source Loan Management System using:

✔ Electron
✔ React + TypeScript
✔ SQLite (better-sqlite3)
✔ electron-builder (Windows packaging)

You can explore the complete source code here:
GitHub Repo: https://github.com/Elanchezhiyan-P/smart-finance-system

In this blog, I’ll walk you through how the system works, core features, architecture, screenshots, PDF and Excel export, code snippets, and key lessons learned from building a real offline loan management system.

🏗️ Architecture Overview (High-Level)

Here is how Electron, React, and SQLite interact to deliver a smooth desktop experience:

Architecture diagram

Components:

• Electron Main Process → Controls windows, DB access, file system
• Preload Script → Secure IPC bridge
• IPC Handlers → Act as backend APIs
• React Frontend (Vite) → UI, routing, components
• SQLite → Embedded high-performance local DB

This architecture ensures speed, security, and offline reliability. Perfect for small finance companies with limited connectivity.

📁 Project Structure

Straight from the GitHub repo:

/electron     → Electron main process, preload scripts, IPC handlers  
/src          → React UI (Vite + TypeScript)  
database.db   → SQLite database  
appConfig.js  → Company branding, defaults, developer info

📌 Core Features

The Smart Finance System is built to handle all core loan cycle operations.

👤 Customer Management

• Add/manage customer profiles
• PAN (10 chars), Aadhaar (12 digits), phone (10 digits) validation
• Notes tab for internal tracking
• Upload/manage customer documents (KYC, ID proofs)

Validation Code Example

const validatePan = (pan: string) =>
  /^[A-Z]{5}[0-9]{4}[A-Z]$/.test(pan);

const validateAadhaar = (value: string) =>
  /^\d{12}$/.test(value);

const validatePhone = (value: string) =>
  /^\d{10}$/.test(value);

💸 Loan Management

• Create loans with principal, rate, tenure, and EMI date
• EMI auto-generation
• Complete installment history
• Outstanding principal & interest
• Loan status: Active / Overdue / Closed
• Admin-protected close, reopen, and delete actions

EMI Schedule Generator

function generateEmiSchedule(principal, rate, months, startDate) {
  const r = rate / 12 / 100;
  const emi =
    (principal * r * Math.pow(1 + r, months)) /
    (Math.pow(1 + r, months) - 1);

  return Array.from({ length: months }).map((_, i) => ({
    id: i + 1,
    amount: Number(emi.toFixed(2)),
    dueDate: new Date(startDate).setMonth(startDate.getMonth() + i),
    status: "pending"
  }));
}

The EMI schedule displays a loan summary (principal, rate, tenure, outstanding) along with a detailed installment table showing due dates, principal/interest split, total EMI, and payment status.

EMI schedule

🧾 Payments & Collections

Payments are auto-applied to pending EMIs — full or partial.

Key Features

• Add payment with mode (cash/UPI/bank/cheque)
• Auto-allocation to EMIs
• Receipt PDF generation
• Daily collection viewer
• Date & mode filters
• Export as PDF

Auto Allocation Logic

function allocatePayment(loanId, amount) {
  const emis = db
    .prepare("SELECT * FROM emis WHERE loanId=? AND status='pending'")
    .all(loanId);

  for (const emi of emis) {
    if (amount <= 0) break;
    const remaining = emi.amount - emi.paid;
    if (amount >= remaining) {
      markEmiPaid(emi.id);
      amount -= remaining;
    } else {
      markEmiPartial(emi.id, emi.paid + amount);
      amount = 0;
    }
  }
}

🛡️ Collateral Tracking

Loans often involve assets. The system manages:

• Asset types: vehicle, gold, property, other
• Serial/reg numbers
• Owner info
• Original & current value
• Risk threshold
• Valuation history
• Link/unlink collaterals to loans

📚 Reports (PDF & Excel Ready)

The system generates all critical loan reports:

Available PDF Exports:

• EMI Schedule
• Daily Collection Report
• Customer Statement
• Overdue Loan Report
• Payment Receipt

PDF Export Logic (Electron)

ipcMain.handle("exportPdf", async (_, html, outputFile) => {
  const win = new BrowserWindow({ show: false });

  await win.loadURL(
    `data:text/html;charset=utf-8,${encodeURIComponent(html)}`
  );
  const pdf = await win.webContents.printToPDF({ format: "A4" });

  fs.writeFileSync(outputFile, pdf);
  return outputFile;
});

PDF Export

The app exports receipts and EMI schedules to PDF. Users can download professionally formatted documents ready for printing or sharing with clients.

Get Elanchezhiyan P’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

📄 Sample PDFs included in GitHub: https://github.com/Elanchezhiyan-P/smart-finance-system/blob/main/screenshots/receipt_5.pdf

⚙️ Settings & Branding

• Upload the company logo
• Manage the company name, address, and contact information
• Developer info for About pages
• Default login credentials
• Dynamic page title updates via config

🔐 Authentication

• Operator login
• Passwords hashed using bcrypt
• Simple audit logging
• Ready for role-based access upgrades

📦 Packaging as Windows .EXE

The system is packaged into a clean installer using electron-builder.

Build Commands

npm install
npm run build
npm run package:win64

Installer appears in the release/ folder.

✨ The .exe includes Start Menu + Desktop shortcuts.

🎯 Why a Desktop App Works Better Than a Cloud App

Especially for small finance operators:

✔ Works offline
✔ No hosting/server charges
✔ No downtime or latency
✔ Easy .exe installation
✔ Full control over local documents
✔ Perfect for rural/low-internet areas

Electron + SQLite makes this fast, reliable, and simple.

🛠️ Known Limitations & Roadmap

This is v1.0 — functional but evolving. Here’s what’s on my radar:

Current Limitations

• Single-user only (no multi-branch sync yet)
• Windows-only build (macOS/Linux coming)
• No cloud backup option
• Basic role system (admin/operator only)

Planned Features

• 🔄 Multi-branch data sync via local network
• 📱 Mobile companion app for field agents
• 🔐 Enhanced role-based access control
• ☁️ Optional cloud backup integration
• 📊 Dashboard with loan portfolio analytics

Got feature requests? Open an issue on GitHub — contributions are welcome!

❤️ Final Thoughts — and a Request 🙏

This project taught me the power of offline-first desktop apps in real-world business operations — especially in areas with limited internet connectivity.

If you found this useful, a ⭐ on the GitHub repo would mean a lot.

I write about full-stack development, Electron, React, and the architecture of real-world finance applications. Follow me on Medium if you’d like more deep-dive tutorials.

Thanks for reading 🙌