FlowCX

A modern, high-performance Workflow Builder and Automation UI built with React, TypeScript, and Vite. Includes a visual drag-and-drop flow canvas, support dashboard, and ticket management view.

Features

• Visual Flow Builder — Drag-and-drop workflow canvas built with React Flow, supporting Trigger, Message, and Condition nodes with branching logic.
• Dashboard — Overview with stat cards, recent tickets, activity feed, and support performance chart.
• Ticket Management — Virtualized ticket table designed for smooth scrolling across large datasets.
• Centralized State — Zustand stores manage workflow and ticket data.

Tech Stack

• React 18
• TypeScript
• Vite
• Tailwind CSS
• React Flow
• Zustand
• TanStack Virtual
• Recharts
• Lucide React
• Radix UI

Project Structure

FlowCX/
├── src/
│   ├── components/
│   ├── features/
│   │   ├── builder/
│   │   └── tickets/
│   ├── pages/
│   ├── store/
│   └── types/
├── index.html
└── package.json

Getting Started

Clone the repository:

git clone https://github.com/MdZeeshan-dev/FlowCX.git
cd FlowCX
npm install

Start the development server:

npm run dev

Open http://localhost:5173 in your browser.

Build

Create a production build:

npm run build

Live Demo

https://flow-cx.vercel.app

Notes

This is a frontend-focused project built to demonstrate UI engineering with a complex canvas-based editor. Dashboard and ticket data currently use static/mock data; there is no backend integration.

License

MIT