React Flow

React Flow is a web application for visualizing and managing flowcharts using React.js. This is an task of Frontend Developer Assignment in Interactly.

I used the following libraries to build this application:

• React.js: A JavaScript library for building user interfaces.
• Redux: A predictable state container for JavaScript apps.
• ReactFlow: A library for building node-based graphs and visualizations in React

Deployment

This project is live deployed at: ReactFlow Render - Akash Gupta

Feel free to explore the live deployment.

Table of Contents

• Setup and Installation
• Running Locally
• CRUD Operations

Setup and Installation

1. Clone the repository to your local machine using the following command: git clone https://github.com/akgupta20/react-flow

2. Navigate to the project directory: cd react-flow

3. Install dependencies using the command: npm install

Running Locally

To run the project locally after completing the setup and installation steps:

1. Start the development server using command: npm start

2. Open your web browser and navigate to http://localhost:5173 to view the application.

CRUD Operations

To perform create, update, and delete operations:

1. Create Node: To create a new node, click on the top-left button labeled Create Node.

2. Update Node: To update a node, click on the node, then the right sidebar will open. Make your changes and click on save.

3. Delete Node: To delete a node, hover over the node. The delete icon will appear in the top-right corner of that node. Click on it to delete.

4. Delete Edge: To delete an edge, click on the delete icon located in the middle of that edge.