Workflow Builder

A drag-and-drop workflow automation application built with React and Node.js. Create visual workflows by connecting components that represent different functions like API calls, data processing, and database operations.

Features

• Drag & Drop Interface: Intuitive component palette with visual workflow canvas
• Component System: Pre-built components for API calls, data processing, display, and database operations
• Visual Connections: Connect components with visual lines to create data flows
• Code Editor: Customize component behavior with JavaScript code
• Workflow Execution: Execute complete workflows and see results
• Save/Load: Persist workflows to database for later use
• Property Panel: Edit component properties and parameters in real-time

Tech Stack

Frontend

• React 18 with TypeScript
• Konva.js for canvas rendering
• Zustand for state management
• Axios for API calls

Backend

• Node.js with Express
• TypeScript
• MongoDB with Mongoose
• Custom workflow execution engine

Prerequisites

• Node.js (v16 or higher)
• MongoDB (local installation or MongoDB Atlas)
• npm or yarn

Installation

1. Clone and navigate to the project:

   cd workflow-builder

2. Install all dependencies:

   npm run install:all

3. Set up MongoDB:

   • Install MongoDB locally or create a MongoDB Atlas account
   • Update the MONGODB_URI in backend/.env if needed
   • Default: mongodb://localhost:27017/workflow-builder

Running the Application

Option 1: Run both frontend and backend together

npm run dev

Option 2: Run separately

Terminal 1 - Backend:

cd backend
npm run dev

Terminal 2 - Frontend:

cd frontend
npm start

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

Usage

Creating a Workflow

1. Add Components: Drag components from the left palette to the canvas
2. Connect Components: Click on output ports (blue circles) and drag to input ports (green circles)
3. Configure Components: Select a component to edit its properties in the right panel
4. Save Workflow: Click the "Save" button to persist your workflow
5. Execute Workflow: Click "Execute" to run the workflow and see results

Available Components

• API Caller (Circle, Green): Makes HTTP requests to external APIs
• Data Processor (Square, Blue): Processes data using custom JavaScript code
• Filter (Circle, Red): Filters array data based on conditions
• Display (Triangle, Orange): Displays data in various formats
• Database Writer (Square, Purple): Writes data to a database

Component Configuration

Each component can be customized:

• Name: Custom display name
• Parameters: Component-specific settings
• Code: JavaScript code for data processing components

Example Workflow

1. Add an API Caller component
2. Configure it to call https://jsonplaceholder.typicode.com/posts
3. Add a Filter component
4. Connect API Caller output to Filter input
5. Configure Filter to show only posts with userId === 1
6. Add a Display component
7. Connect Filter output to Display input
8. Execute the workflow to see filtered results

Project Structure

workflow-builder/
├── frontend/                 # React frontend
│   ├── src/
│   │   ├── components/      # React components
│   │   ├── store/          # Zustand state management
│   │   └── utils/          # API utilities
├── backend/                 # Node.js backend
│   ├── src/
│   │   ├── models/         # MongoDB models
│   │   ├── routes/         # API routes
│   │   ├── utils/          # Workflow execution engine
│   │   └── index.ts        # Server entry point
├── shared/                  # Shared TypeScript types
└── package.json            # Root package.json

API Endpoints

• GET /api/workflows - Get all workflows
• POST /api/workflows - Create new workflow
• PUT /api/workflows/:id - Update workflow
• DELETE /api/workflows/:id - Delete workflow
• POST /api/workflows/:id/execute - Execute workflow
• GET /api/component-templates - Get available component templates

Development

Adding New Component Types

1. Add component template to backend/src/utils/seedData.ts
2. Implement execution logic in backend/src/utils/WorkflowExecutor.ts
3. Update shared types if needed

Database Schema

• Users: Basic user information
• Workflows: Complete workflow definitions with components and connections
• ComponentTemplates: Available component types and their configurations

Troubleshooting

Common Issues

1. MongoDB Connection Error: Ensure MongoDB is running and connection string is correct
2. Port Already in Use: Change ports in package.json scripts if needed
3. CORS Issues: Backend is configured to accept requests from frontend

Debug Mode

Add DEBUG=1 to your environment variables for additional logging.

Future Enhancements

• User authentication and authorization
• Real-time collaboration
• Component marketplace
• Workflow scheduling
• Visual debugging tools
• Export/import workflows
• More built-in component types

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.