Building an Offline-First Desktop App

my-app/
├── apps/
│   ├── api/                           # Go API (Gin + GORM)
│   │   ├── internal/sync/             # Server-side sync handler
│   │   │   └── registry.go            # Reflective model registry
│   │   ├── internal/handlers/sync.go  # POST /api/sync/push + GET /api/sync/pull
│   │   └── internal/models/           # All models carry Version int
│   ├── web/                           # Online-only marketing
│   ├── admin/                         # Online admin panel
│   └── desktop/                       # Wails desktop client
│       ├── sync/                      # Local sync engine
│       │   ├── engine.go              # Sync orchestrator
│       │   ├── outbox.go              # Outbox table with squash
│       │   └── local.go               # LocalCreate/Update/Delete/Get/List
│       ├── app.go                     # Wails-bound methods
│       └── frontend/
│           └── src/
│               ├── lib/sync-client.ts # TS bindings to Wails
│               ├── hooks/use-sync.ts  # React hooks
│               └── components/
│                   ├── sync-button.tsx
│                   ├── pending-changes.tsx
│                   └── conflict-dialog.tsx

import {
  localCreate, localUpdate, localDelete, localList,
} from "@/lib/sync-client";

// Create — writes to local SQLite + queues an outbox entry.
// id can be empty; the engine generates a UUID.
await localCreate("buildings", "", {
  name: "The Hub",
  description: "Co-working space",
});

// Update — merges into the cached row + queues an outbox entry.
// Multiple updates to the same row collapse to one outbox entry.
await localUpdate("buildings", id, { description: "Updated copy" });

// Delete — removes from local mirror + queues a delete entry.
// If the row was a pending create, both cancel without ever
// hitting the network.
await localDelete("buildings", id);

// Read — comes from the local cache, kept fresh by Sync's pull phase.
const buildings = await localList("buildings");

// frontend/src/components/layout/title-bar.tsx
const SYNC_TABLES: string[] = [
  "buildings",
  "tenants",
  "leases",
  "payments",
];

// Pass it down to the SyncButton:
<SyncButton tables={SYNC_TABLES} />

Resolve conflict: update buildings
The server has a newer version (v7) than what you edited locally.
Pick which side wins for each field.

Field           Local              Server (v7)
─────────────────────────────────────────────────
name            ☑ The Hub          ☐ The Hub Co
description     ☑ Co-working...    ☐ Co-working space (downtown)
phone           ─ unchanged ─      ─ unchanged ─

                              [ Cancel ] [ Apply merge ]

// internal/routes/routes.go (auto-managed)
syncRegistry := sync.NewRegistry()
syncRegistry.Register("users", &models.User{})
syncRegistry.Register("uploads", &models.Upload{})
syncRegistry.Register("buildings", &models.Building{}) // injected by generator
syncRegistry.Register("tenants", &models.Tenant{})     // injected by generator
// grit:sync — new resources land here automatically
syncHandler := handlers.NewSyncHandler(db, syncRegistry)

import { useEffect, useState } from "react";
import { localList, localCreate } from "@/lib/sync-client";
import { TwoPane, ListPane, ListRow, DetailPane } from "@/components/two-pane";
import { TextField, FormGrid, FormActions } from "@/components/form";
import { Drawer } from "@/components/drawer";

export default function BuildingsPage() {
  const [items, setItems] = useState<any[]>([]);
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState<any>(null);
  const [drawerOpen, setDrawerOpen] = useState(false);

  // Load from local cache. The Sync button refreshes this implicitly
  // when the user pulls.
  useEffect(() => {
    localList("buildings").then(setItems);
  }, []);

  const filtered = items.filter((b) =>
    b.name.toLowerCase().includes(search.toLowerCase())
  );

  const handleCreate = async (data: any) => {
    await localCreate("buildings", "", data);
    setItems(await localList("buildings"));
    setDrawerOpen(false);
  };

  return (
    <TwoPane>
      <ListPane
        title="Buildings"
        count={filtered.length}
        search={search}
        onSearch={setSearch}
        onNew={() => setDrawerOpen(true)}
      >
        {filtered.map((b) => (
          <ListRow
            key={b.id}
            title={b.name}
            subtitle={b.description}
            selected={selected?.id === b.id}
            onClick={() => setSelected(b)}
          />
        ))}
      </ListPane>

      <DetailPane empty={!selected}>
        {selected && <BuildingDetail building={selected} />}
      </DetailPane>

      <Drawer open={drawerOpen} onOpenChange={setDrawerOpen} title="New building">
        <CreateForm onSubmit={handleCreate} onCancel={() => setDrawerOpen(false)} />
      </Drawer>
    </TwoPane>
  );
}