This project is a web application based on react flow (A highly customizable React component for building node-based editors and interactive diagrams).
This project is using Next.js, React.js, Typescript, Tremor and Tailwind.
Despite it is not recommended for clean code, I added few comments in the code to improve the comprenhension for beginners.
First, install the dependencies with
npm install
# or
yarn install
# or
pnpm installnpm run dev
# or
yarn dev
# or
pnpm run devOpen http://localhost:3000 with your browser to see the result.
In the home page, you can add your own JSON file or start with an exemple and modify it after. (Excel isn't available for the moment). You can also download the file in two formats : JSON or Excel (xlsx). You can see at top right a boutton to see all keyboard shortcuts.
You can add different types of nodes by clicking on "add node". If you click on the black circle on each group/node bottom you can create edges between them.
An example about how works the modal.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
If you're interested in learning more about React Flow, here are some resources to get you started:
- React Flow Documentation - the official documentation for React Flow.
- React Flow Tutorial - a tutorial on building a node-based editor with React Flow.
- React Flow Examples - a collection of examples demonstrating different use cases for React Flow.
- React Flow Playground - an interactive playground where you can experiment with React Flow.
- React Flow GitHub Repository - the GitHub repository for React Flow, where you can find the source code and contribute to the project.