Workflow Builder with React Flow

A modern workflow builder application built with React, TypeScript, and React Flow. This application allows users to create and visualize workflows with an analytics dashboard.

Features

• Interactive workflow builder using React Flow
• Analytics dashboard for workflow visualization
• Modern UI with Material-UI components
• State management with Redux
• Routing with React Router

Prerequisites

• Node.js (v16 or higher)
• npm (v7 or higher)

Local Development Setup

1. Clone the repository:

git clone <repository-url>
cd workflow-builder-reactflow

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

The application will be available at http://localhost:5173

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run lint - Run ESLint to check code quality
• npm run preview - Preview the production build locally

Project Structure

• /src/components - React components
• /src/redux - Redux store and slices
• /src/theme - Material-UI theme configuration
• /src/App.jsx - Main application component with routing

Routes

• /workflow-builder - Main workflow builder interface
• /analytics-dashboard - Analytics and visualization dashboard

Technologies Used

• React
• TypeScript
• Vite
• React Flow
• Material-UI
• Redux Toolkit
• React Router
• Recharts

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})