GraphVis
CyberGraph is a demo for CyberConnect. It's a tutorial for beginners' integration with CyberConnect SDK and Indexer.
Install / Use
/learn @cyberconnecthq/GraphVisREADME
CyberGraph
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.
<br>Technologies We Used
Next.js<br>TypeScript<br>MUI library<br>Cyber Connect<br>Apollo Client<br>3D Force-Directed Graph
Run the App
Set the following variables in .env
NEXT_PUBLIC_ALCHEMY_ID =Alchemy NFT API
Then run:
yarn install
yarn run dev
Open the browser, open Localhost and you will see the UI of the project.
<!-- ## ✨Contribution 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** | Co-Authors | Description | | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | <a href="https://github.com/WildSaoFeng"><img width="120" src="https://avatars.githubusercontent.com/u/24604477?s=96&v=4" ></a> | 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 | | <a href="https://github.com/BruceWangyq"><img width="120" src="https://avatars.githubusercontent.com/u/88688323?v=4" ></a> | 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. | | <a href="https://www.behance.net/wanghanyang"><img width="120" src="https://i.ibb.co/HxmvMJc/newUI.jpg"></a> | 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 | | <a href="https://github.com/jiayi1992"><img width="120" src="https://avatars.githubusercontent.com/u/17503721?v=4"></a> | Jiayi: Fix issues and give detailed and patient instructions to other co-authors | **Contributors** | Contributors | Description | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | <a href="https://github.com/sThReal"><img width="80" src="https://avatars.githubusercontent.com/u/7857661?v=4"></a> | HappySean: Providing frontend tech support | | <a href="https://github.com/akasuv"><img width="80" src="https://avatars.githubusercontent.com/u/30253166?v=4"></a> | SUV: Providing frontend tech support | | <a href="https://github.com/Neo697"><img width="80" src="https://avatars.githubusercontent.com/u/57715245?v=4"></a> | Yaoxuan: Providing frontend tech support | | <a href="https://github.com/gio-XD"><img width="80" src="https://avatars.githubusercontent.com/u/31834881?v=4"></a> | Gio: Providing frontend tech support | | <img width="80" src="https://media-exp1.licdn.com/dms/image/C4D0BAQGXpWlyiCcCnA/company-logo_100_100/0/1637107512709?e=1654732800&v=beta&t=zuQHFq3S_WXDLPxzfggzracq95E9caueEyOjnuuNDCM"> | Wilson: Providing guide & product feedback | | <a href="https://github.com/ryanli-me"><img width="80" src="https://avatars.githubusercontent.com/u/5056640?v=4"></a> | Ryan: Providing guide & product feedback | | <a href="https://github.com/spadequeen7"><img width="80" src="https://avatars.githubusercontent.com/u/6890089?v=4"></a> | SpadeQueen7: Providing guide & product feedback | | <a href="https://github.com/ZhimaoL"><img width="80" src="https://avatars.githubusercontent.com/u/21219146?v=4"></a> | Zhimao: Providing guide & product feedback | | <a href="https://github.com/yilan-huang"><img width="80" src="https://avatars.githubusercontent.com/u/96097790?v=4"></a> | Yilan: Providing professional proofreading help | | <a href="https://www.linkedin.com/in/wzhu81"><img width="80" src="https://i.ibb.co/R9jqbzb/2022-03-11-09-28-07.jpg"> </a> | Wenyi: Providing professional proofreading help | | <a href="https://github.com/HaoPeiwen"><img width="80" height="80" src="https://avatars.githubusercontent.com/u/44077572?v=4"></a> | Peiwen: Providing indexer tech support | | <a href="https://github.com/cc-fruit"><img width="80" src="https://avatars.githubusercontent.com/u/89375075?v=4"></a> | CC_Fruit: Providing indexer tech support | | <a href="https://github.com/cyberconnecthq"><img width="80" src="https://avatars.githubusercontent.com/u/81209593?s=200&v=4"></a> | All CyberConnect Teams & Community: providing all kinds of supports | -->