Bitespeed-Reactflow-Task-Frontend

This project is a React application that allows users to create, modify, and manage flow diagrams using the React Flow library. It features custom nodes, drag-and-drop capabilities, and an interactive user interface.

Hosting Link

   https://bitespeed-reactflow-task.vercel.app/

Features

• Custom Nodes: Use custom node types to create unique diagrams.
• Drag and Drop: Easily add new nodes by dragging and dropping them onto the canvas.
• Connection Management: Connect nodes with edges, with error handling for invalid connections.
• Node Selection: Select nodes to view and edit their details in a sidebar.
• Real-time Updates: Changes to node labels and connections are reflected in real time.
• Snackbar Notifications: Informative messages for connection errors and other actions.

Getting Started

These instructions will help you set up and run the project on your local machine for development and testing purposes.

Prerequisites

Ensure you have the following installed:

• Node.js (version 14.x or later)
• npm (version 6.x or later)

Installation

1. Clone the repository:

   git clone https://github.com/jovinjoju1999/Bitespeed-Reactflow-Task-Frontend.git
   cd bitespeed-reactflow-task
   

2. Install dependencies:

   npm install

Running The Application

1. To start the application, run:

npm run dev

2. This will start the development server and open the application in your default web browser. The app will be running at http://localhost:5173.

Usage

1. Add Nodes: Drag a node type from the sidebar and drop it onto the canvas.
2. Connect Nodes: Click and drag from a source handle to a target handle to create an edge.
3. Select Node: Click on a node to view and edit its details in the sidebar.
4. Delete Node: Right-click on a node and select the delete option to remove it.

Dependencies

1. react: JavaScript library for building user interfaces
2. react-dom: Entry point for DOM rendering
3. react-scripts: Configuration and scripts for Create React App
4. reactflow: Library for building node-based diagrams
5. @mui/material: Material-UI components for React

This `README.md` file provides a comprehensive overview of the project, including installation instructions, usage guidelines, and error handling messages. Adjust the repository URL and other specifics as needed.