React Flow Next JS app

This is a Next.js based project demonstrating the functionality of ReactFlow library.

Live demo

Installation

The project can be started using Dockerfile or NPM. All the code must be executed in the root folder.

Before starting, you need to clone this project.

git clone https://github.com/adidukik/drag-n-drop-reactflow

cd drag-n-drop-reactflow

Docker instructions:

Build the image file

docker build -t drag-n-drop-reactflow .

Start localhost

docker run -p 3000:3000 drag-n-drop-reactflow

Open http://localhost:3000 with your browser to see the result

NPM instructions:

Install required dependencies

npm i

Start localhost

npm run dev

Open http://localhost:3000 with your browser to see the result

About the project

I use modular approach. The app is based on three components:

• NodesLeftPanel
• Flow
• ButtonGroupRightPanel

To implement the styling on nodes, I use CustomNode component, which can be InputNode or OutputNode

Styling is done using the NextUI component library, and modified using Tailwind.

IDs are generated using randomUUI from crypto.