Metaviz - a visual project collaboration workspace

Metaviz is a visual tool designed to streamline team collaboration on projects, enabling efficient management of information, processes, and resources within an organization.
This tool visually represents information and incorporates effective mechanisms to handle data overload.

I have been developing them for some time and use them for everyday work on various projects. So far I had a Django/Python based web2 backend now I wanted to create and present a web3 version in an IC canister. Still single-user for now. Here is its test version:

*** NOTE: This is an early testing stage, the canister will be cleaned after some time ***

Why backend on IC?

  • I am convinced that in 5-10 years web2 will be old school, just like the pink websites from the 90ā€™s with green fonts and animated gifs.
  • maintenance-free scaling
  • maintenance-free security
  • login without browser plugin
  • I have plans to go deeper into the IC ecosystem and community and develop the tool in this direction

This is still a very early stage of the tool, there are 5 simple objects available publicly, with which there is not much that can be done yet - I have over 50 objects that I am still working on.

Social links:
Twitter: x.com
Discord: Metaviz

I based the application on Juno, the source code (if anyone wants to put it in their canister):

7 Likes

Of course, Iā€™m biased towards Juno, which is obviously an awesome choice (:wink:), but I have to say Iā€™m impressed by the editor youā€™ve built. Itā€™s rare to come across a WYSIWYG project where the developers write the frontend without relying on a myriad of dependencies. Congratulations on all the hard work; it works like a charm! :+1:

4 Likes

Thank you :slight_smile:
There is still a lot of work to do, many years of improvements waiting for me.
Juno is very out-of-the box solution, allows to launch a project very quickly without going deep into blockchain architecture.

5 Likes

Playing around with it a little! Itā€™s looking really clean so far!

Iā€™d like to request you start thinking about keyboard controls and accessibility while youā€™re still in the early stages here. Itā€™ll only get more challenging as the project advances, but itā€™s important not only for making the project available to more people, but having a coherent screenreader experience and keyboard controls will have benefits to power users and other benefits for structuring and exporting information from the boards down the road

3 Likes

Thank you.
I agree - keyboard is very important. I plan to enable 100% keyboard operation at some point.
At this moment there is one poweruser shortcut actually - holding CMD/CTRL while moving node: duplicates it with connection, which enables make a tree very quickly.

2 Likes

Following the guidelines required by the grant, I created full information about the project:

Project highlights

Metaviz is a visual tool intended to support work on projects. It allows you to create diagrams as well as store multimedia and manage files efficiently.
The primary target users are professionals and teams involved in project management, design, engineering, and other fields that require visual planning and documentation.

Web3 advantages

From the creatorsā€™ side we have a huge number of advantages:

  • scalability for free
  • security for free
  • very precise representation of real costs, practically per byte, each instruction

How is it built

On the frontend side I used browser-based JavaScript/HTML/CSS. I used most of my open-source libraries, which I have been developing for some time. I care about the simplicity of the structure of the entire system. When creating applications, I tend to avoid complex systems with hundreds of dependencies.

Metaviz can run even without a backend from a single html file uploaded to the browser: [GitHub - dariuszdawidowski/metaviz-webapp: Diagramming application for web browser.]

This is the main frontend repo: [GitHub - dariuszdawidowski/metaviz-webapp: Diagramming application for web browser.]

And several side libraries also written by me together with other developers:
[https://github.com/dariuszdawidowski/total-diagram]
[GitHub - dariuszdawidowski/total-popup: JavaScript popup library.]
[GitHub - dariuszdawidowski/total-pro-menu: JavaScript/ES8 menu library.]
[GitHub - dariuszdawidowski/total-text: Text editor library for JavaScript/ES8 + HTML5.]

For the backend, I use the Juno library running on NodeJS/JavaScript.
[https://juno.build/]

Internet Computer superpowers

  1. There is actually no other real web3 option in the crypto world. There is no chance that an ordinary smart contract would support such a backend.

  2. Thanks to Internet Identity and NFID people do not have to install wallett in the form of browser plug-in. This is quite a normal thing in the crypto world, but most regular users outside the crypto have never installed wallets and donā€™t understand what is it. Internet Identity is more like the ā€œLogin with Googleā€ they have encountered already.

  3. Speaking of the community - we have greater involvement of users and support of the Dfinity foundation, Polish ICP HUB and Juno developer.

Go-To-Market strategy

First of all, it always has to be just a tool that people want and need, and then we can implement marketing strategies. We still have a long way to goā€¦ it is an experimental tool and it develops with us - we use it for everyday applications and trying to solve everyday problems with it.

We hope to attract ICP users by developing the tool also in the field of canister management and the creation of no-code smart contracts.

Monetization

Project is both open source and for profit. We are guided by the WordPress strategy, which has created an open and popular open source platform, while also providing commercial hosting and support services.

Solutions such as SNS/DAO/token would be possible, we are considering it, but at the moment we are really focusing on the development of the tool itself.

Status of the project

I have been programming the system myself for a couple of years, sometimes with ad hoc help from a friend or freelancer. At this point, Iā€™m assembling a team beyond programming for marketing, sales and other boring things.

And as you can see, Iā€™m just about to finish a 3-month Dfinity grant that involved writing backend for the web3 blockchain.

Resources

IC web app [https://ic.metaviz.net/]
Website [https://www.metaviz.net/]
Twitter [x.com]
Discord [Metaviz]
Metaviz IC Juno source code [GitHub - dariuszdawidowski/metaviz-server-juno: Metaviz backend for Internet Computer blockchain using Juno framework.]

Future Plans

We have big plans for Metaviz and ICP for many years to come. At this point, there is not even 1% of the planned total. Experience has taught me to do more than to say it will be done, so I invite you to follow our activities on social media.

3 Likes

Hello,
I just finished my second grant. Iā€™m doing some final touches and testing.
The second grant was to add real-time team collaboration.
All the points from the above post are the same, there are just a few new things:

Summary of work

I rewrote the entire backend on Motoko. I preferred JavaScript, firstly I know it better and secondly I wanted to keep the whole company focused on one language. But after many attempts I decided that I need a more native solution for such a large project. What is now is a small fraction of the whole plan and I probably wonā€™t go further without a web2+web3 hybrid. This has already happened actually, because there is Gateway for WebSockets. In the next version I will probably also use Linux + dfx to implement full management of the canister infrastructure.

How is it built

On the frontend side almost didnā€™t change, I overloaded a couple classes and methods, but luckily I started doing it in such a modular way that any changes are now very simple.

Here is Vanilla JavaScript frontend: [GitHub - dariuszdawidowski/metaviz-webapp: Diagramming application for web browser.]

For the backend there is new repo: https://github.com/dariuszdawidowski/metaviz-server-motoko

Iā€™m using mo:map/Map for a stable database and pretty simple code.
Also because IC doesnā€™t support WebSockets, (which makes a sense actually, I donā€™t need chain consensus on that) - there is NodeJS web gateway which works on web2, like Linux+Apache for example. Data are broadcasted among groups and dumped time to time into canister.

Users management

What I learned while working in companies - a seemingly simple thing like user accounts can be a nightmare. Based on IC mechanisms I did something completely new. It seems to me much better than normal management - but time will tell, often people do not like to use methods they are not used to. But the web3 breaks with many old habits.

To make someone an admin - you have to make them a controller of the canister on which you installed Metaviz from dfx. Maybe Iā€™ll create another mechanism someday (graphical UI), but at this stage it seems ok to me.

The admin creates a user who has a unique ID in the system. Then creates a 24-hour unique link to bind his/her Internet Identity to this user, from that moment he becomes that user. This solves the eternal problem of passwords in companies, and itā€™s not associated with any email.
User can be rebound to a new Internet Identity which solves the eternal problem of a user having a named account in a company and having problems with it after being fired.

Future Plans

I mentioned management of the canister infrastructure. I really like the idea of ā€‹ā€‹managing my entire canisters infrastructure on one large spatial board, adding something, removing, observing connections, loads, etc. I havenā€™t decided yet if this will be the next step, but it would be useful for my daily work as well, so itā€™s high.

Video

YouTube