XCM Visualizer

⚠️ Deprecated & archived

This repository is deprecated and archived. It is no longer maintained by ParaSpell and is kept solely for personal reference / own use.

• If you'd like to keep using or developing this project, feel free to fork it.

What is this?

App	Description
visualizer-be	NestJS + GraphQL + WebSocket backend that collects and serves XCM message/channel data (PostgreSQL via Prisma)
visualizer-fe	React + Vite frontend rendering the data as an interactive 3D globe (three.js / react-three-fiber)

Prerequisites

• Node.js ^24
• pnpm (this repo pins pnpm@11.18.0 via packageManager in package.json — run corepack enable to pick it up automatically)
• PostgreSQL database
• Python 3.10+ (optional — only needed for the data collection scripts in apps/visualizer-be/scripts)

Developer guide

1. Install dependencies from the monorepository root:

   pnpm install

2. Configure environment variables:

   • Backend — in apps/visualizer-be, create a .env file based on .env.example and fill in your local PostgreSQL connection string and Subscan API key:

     cp apps/visualizer-be/.env.example apps/visualizer-be/.env

   • Frontend — in apps/visualizer-fe, create a .env file based on .env.example (defaults already point at the local backend on port 4201):

     cp apps/visualizer-fe/.env.example apps/visualizer-fe/.env

3. Initialize the database:

   • Import the xcm_database_dump_2023_2024 file into your PostgreSQL database to load example data for the XCM Visualizer.

4. Build the workspace packages from the monorepository root:

   pnpm --filter visualizer-be... --filter visualizer-fe... build

5. Run the backend (GraphQL API + WebSocket gateway on http://localhost:4201), from backend folder:

   cd ./apps/visualizer-be
   pnpm start

   Or, from the monorepository root, in watch mode:

   pnpm dev:be

6. Run the frontend (Vite dev server on http://localhost:5173), from frontend folder:

   cd ./apps/visualizer-fe
   pnpm dev

   Or, from the monorepository root:

   pnpm dev:fe

Root-level scripts

These convenience scripts (from the root package.json) fan out to every app in the workspace:

Script	Description
pnpm dev:be	Start the backend in watch mode
pnpm dev:fe	Start the frontend dev server
pnpm build	Build all apps
pnpm compile	Type-check all apps
pnpm lint / pnpm lint:check	Fix / check linting for all apps
pnpm format:write / pnpm format:check	Format / check formatting for all apps
pnpm test	Run unit tests for all apps
pnpm test:cov	Run unit tests with coverage
pnpm test:e2e	Run end-to-end tests

Data collection scripts

The backend also ships standalone Python scripts that sync XCM message and HRMP channel data from Subscan into PostgreSQL (intended to run once per day, e.g. via cron). See apps/visualizer-be/scripts/README.md for setup and usage.

License

Made with 💛 by ParaSpell✨

Published under the MIT License — see visualizer-fe/LICENSE and visualizer-be/LICENSE.