https://github.com/ritik48/workflow
Workflow: A React Flow-powered web app for easy workflow creation and management. Edit nodes, rearrange layouts, and connect tasks seamlessly. Streamline your workflow now!
https://github.com/ritik48/workflow
nodes-in-a-graph react react-flow
Last synced: 2 months ago
JSON representation
Workflow: A React Flow-powered web app for easy workflow creation and management. Edit nodes, rearrange layouts, and connect tasks seamlessly. Streamline your workflow now!
- Host: GitHub
- URL: https://github.com/ritik48/workflow
- Owner: ritik48
- Created: 2024-05-02T11:20:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-02T11:34:47.000Z (about 1 year ago)
- Last Synced: 2025-03-21T10:54:26.032Z (3 months ago)
- Topics: nodes-in-a-graph, react, react-flow
- Language: JavaScript
- Homepage: https://workflow-dev.vercel.app
- Size: 62.5 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔄 Workflow
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.
## 🚀 Features
- 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.
## 🛠️ Technologies Used
- 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.
## 📥 Installation
1. Clone the repository:
`https://github.com/ritik48/Workflow.git`
2. Navigate to the project directory:
`cd workflow`
3. Install dependencies:
`npm install`
4. Start the development server:
`npm run dev`
5. Open [http://localhost:5173](http://localhost:5173) in your browser to view the application.
## 📝 Usage
- 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.
## 🤝 Contributing
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.