Workflow is a simple web application built with React Flow that allows users to create and manage multiple workflows. Each workflow consists of interconnected nodes/cards that represent different tasks or stages in the workflow. Users can edit the details of each node and their positions are persisted using local storage.
- Create multiple workflows with interconnected nodes.
- Edit the title and description of each node.
- Drag and drop nodes to rearrange them within the workflow.
- Connections between nodes are automatically saved.
- Node positions are persisted using local storage, ensuring that the layout is maintained even after page refresh.
- React.js: A JavaScript library for building user interfaces.
- React Flow: A React component for building interactive node-based graphs.
- Local Storage: HTML5 feature used to store data locally within the user's browser.
-
Clone the repository:
https://github.com/ritik48/Workflow.git -
Navigate to the project directory:
cd workflow -
Install dependencies:
npm install -
Start the development server:
npm run dev -
Open http://localhost:5173 in your browser to view the application.
- To create a new workflow, click on the "Add new Workflow" button on the dashboard.
- Select the node from the dropdown to add them to the workflow.
- Click on a node to edit its title and description.
- Drag nodes to rearrange their positions within the workflow.
- Connect nodes by dragging from one node's port to another.
- Changes are automatically saved to local storage, so your progress is preserved even if you close the browser or refresh the page.
Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue on the GitHub repository. Pull requests are also appreciated.