DEV Community: Umeh Chisom

The Sovereign Vault: Why JSON is the ultimate database for privacy-conscious apps.

Umeh Chisom — Mon, 09 Mar 2026 16:40:55 +0000

Most modern software treats your data like a hostage.

If you use a cloud-based accounting tool, your financial history lives in their Postgres database, behind their API, subject to their subscription terms. If they go bust or change their pricing, your data is a headache to move.

When I started building AccIQ under Auvira Systems, I wanted to build "Sovereign Software." I wanted a system where the "user",not the "platform", is the source of truth.

Here is why I ditched the cloud database and built the Sovereign Vault using nothing but JSON and browser APIs.

1. The "Local-First" Problem

Building a local-first app in React is great for speed (zero latency), but it creates a massive risk: Device Lock-in.
If your data only lives in your browser's localStorage, what happens when you buy a new laptop? Or if you clear your browser cache?

To solve this, I built the Sovereign Vault. It’s a simple but powerful concept: Your entire financial existence should be reducible to a single, portable file.

2. Why JSON is the ultimate "Database"

For a double-entry ledger, JSON is actually superior to a live SQL database for the end-user:

Human Readable: You can open your "Vault" in any text
editor. You don't need my app to see your data.
Versionable: You can drop your Vault into a Git repo and see exactly how your finances changed over time.
Platform Agnostic: If I stop maintaining Finance-OS tomorrow, you can write a simple Python script to parse your JSON and move it to Excel or another tool.

3. The Technical Challenge: Validating the Import

The hardest part of a "Sovereign Vault" isn't the export—it's the Import.

When a user uploads a JSON file, my React application has to treat it as "untrusted input." If the JSON is malformed or if someone manually edited a number so that the ledger no longer balances (Assets ≠ Liabilities + Equity), the entire app state will corrupt.

The Validation Logic:

I implemented a strict validation pipeline during the import process:

Schema Check: Ensuring every transaction has a debit, credit, timestamp, and id.
Integrity Check: Re-running the entire ledger logic from the first transaction to the last to ensure the final balances match the imported totals.
Atomic Update: We only replace the localStorage state if the entire validation passes.

// A simplified look at the validation flow
const handleImport = async (jsonFile: string) => {
  const data = JSON.parse(jsonFile);

  // 1. Validate Schema
  if (!isValidLedgerSchema(data)) throw new Error("Invalid Vault Format");

  // 2. Verify Ledger Balance
  const isBalanced = data.transactions.reduce((acc, tx) => acc + tx.amount, 0) === 0;
  if (!isBalanced) throw new Error("Ledger Imbalance Detected");

  // 3. Commit to Local Storage
  localStorage.setItem('finance_os_vault', JSON.stringify(data));
  window.location.reload(); // Refresh to boot from new state
};

4. Software as a Tool, Not a Service

By building the Sovereign Vault, I’ve essentially made my own business model "opt-in."

I don't own your data. I don't charge you a "ransom" (subscription) to access your own history. I provide the IDE (the interface), and you provide the Vault (the data).

This architecture isn't just a technical choice; it's a statement about privacy and ownership in the age of "Big Cloud."

Try the Architecture

You can test the Sovereign Vault yourself. Open the AccIQ demo, log a few transactions using the AI command bar, and hit the "Export Vault" button in the settings in the sovereign vault section. You'll get a clean JSON file of your data.

👉 Launch AccIQ (Guest Mode)
I’d love to hear from other devs: Are we moving toward a "Local-First" future, or is the convenience of the cloud too hard to give up?

I'm Chisom, founder of Auvira Systems. We build sovereign software for founders.

Building a "Privacy Shield" in React: How I obfuscated financial data for working in public

Umeh Chisom — Fri, 06 Mar 2026 03:31:23 +0000

As a solo founder building AccIQ (a local-first financial IDE), I spend a lot of time working in coffee shops and coworking spaces.

The problem? I’m often looking at my own cash flow, runway, and burn rate. Having those numbers visible on a 14-inch screen in a crowded cafe is... stressful.

I needed a way to "hide" the data instantly without breaking the UI or reloading the page. So, I built a global Privacy Shield.

Here is the simple React + Tailwind pattern I used to build it.

The Logic: Blur, Don't Hide

The most common way to hide data is to replace it with asterisks (****). But that breaks the visual rhythm of a dashboard. It makes it hard to see if a column is balanced or if a graph is trending correctly.

Instead, I chose to use CSS Filters. By applying a blur, you maintain the "shape" of the data (you can tell if it's a large number or a small one) without it being legible to someone sitting at the next table.

The Global State I used a simple React Context (or a global state hook) to manage the isPrivacyMode boolean.

const [isPrivacyMode, setIsPrivacyMode] = useState(false);

const togglePrivacy = () => 
setIsPrivacyMode(!isPrivacyMode);

The Tailwind Pattern The implementation is incredibly clean thanks to Tailwind's utility classes. I created a reusable PrivacyText component that wraps any sensitive integer.

interface PrivacyTextProps {
  value: string | number;
  className?: string;
}

const PrivacyText = ({ value, className = "" }: PrivacyTextProps) => {
  const { isPrivacyMode } = usePrivacy(); // Your global state hook

  return (
    <span 
      className={`
        transition-all duration-300 ease-in-out
        ${isPrivacyMode ? 'blur-md opacity-40 select-none pointer-events-none' : 'blur-0 opacity-100'}
        ${className}
      `}
    >
      {value}
    </span>
  );
};

Why this works:
blur-md: This is the sweet spot. It makes text completely unreadable but keeps the layout intact.

opacity-40: Adding a slight transparency makes the blurred text look "disabled," signaling to the user that the shield is active.

select-none: This prevents someone from accidentally (or intentionally) highlighting the text to reveal it.

transition-all: A smooth 300ms transition makes the toggle feel like a premium feature rather than a glitchy UI jump.

The Keyboard Shortcut

A privacy shield is useless if you have to hunt for a button while someone is walking behind you. I mapped it to a global keyboard listener (typically Cmd + Shift + P).

useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.metaKey && e.shiftKey && e.key === 'P') {
      togglePrivacy();
    }
  };
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

The Result

This small feature has become one of the most talked-about parts of AccIQ. It’s a "quality of life" detail that shows you actually understand your users' environment.

You can see the Privacy Shield in action (and toggle it yourself) in the Finance-OS demo here:

👉 Launch AccIQ (Guest Mode)

I'm curious—what other "public-friendly" UI features have you seen or built? Let me know in the comments!

Building a Local-First Financial IDE: How I forced Gemini AI to do strict Double-Entry Accounting

Umeh Chisom — Tue, 03 Mar 2026 19:51:58 +0000

I got tired of accounting software that feels like a slow, cloud-based spreadsheet from 2010.
As a developer, I spend my day in VS Code—it's fast, keyboard-driven, and local. I wanted my financial tools to feel the exact same way. So, I decided to build Finance-OS under my new studio, Auvira Systems.
My strict requirements were:
Zero Cloud Database: Financial data is sensitive. It should live in the browser, not on my servers.
Double-Entry Ledger: It had to be mathematically rigorous. No "editing" history, only reversals.
AI Command Bar: I wanted to type "Paid $50 for AWS hosting" and have the system automatically balance the books.
Here is how I architected it using React 19, Vite, and Gemini, and the massive technical hurdles I ran into along the way.

The Local-First Architecture The biggest paradigm shift was dropping Postgres/MongoDB. Instead, the entire application state—every transaction, account, and predictive forecast—lives in the user's browser using localStorage (and eventually IndexedDB for scale). The benefit? Zero latency. When you switch between the Chart of Accounts and the Forecasting Engine, it's instant. The challenge? Data portability. To solve this, I built a "Sovereign Vault" feature. Users can export their entire ledger as a single, encrypted JSON file and import it on another machine. You own your database.
Forcing an LLM to do strict accounting This was the hardest part. LLMs are notoriously bad at math and strict formatting. If the AI hallucinates a number, a double-entry ledger (where Assets = Liabilities + Equity) will break instantly. To fix this, I used Google Gemini as a stateless parser, not a database. When a user types a command, the app sends it to a stateless proxy. The prompt strictly enforces a JSON schema:

// The AI is only allowed to return this structure
interface AIResponse {
  debitAccount: string;
  creditAccount: string;
  amountInCents: number; // NEVER use floats for currency!
  description: string;
}

The Golden Rule: The AI does not touch the ledger. It only suggests the JSON payload. The local React application catches the JSON, verifies that the accounts exist, ensures the debits equal the credits, and then commits the transaction to the local state.
If the AI hallucinates, the local TypeScript logic rejects it.

The "Privacy Shield" (A fun UI detail) Because the app is local, I found myself using it in coffee shops. But having my runway and cash burn visible on my screen in public was stressful. I built a global "Privacy Shield" toggle. When activated, it applies a Tailwind blur-md and reduced opacity to all sensitive financial integers across the entire app.

// A simple but highly effective UI pattern
<p className={`text-2xl font-mono ${isPrivacyMode ? 'blur-md opacity-50' : ''}`}>
  {formatCurrency(totalCash)}
</p>

Try it out (No Sign-up Required)
Building complex, stateful applications entirely in the browser has been an incredible learning experience. We are just scratching the surface of what "Local-First" web apps can do.
Because there is no backend database, I built a frictionless Guest Mode. You can click the link below, jump straight into the IDE, and test the AI command bar yourself. Your data will stay on your machine.

👉 Try Finance-OS Live Here

I'd love to hear your thoughts on local-first architectures and if you've ever tried forcing an LLM to interact with strict mathematical systems!

I'm Chisom, founder of Auvira Systems. We build sovereign software for founders.