Back to Projects

Case study

File System Engine

Electron desktop file manager with a dual-pane Transfer Hub and a treemap disk analyzer.

  • Electron
  • React
  • TypeScript
  • SQLite
Source Code

In the product

Transfer Hub: Two file panes side by side: copy or move the focused pane's selection into the other pane's folder.
Transfer Hub. Two file panes side by side: copy or move the focused pane's selection into the other pane's folder.
Storage Analyzer: Scan a folder for its total size, file and directory counts, and a treemap of its largest folders.
Storage Analyzer. Scan a folder for its total size, file and directory counts, and a treemap of its largest folders.
Explorer: Browse an Android phone over adb alongside local drives, with the Select Drive menu open.
Explorer. Browse an Android phone over adb alongside local drives, with the Select Drive menu open.
Settings: macOS Full Disk Access status and the Light, Dark and System theme toggle, in the light theme.
Settings. macOS Full Disk Access status and the Light, Dark and System theme toggle, in the light theme.

Screens are recreated from the app’s real UI with fictional demo data.

The core problem

What needed solving

Standard OS file managers lack the dual-pane workflows, activity audit trails, and secure IPC boundaries required for power users and agentic automation tooling.

The solution

What I built

File System Engine delivers a dual-pane Electron desktop experience with type-safe IPC between main and renderer processes, SQLite activity records for every file operation, and a strict CSP that allows MUI dynamic styling without external script execution.

An Electron desktop app for macOS and Windows for everyday file housekeeping: a dual-pane Transfer Hub for moving work between folders, external drives and an Android phone over adb, and a Storage Analyzer that scans a folder and draws a treemap of its largest subfolders. Every file, device and database call runs in the main process behind a typed, validated IPC API, with a sandboxed renderer and a local SQLite activity log.

Integration

How it fits together

Electron's main process owns the file system, Android devices over adb, the storage scanner and a SQLite activity log. The React 19 and Material UI renderer never touches Node directly: it calls a typed, context-isolated preload API whose requests are validated with Zod and checked to stay inside the chosen drive. The Storage Analyzer walks a folder in the main process and returns the largest folders for the treemap.

File System Engine architecture diagram
System architecture

The flow, step by step

  1. Launch the app on macOS or Windows (grant Full Disk Access on macOS or elevation on Windows if prompted).
  2. Use the dual-pane browser to navigate directories side by side and drag/copy between panes.
  3. Use the quick-access sidebar to jump to Home, Downloads, Documents, or mounted drives.
  4. Review the activity log for a persistent record of all file operations performed.
Problems along the way

What got hard, and what I did about it

A renderer with file-system power

The problem

Giving the UI direct Node access turns any injected script into full disk access.

What I did

Enabled context isolation and a sandboxed renderer, and exposed only a small, validated IPC surface from the preload script.

Shell commands built from file names

The problem

adb copy, create-file and scan ran through the host shell, so a crafted file name could run commands.

What I did

Switched to execFile with single-quoted device arguments.

A treemap that added up to more than 100%

The problem

Nested folders were counted twice, so block widths could exceed the scanned total.

What I did

Fixed the aggregation so the treemap blocks add up to the scanned total.

Takeaways

What I learned

  • Electron security is mostly about what the renderer is not allowed to do.
  • A disk analyzer is only useful if its numbers add up; test the totals, not just the drawing.
Outcome

Where it stands today

Dual-pane Transfer Hub: copy or move between panes, with confirmed moves that never overwrite existing items.
Treemap disk analyzer: total size, file and directory counts, and the largest folders sized by share of the total.
Drives, folders and Android phones over adb in one sidebar, refreshed every 10 seconds.
Locked-down Electron shell: context isolation, a sandboxed renderer, Zod-validated IPC and a production CSP.

Milestones

  • Dual-pane file manager

    Transfer Hub, breadcrumbs, Quick Access and everyday file actions.

    Shipped

  • Storage Analyzer

    Folder scan with a treemap of the largest subfolders.

    Shipped

  • Hardened IPC and CSP

    Typed preload API, Zod validation and path checks on every request.

    Shipped

  • Duplicate detection and AI features

    Planned, not built.

    Planned

Next up

  • Add duplicate detection.
  • Build the planned AI-assisted housekeeping features.
  • Ship signed macOS and Windows installers.

Next case study

RetailSync