Question

Building an Interactive Knowledge Graph with React: The MyZubster MONERO Implementation

We recently added an interactive Knowledge Graph to MyZubster, starting with the MONERO / ART-001 knowledge node.

The objective was straightforward: move beyond isolated documentation pages and create a navigable network connecting articles, concepts, sources, and related topics.

You can explore the first node here:

https://myzubster-knowledge.vercel.app/conoscenze?domain=MONERO&id=ART-001

The problem

Traditional documentation usually follows a hierarchical structure:

Category
└── Article
    └── Content

This works for reading individual pages, but it does not clearly reveal how knowledge is connected.

An article about Monero may be related to:

• privacy;
• open-source development;
• transaction mechanisms;
• official documentation;
• other MyZubster articles.

We wanted the interface to expose these relationships directly.

The resulting model looks more like this:

ART-001
├── related → ART-002
├── related → ART-003
├── source → monero-docs
├── concept → Privacy
└── concept → Open Source

Stable knowledge URLs

Each article is identified by two parameters:

domain + id

For example:

domain = MONERO
id = ART-001

The public URL becomes:

/conoscenze?domain=MONERO&id=ART-001

This approach gives every knowledge node a stable and shareable address.

The same frontend can later support additional domains:

MONERO / ART-001
KEFIR / ART-001
PERMACULTURE / ART-001
SOUND-SYSTEM / ART-001
CYBERSECURITY / ART-001

The user interface does not need a separate implementation for every domain.

Current knowledge nodes

The initial MONERO graph includes three articles:

ART-001 — Introduction to Monero

https://myzubster-knowledge.vercel.app/conoscenze?domain=MONERO&id=ART-001

This is the root node. It connects the introductory article to its sources, concepts, and related articles.

ART-002 — Privacy in Monero

https://myzubster-knowledge.vercel.app/conoscenze?domain=MONERO&id=ART-002

This node introduces the privacy-related branch of the graph.

ART-003 — Monero Transactions

https://myzubster-knowledge.vercel.app/conoscenze?domain=MONERO&id=ART-003

This node provides the initial connection to transaction-related knowledge.

The React implementation

MyZubster currently uses React 18 with Create React App.

The Knowledge Graph feature introduced:

frontend/src/data/knowledge.js
frontend/src/pages/KnowledgeGraphPage.js
frontend/src/pages/KnowledgeGraphPage.css

The main application route was also updated in:

frontend/src/App.js

Both of these paths open the graph:

/conoscenze
/knowledge

The data model

The current implementation stores structured knowledge records in the frontend.

A simplified article looks like this:

'MONERO:ART-001': {
  id: 'ART-001',
  domain: 'MONERO',
  title: 'Introduction to Monero',
  summary: 'Fundamental concepts of Monero, privacy, and connected documentation.',

  tags: [
    'monero',
    'privacy',
    'open-source'
  ],

  relations: [
    {
      id: 'ART-002',
      label: 'Privacy'
    },
    {
      id: 'ART-003',
      label: 'Transactions'
    }
  ],

  sources: [
    {
      id: 'SRC-001',
      title: 'monero-docs',
      url: 'https://www.getmonero.org/resources/user-guides/'
    }
  ],

  concepts: [
    {
      id: 'CON-PRIVACY',
      title: 'Privacy'
    },
    {
      id: 'CON-OSS',
      title: 'Open Source'
    }
  ]
}

The lookup key combines the domain and article ID:

const article = knowledgeArticles[`${domain}:${id}`];

This avoids collisions between articles belonging to different domains.

Reading the URL

The page reads the selected article from the query string:

const params = new URLSearchParams(window.location.search);

const domain = (
  params.get('domain') || 'MONERO'
).toUpperCase();

const id = (
  params.get('id') || 'ART-001'
).toUpperCase();

If no parameters are supplied, the interface opens MONERO / ART-001.

If the requested record does not exist, the page returns a clear article-not-found state.

Generating graph nodes

The page converts the selected knowledge record into visual nodes.

The root article becomes the central node:

{
  key: `a:${article.id}`,
  id: article.id,
  type: 'article',
  title: article.title,
  description: article.summary
}

Related articles, sources, and concepts are then added around it.

Different prefixes prevent identifier collisions:

a:ART-001
s:SRC-001
c:CON-PRIVACY

This is important because an article, source, and concept could theoretically use similar identifiers.

Graph interaction

Users can:

• select a node;
• inspect its title, type, identifier, and description;
• filter nodes by type;
• open related articles;
• open external sources;
• share the current article URL.

The available filters are:

All
Articles
Sources
Concepts

A related article is opened by updating the URL:

window.location.assign(
  `/conoscenze?domain=${domain}&id=${node.id}`
);

This reloads the same React page with another knowledge record.

How to explore the graph

1. Open the root node:

   https://myzubster-knowledge.vercel.app/conoscenze?domain=MONERO&id=ART-001

2. Select one of the surrounding nodes.

3. Read its metadata in the information panel.

4. Use the filters to isolate articles, sources, or concepts.

5. Select a related article and choose “Open article.”

6. Copy the browser URL to share that exact knowledge node.

How developers can add an article

Open:

frontend/src/data/knowledge.js

Add a new record:

'MONERO:ART-004': {
  id: 'ART-004',
  domain: 'MONERO',
  title: 'New Monero Article',
  summary: 'A concise explanation of the subject.',

  tags: [
    'monero',
    'documentation'
  ],

  relations: [
    {
      id: 'ART-001',
      label: 'Introduction'
    }
  ],

  sources: [
    {
      id: 'SRC-002',
      title: 'Source title',
      url: 'https://example.org/source'
    }
  ],

  concepts: [
    {
      id: 'CON-EXAMPLE',
      title: 'Example concept'
    }
  ]
}

The article will then be available at:

/conoscenze?domain=MONERO&id=ART-004

To make it discoverable from another node, add a reciprocal or relevant relationship to an existing article.

Build and verification

After modifying the knowledge data, run:

cd frontend
npm run build

The production build should complete without compilation errors.

Then test the new route:

/conoscenze?domain=MONERO&id=ART-004

Before submitting the change, verify that:

• the article ID is unique within its domain;
• every related article exists;
• source URLs are correct;
• titles and summaries are clear;
• the mobile layout remains usable;
• unsupported claims are not presented as verified facts.

Contribution guidelines

A useful knowledge contribution should include:

• a stable article ID;
• the correct domain;
• a descriptive title;
• a concise summary;
• relevant tags;
• relationships with existing nodes;
• reliable sources;
• clearly named concepts;
• limitations or uncertainty where appropriate.

A graph relationship indicates that two subjects are connected. It does not automatically prove a claim or imply scientific validation, partnership, or endorsement.

Source provenance and review status remain essential.

Deployment workflow

The feature was developed on a dedicated Git branch:

feature/knowledge-graph-monero

The frontend production build was verified before the branch was rebased onto the latest main.

The final implementation was merged into main and pushed to the public repository.

Source repository:

https://github.com/MyZubster-Ecosystem/myzubster

Implementation commit:

https://github.com/MyZubster-Ecosystem/myzubster/commit/43c7d966

Next steps

The current version uses frontend data to establish the interaction model.

A future version can move the knowledge records into a dedicated API or versioned content repository.

Potential improvements include:

• server-side schema validation;
• automatic backlinks;
• multi-level graph expansion;
• full-text search;
• contributor attribution;
• review and publication states;
• source provenance;
• revision history;
• API-driven graph generation;
• integration with Zorgax;
• support for additional knowledge domains.

The long-term objective is not simply to collect articles. It is to create a community knowledge network where people can explore how information, evidence, concepts, and practical experience relate to one another.

Try the first node:

https://myzubster-knowledge.vercel.app/conoscenze?domain=MONERO&id=ART-001

Repository:

https://github.com/MyZubster-Ecosystem/myzubster

React #JavaScript #KnowledgeGraph #OpenSource #WebDevelopment #Monero #KnowledgeManagement #MyZubster