Personal#07

Automated Marketing Chatbot

A personal project — a visual workflow-driven chatbot builder for lead capture and automated engagement, combining a React Flow node editor, real-time Socket.io communication, and MongoDB-persisted flow execution.

Tech Stack

Next.jsReact FlowSocket.ioMongoDBNode.js

Responsibilities

  • Designed the workflow data model — nodes and edges stored as a graph in MongoDB, each node carrying a type, prompt, and conditional routing config
  • Built the React Flow visual editor for creating and modifying chatbot flows without writing code
  • Implemented the server-side flow execution engine that traverses the node graph, evaluates conditions, and determines the next message at each step
  • Added real-time communication via Socket.io so bot responses delivered instantly without page reloads
  • Built session persistence so in-progress conversations resumed from the correct node after a disconnect

Case Study

This started as a proof of concept for a SaaS idea: a tool that lets non-technical marketers build lead capture bots through a visual interface rather than code. The interesting engineering problem was not the chatbot itself — it was building a general-purpose flow execution engine that could run any workflow a user designed in the editor, including branches, conditions, and loops.

The workflow data model stores each flow as a directed graph in MongoDB — nodes carry a type (message, question, condition, action), a prompt or content payload, and a routing config that maps response values to outgoing edges. Edges connect nodes and can carry conditions. This structure is general enough to represent linear sequences, branching question trees, and loops within a single schema.

The React Flow editor let users drag, drop, and connect nodes to build flows visually. Node state — content, type, routing conditions — was editable inline via a side panel. The serialised graph was the same structure the execution engine consumed, so what the user built in the editor was exactly what ran in production with no translation layer.

The server-side execution engine traversed the graph node by node, evaluating conditions against the user's responses to determine the next step. Socket.io delivered each bot message in real time as the engine resolved it — the conversation felt immediate rather than request-response. Session state was persisted in MongoDB against a session ID, so a user who disconnected mid-conversation resumed at the exact node where they left off rather than starting over.