flowchart application using Reactjs flow chart with drag&drop, save & open flowchart, redux implementation done using canvas

Task:-

1. Create a basic flowchart design application in ReactJS

Points:-

• Use three shapes components: Circle, triangle, square
• Edges/connections: Lines
• Window area

User Stories:-

• User should be able to drag and drop any component in to window area.
• User should be connect components using lines similar to flowchart.
• On clicking on a component in window area , user should be able to add attributes to the component, Attributes are simply key and value pairs.
• User should be able to save the flowchart in the local storage .
• User should be able to fetch the saved flowchart from local storage and show it on window area.

Requirement:-

• Code must be done without using any third party UI libraries.
• Code should be optimized in terms of performance (Optimizing virtual dom)
• Redux must be used to manage the application state

duration: 36 hours

it is live on https://gcf-live-training-e7a58.firebaseapp.com.

With more time, this work could have been improved aesthetically and functionally