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 others, are persisted and synced to other devices. All data is encrypted.

You can find the example app in separate repositories for Svelte, Vue, or React and with the RDF (graph) ORM in the docs.

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

In Chrome, there are new restrictions for a public website including an iframe to localhost. And that's what we do here in third party mode, when you are developing your app with vite on localhost. The first time you will load the page, a popup will appear, asking you: "nextgraph.eu wants to Look for and connect to any device on your local network". You should click on "Allow". If you get a gray screen, click on the recycle icon that is on the right side of the blue thin banner. Then you should be all good. If not, you have to go to chrome://flags/#local-network-access-check and select Disabled. This dev env issue has no impact on your production app deployed on your own domain, specially if you host your app with TLS.

• 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.
• You can open the app in a second tab to see how the data is propagated.

---

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)

---

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.