SmartFlow

SmartFlow is a prototype for showcasing the capabilities of a visual tool for creating and managing dynamic operational flows and decision trees. Built with React, TypeScript, and React Flow, it allows you to build complex logic through a drag-and-drop interface and run it in a guided simulation mode.

Since I frequently suggest the creation of such tools to stakeholders, I decided to create this repo.

Features

• Visual Editor: Create nodes representing questions, data inputs, subflow calls, and results.
• Flow Runner: Navigate through the flows with a clean, user-friendly interface.
• Dynamic Branching: Route logic based on specific conditions or list selections.
• Subflow Support: Connect different flows, allowing for complex and modular process design.

Tech Stack

• Framework: React 19
• Build Tool: Vite
• Visual Mapping: @xyflow/react (React Flow)
• Styling: Tailwind CSS 4
• Icons: Lucide React

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

Project Structure

• src/components: UI components (Editor, Flow Runner, Property Panel, Custom Nodes).
• src/types: TypeScript interfaces for flow and project logic.
• src/utils: Utility functions (Storage, Helpers).
• src/data: Initial seed data and example flows.

License

This project is available under the MIT License.