BruceWangyq / CyberGraph

CyberGraph is a demo for CyberConnect. It's a tutorial for beginners' integration with CyberConnect SDK and Indexer.


Geek Repo:Geek Repo

Github PK Tool:Github PK Tool



Live Site

About this project

CyberGraph is a 3D-graph based, user based social connection explorer. It has some cool features like 3d node graph, dynamic loading bar, immersive user experience, cyber mode(10-hops friendship network display) and focus mode(aggregated connection display).

This project is inspired from Gitcoin Scheduling Point Virtual Hackathon contest submissions which is making a social explorer with cyberconnect on Web3.

Technologies We Used

About Gitcoin Hackathon

CyberGraph is still well under improvement with many features in the pipeline. This is a perfect scenario for the whole community to join us and BUIDL together. Please see more information on Gitcoin Grants Round 13 Hackathon CyberConnect Task 1

We invite the community to experiment with it and add innovative features or make constructive product suggestions. A few examples that sprung to our mind: adding node visual effects to make it easier to read user info; differentiating connection & nodes visually, maybe on the basis of connection types, connection quantity, etc, and in terms of color, brightness, distance, etc; enabling continuous exploration where users can track their path of connections; adding subgroups; enabling exploring the connections between two queried nodes; optimizing graph filtering and visualization so to balance between UX and informative efficiency.


  • POAP Fetching & NFT Fetching
  • Following & Follower List Display
  • Innovative Features & Product Suggestions (Like adding node visual effects features to make it easier to read user information)

Welcome to discuss and learn in our discord Hackathon channel and make your submission. CyberConnect team welcomes anyone who wants to join Web3 world and is happy to transfer development knowledge.

Run the App

Set the following variables in .env

Then run:

yarn install

yarn run dev

Open the browser, open Localhost and you will see the UI of the project.


CyberGraph is an open-source, community-driven project, with co-authors and contributors from CyberConnect dev team and community.

Lists are in no particular order. All co-authors & contributors work together and share the credits.


Co-Authors Description
WildSaoFeng: Initiated the project, set up tech framework, worked on MetaVerse building, the 3d-model generation, graph building, connection data fetching & processing, dynamic loading bar, two-mode proposer and implementer
Bruce: Created page layout and UI components like User Panel, Navbar, Search Bar, Wallet Connect Button. Data fetching through different components. Researched and set up the 3d-Graph library.
Hanyang: A talent and pushy UI designer and PM, who designed the product and insisted on using 3D display, so we can have this current version of product
Jiayi: Fix issues and give detailed and patient instructions to other co-authors


Contributors Description
HappySean: Providing frontend tech support
SUV: Providing frontend tech support
Yaoxuan: Providing frontend tech support
Gio: Providing frontend tech support
Wilson: Providing guide & product feedback
Ryan: Providing guide & product feedback
SpadeQueen7: Providing guide & product feedback
Zhimao: Providing guide & product feedback
Yilan: Providing professional proofreading help
Wenyi: Providing professional proofreading help
Peiwen: Providing indexer tech support
CC_Fruit: Providing indexer tech support
All CyberConnect Teams & Community: providing all kinds of supports

Participants from Gitcoin SPVH hackathon and other contributors please contact to append to the list. We are looking forward to more people's participation!

Follow Us


CyberGraph is a demo for CyberConnect. It's a tutorial for beginners' integration with CyberConnect SDK and Indexer.


Language:TypeScript 90.0%Language:CSS 9.1%Language:JavaScript 0.6%Language:Shell 0.3%