#Find deployed working version of this app on this Link: https://chatbot-flow-builder-eight-weld.vercel.app/

Chatbot Flow Builder – Visual Node Editor

This project is a Chatbot Flow Builder that I developed using React, React Flow, and TypeScript. My goal was to build an interactive drag-and-drop flow system for chatbot conversations, mimicking tools like Chatfuel or ManyChat, but from scratch.

I designed and implemented everything from node management and validation to styling and UX behavior. This project demonstrates my ability to work with modern React architecture, canvas-based editors, and real-time UI interactions.

---

Tech Stack

• React (with TypeScript)
• React Flow for canvas and edge/node logic
• Ant Design Icons for lightweight UI icons
• Pure CSS (with some Ant Design icons)

---

Features I Built

1. Drag-and-Drop Node Creation

I created a draggable panel that allows users to drag a “Message” node onto the canvas. I manually set up dataTransfer to register the node type and added it to the React Flow instance dynamically.

2. Custom Message Node

I registered a custom node type (textMessage) that visually represents a message bubble. I built it inside TextNode.tsx, where I handled the layout, input/output handles, and live label updates to reflect user-edited content.

3. Settings Panel (Live Node Editing)

When a node is selected, I show a settings panel over the sidebar. It lets users edit the message content of the selected node in real-time. I handled controlled input syncing with React Flow’s state system.

4. Connection Logic

Each node has:

• One output handle (on the right)
• One input handle (on the left)

This encourages a one-directional conversational flow, which matches how real chatbot sequences are designed.

5. Flow Validation on Save

When the user clicks the “Save” button:

• I check if all nodes (except the initial one) have at least one incoming connection.
• If invalid, I show an error banner.
• If valid, I show a success banner.

This logic lives in a separate validation.ts utility for clean separation of concerns.

6. Clean UI and UX

I created a responsive layout with:

• A top bar
• A sidebar with node panel and editor
• A canvas area
• Informative banners for save success/failure

I used pure CSS to implement a clean, readable UI (with occasional use of Ant design icons) without relying on any heavy CSS frameworks.