Frontend | Task

Stack that should be used in prioritet (highest first):

• React-flow (Mainly you will use React-flow library to build node-based editor. )
• React
• Vite
• Antd (or just scss, it's up to you)
• TypeScript

To-do

The structure of project that you can follow (it's not necessary, but try to follow some structure, not just chaotic code snippets, here is some article about feature-sliced design: https://habr.com/ru/companies/inDrive/articles/693768):

1) Creating nodes

Create nodes with image, title, and subtitle, see the example on image below.
> Don't just hardcode the array of nodes, that will be used. Create some function that will create nodes by click on some button in header of image.

2) Creating connections between them

Only between "border" and "node internals" you should be able to make connections to another node (it's has to be done automatically). Here is the link to official example: https://reactflow.dev/examples/nodes/easy-connect

3*) Extra task (+9999 points)

Refactor your code with https://effector.dev/. So just convert your logic of creating nodes, on so on in a way effectorjs works.