About

"DSC Force Graph" is a website that displays information as a graph with interconnected nodes. Each node in the graph represents a lesson or exercise and has a note attached to it to save additional information. The nodes are connected to each other to represent the relationships between the lessons or exercises. The tool uses a force-directed graph layout to arrange the nodes, making it visually appealing and easy to navigate.

Features

• A graphical representation of lessons or exercises and their relationships
• Attach notes to each node in the graph
• A force-directed graph layout that makes it visually appealing and easy to navigate
• Add, edit, and delete nodes and their associated notes
• The ability to zoom in and out and pan around the graph for better viewing.
• A search function to quickly find specific nodes in the graph (Upcoming)
• The ability to export and save the graph as an image or other file format (Upcoming)
• Responsive design for optimal viewing on different devices and screen sizes (Upcoming)

How to use

• Login with Google
• Create nodes: Start by adding nodes to the graph to represent lessons or exercises. Each node can be given a title and an optional note.
• Connect nodes: Connect nodes to represent the relationships between lessons or exercises. This can be done by drawing a line between two nodes.
• Add notes: Click on a node to add or edit its note. This note can include information such as descriptions, instructions, or additional resources.
• Navigate the graph: Use the left and right mouse to pan around the graph and zoom in and out for better viewing.
• Edit or delete nodes
• Save Graph

Demo

Collaboration

Prerequisites

To contribute, you need to have the following prerequisites installed:

• Node.js
• Yarn
• IDE of your choice

Starting the project

• git clone "this repo"
• yarn install (first time only)
• yarn start

Building the project

• yarn build

Bug report or Feature request

If you encounter a bug or have a feature request, send us an email, create an issue.

License

The MIT License.

Libraries Used

These open source libraries were used to create this project.

• NextJS
• [React-Force-Graph]
• [Firebase]
• [React-Firebase-Hooks]
• [ThreeJS]
• [Tailwind]
• [Ant Design]
• [Typescript]
• [TipTap 2.0]

⬆️ Back to top️