NextGraph Expense Tracker Example with Discrete JSON Documents

A complete example app demonstrating the NextGraph Yjs/Automerge ORM SDK with React, Vue, and Svelte frontends running side-by-side. Changes made in one framework instantly sync to the other. All data is encrypted.

This README walks you through all the features of the SDK and how to build your own NextGraph-powered application.

---

Table of Contents

• NextGraph Expense Tracker Example with Discrete JSON Documents
  • Table of Contents
  • Quick Start
  • Project Structure
  • Building Your Own App
    • Step 1: Dependencies
    • Step 2: Initialization
  • Frontend Framework-Specific Notes
    • React
    • Vue
    • Svelte
  • About NextGraph
  • License

---

Quick Start

Create a wallet at https://nextgraph.eu and log in once with your password.

Clone this repo:

# Clone the repository
git clone https://git.nextgraph.org/NextGraph/expense-tracker-discrete.git
cd expense-tracker-discrete

# Install dependencies
pnpm install

# Run the development server:
# If you want to use a YJS CRDT:
pnpm dev-yjs
# or if you want to use an Automerge CRDT:
pnpm dev-automerge

Open the URL displayed in the console. You'll be redirected to NextGraph to authenticate with your wallet, then your app loads inside NextGraph's secure iframe.

---

Project Structure

src/
├── frontends/
│   ├── react/                 # React components
│   ├── vue/                   # Vue components
│   └── svelte/                # Svelte components
│
├── utils/                     # Useful for your own applications utils, too!
│   ├── loadStore.ts           # Creates or loads the CRDT document
│   └── ngSession.ts           # NextGraph session initialization
└── app-wrapper/               # Astro app shell (hosts all frameworks)

---

Building Your Own App

If you want to create your own app, you can walk through the following steps.

Step 1: Dependencies

Install the required NextGraph packages:

pnpm add @ng-org/web@latest @ng-org/orm@latest @ng-org/alien-deepsignals@latest

Package	Purpose
@ng-org/web	Core NextGraph SDK for web applications
@ng-org/orm	Core ORM utilities
@ng-org/orm/react	react framework-specific hooks
@ng-org/orm/vue	vue framework-specific hooks
@ng-org/orm/svelte	svelte framework-specific hooks
@ng-org/alien-deepsignals	Deep reactivity primitives

You probably won't need to load 3 different frontend frameworks (React, Vue, Svelte) nor Astro in your app. Just choose one of those framework.

Step 2: Initialization

Your app runs inside a NextGraph-controlled iframe. To make things easier for you, we created a utility file that handles this, see src/utils/ngSession.ts.

The file exports an init() function. Call this as early as possible.

After initialization, a document needs subscribed to (and possibly created). You can see how this is done in [src/utils/loadStore.ts](src/utils/loadStore.ts).\ In loadStore.ts, you can see that to find the documentId, a SPARQL graph query is made. To every document, you can attach RDF data. We leverage that here by attaching an application-specific quad (e.g. did🆖z:ExpenseTrackerDiscreteApp-Automerge`) to find the document again.

Frontend Framework-Specific Notes

React

For an example, see `src/frontends/react/Expenses.tsx

Note:

• Changes to expense.title automatically re-render the component, no setState()
  • Changes of nested objects cause a rerender in child components too, since the nested JS objects in the hierarchy are "replaced", meaning that an equality check (==) returns false.
• If the subscription isn't established yet, data will be undefined.

Vue

For an example, see `src/frontends/vue/Expenses.vue

Note:

• If you are passing the reactive data objects to child components, you must wrap the props with useDeepSignal:

Svelte

For an example, see `src/frontends/svelte/Expenses.svelte

Note:

• Access the reactive store with $expenses
• For now we only support Svelte 3/4 syntax. We will upgrade to Svelte 5 / Runes soon.

---

About NextGraph

NextGraph brings about the convergence of P2P and Semantic Web technologies, towards a decentralized, secure and privacy-preserving cloud, based on CRDTs.

This open source ecosystem provides solutions for end-users (a platform) and software developers (a framework), wishing to use or create decentralized apps featuring: live collaboration on rich-text documents, peer to peer communication with end-to-end encryption, offline-first, local-first, portable and interoperable data, total ownership of data and software, security and privacy.

Centered on repositories containing semantic data (RDF), rich text, and structured data formats like JSON, synced between peers belonging to permissioned groups of users, it offers strong eventual consistency, thanks to the use of CRDTs. Documents can be linked together, signed, shared securely, queried using the SPARQL language and organized into sites and containers.

More info: https://nextgraph.org

License

Licensed under either of

• Apache License, Version 2.0 (LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0)
• MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT) at your option.

SPDX-License-Identifier: Apache-2.0 OR MIT

---

NextGraph received funding through the NGI Assure Fund and the NGI Zero Commons Fund, both funds established by NLnet Foundation with financial support from the European Commission's Next Generation Internet programme, under the aegis of DG Communications Networks, Content and Technology under grant agreements No 957073 and No 101092990, respectively.