Offline Sync
Offline-first data sync architecture with IndexedDB (Dexie) for instant local writes, Prisma for server sync, conflict detection with version tracking, smart retry with exponential backoff, soft deletes, and PWA support. One command adds 12 files for a complete offline-first data layer.
What's Included
Installation
$ pnpm dlx shadcn@latest add https://offline-sync.desishub.com/r/offline-sync.jsonHow to Use
Install the component
Run the shadcn CLI to add offline-sync. This installs 12 files, 5 shadcn dependencies, and 4 npm packages.
pnpm dlx shadcn@latest add https://offline-sync.desishub.com/r/offline-sync.jsonSet up Prisma schema
Merge the installed prisma/schema.offline-sync.prisma into your schema.prisma. Every sync-enabled model needs id (UUID), version, isDeleted, updatedAt, and createdAt fields.
npx prisma db push
npx prisma generateWire up providers
Wrap your app with OnlineProvider and add PWARegister in your root layout.
import { OnlineProvider } from "@/components/online-provider"
import { PWARegister } from "@/components/pwa-register"
import { Toaster } from "@/components/ui/sonner"
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<PWARegister />
<OnlineProvider>{children}</OnlineProvider>
<Toaster />
</body>
</html>
)
}Use in your pages
Use useLiveQuery for reactive UI updates and the repository functions for CRUD operations.
import { useLiveQuery } from "dexie-react-hooks"
import { db } from "@/lib/offline-sync-db"
import * as repo from "@/lib/offline-sync-repository"
import { OnlineToggle } from "@/components/online-toggle"
export default function Home() {
const categories = useLiveQuery(
() => db.categories.filter((c) => !c.isDeleted).toArray(), []
)
return (
<main>
<OnlineToggle />
{categories?.map((cat) => (
<div key={cat.id}>{cat.name}</div>
))}
</main>
)
}Free to use · MIT License