{"id":15095763,"url":"https://github.com/raghavg27/workflowai","last_synced_at":"2026-02-05T19:36:35.860Z","repository":{"id":252447077,"uuid":"840376507","full_name":"raghavg27/WorkflowAI","owner":"raghavg27","description":"AI-driven automation with an intuitive no-code interface.","archived":false,"fork":false,"pushed_at":"2024-08-23T19:40:47.000Z","size":651,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T02:02:50.124Z","etag":null,"topics":["fastapi","react-hooks","reactflow","reactjs","zustand"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raghavg27.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-09T15:06:41.000Z","updated_at":"2024-08-23T19:40:50.000Z","dependencies_parsed_at":"2024-09-19T21:00:35.308Z","dependency_job_id":null,"html_url":"https://github.com/raghavg27/WorkflowAI","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"71d1cff63ab1271b63531d16f9d0b15753e4782d"},"previous_names":["raghavg27/workflowai"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/raghavg27/WorkflowAI","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raghavg27%2FWorkflowAI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raghavg27%2FWorkflowAI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raghavg27%2FWorkflowAI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raghavg27%2FWorkflowAI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raghavg27","download_url":"https://codeload.github.com/raghavg27/WorkflowAI/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raghavg27%2FWorkflowAI/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263245301,"owners_count":23436513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fastapi","react-hooks","reactflow","reactjs","zustand"],"created_at":"2024-09-25T15:41:45.872Z","updated_at":"2026-02-05T19:36:35.817Z","avatar_url":"https://github.com/raghavg27.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 WorkflowAI\nAI-driven automation with an intuitive no-code interface.\n\n![WorkflowAI Builder Screenshot](./screenshot.png)\n\nWelcome to the WorkflowAI Application! This project demonstrates a powerful and flexible tool for creating complex workflows using a variety of custom nodes and edges. It showcases advanced frontend development skills, leveraging React, React Flow, Material-UI, and Zustand for state management. \n\n## 🌟 Features\n\n### 1. **Custom Node Abstraction**\n   - **BaseNode Component:** Developed a `BaseNode` component that encapsulates shared logic across multiple nodes, ensuring code reusability and consistency.\n   - **Custom Nodes:** Implemented five custom nodes:\n     - **URL Loader Node:** Fetches JSON data from a URL and feeds it into the pipeline.\n     - **Note Node:** A sticky note-style node for adding annotations within the pipeline.\n     - **Delay Node:** Adds a delay in the pipeline flow, allowing for time-based operations.\n     - **Time Node:** Outputs the current time in different timezones, perfect for time-sensitive workflows.\n     - **Read JSON Value Node:** Extracts specific values from JSON strings using input keys.\n\n### 2. **Custom Edges with Interactive Features**\n   - **Custom Edge Implementation:** Introduced custom edges with smooth transitions and arrows, enhancing visual clarity.\n   - **Edge Delete Button:** Added a delete button directly on the edge,  allowing for easy removal and improving user interaction.\n\n### 3. **Dynamic and Responsive UI**\n   - **Pipeline Toolbar:** A fully styled and responsive toolbar for dragging and dropping nodes into the pipeline, using Material-UI for a modern look and feel.\n   - **Node Styling:** All nodes feature cohesive and attractive designs, ensuring a polished user experience across different devices and screen sizes.\n   - **Text Node Logic:** The Text Node dynamically adjusts its size based on input length, with support for JavaScript variables, adding flexibility and power to pipeline creation.\n\n### 4. **Seamless Integration with Backend**\n   - **Backend Communication:** The application integrates with a Python-based backend to analyze the pipeline's structure.\n   - **DAG Validation:** On submission, the application checks if the pipeline forms a Directed Acyclic Graph (DAG), providing instant feedback to the user.\n\n### 5. **Advanced State Management**\n   - **Zustand for State Management:** Leveraged Zustand to efficiently manage the application's state, ensuring a smooth and responsive experience.\n\n## 🎯 How to Use\n\n1. **Clone the Repository:**\n   ```bash\n   git clone https://github.com/raghavg27/WorkflowAI.git\n   cd WorkflowAI\n   ```\n\n2. **Install Dependencies:**\n   ```bash\n   npm install\n   ```\n\n3. **Start the Application:**\n   ```bash\n   npm start\n   ```\n\n4. **Build Your Pipeline:**\n   - Drag and drop nodes from the toolbar into the main canvas.\n   - Connect nodes using edges to define the workflow.\n   - Use the delete buttons on nodes and edges for easy modifications.\n   - Submit your pipeline to check if it forms a DAG.\n\n## 🛠 Technologies Used\n\n- **React** - A JavaScript library for building user interfaces.\n- **React Flow** - For visualizing and building node-based workflows.\n- **Material-UI** - For designing a modern, responsive UI.\n- **Zustand** - Lightweight and flexible state management for React.\n- **Python (Backend)** - Handles DAG validation and other backend operations.\n\n## 📸 Screenshots\n\n_Add screenshots of the application here to visually demonstrate its features._\n\n## 🤝 Contributions\n\nContributions, issues, and feature requests are welcome! Feel free to check out the [issues page](https://github.com/raghavg27/WorkflowAI/issues).\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraghavg27%2Fworkflowai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraghavg27%2Fworkflowai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraghavg27%2Fworkflowai/lists"}