Skip to content
TheAbhiPatel
All projects
Type
Built for fun
Year
2026
Area
Full Stack
Stack
5 tools

The story

Why it exists

I built WA Flow Builder, a full-stack WhatsApp chatbot builder with a visual drag-and-drop flow editor. Users design conversation flows, connect them to the WhatsApp Cloud API and deploy them from a web interface. It uses React and TypeScript on the frontend and Node.js, Express and MongoDB on the backend.

A flow builder app where users can create and run WhatsApp bot flows by connecting their accounts, built using React, Node.js, Express, MongoDB and TypeScript.

What it does

The features that matter

  • Drag-and-drop flow canvas with 11 node types, from messages to API calls and loops
  • In-browser simulator to test flows without sending real WhatsApp messages
  • AI Reply node supporting OpenAI, Gemini, Groq, Mistral and OpenRouter
  • Draft and production versions with history and rollback
  • Live conversation viewer for connected WhatsApp numbers
  • Dashboard, admin panel, dark mode and responsive UI

Under the hood

How it works

  1. Step 1

    React 19 frontend with React Flow for the canvas and Redux Toolkit for state

  2. Step 2

    Node.js and Express API with MongoDB, plus a webhook for incoming WhatsApp messages

  3. Step 3

    JWT auth, bcrypt password hashing, AES-encrypted API keys and rate limiting

  4. Step 4

    Runs on Docker or an Ubuntu VPS; Vercel is used as a limited showcase

A look at it

As it runs today

flowbuilder.theabhipatel.com
WhatsApp Flowbuilder screenshot

Built with

  • React.js
  • Node.js
  • Express.js
  • MongoDB
  • TypeScript

@xyflow/react (React Flow), Mongoose, node-cron for delay nodes, Helmet and express-rate-limit.

Ask ABI about it

Up next

Keep exploring