Skip to content

README.md

Latest commit

 

History

History
166 lines (108 loc) · 5.22 KB

README.md

File metadata and controls

166 lines (108 loc) · 5.22 KB
Raw

WhatsApp Marketing Automation Flow Builder

Take‑Home Assignment for Full‑Stack Engineer

Overview

Build an MVP of a WhatsApp marketing automation flow builder that lets users create, visualize, and execute automated marketing workflows with conditional logic.

Loom example

https://www.loom.com/share/115e322f2e754cb682115c2d69e3502d?sid=3062262e-07e2-4307-98b6-4fbaed2bab07

Technical Stack

Frontend

  • Framework: Next.js with React and TypeScript
  • Styling: Tailwind CSS
  • Flow visualization: React Flow
  • Notes: You may use built‑in React state and hooks;

Backend

  • Runtime: Node.js + TypeScript
  • Framework: Express.js (NestJS is acceptable but not required)
  • Database: Your choice ( MongoDB, or in‑memory for simplicity)
  • API: REST endpoints only

Core Requirements

1) Data Modeling & Validation ⭐

  • Define persistent models for flows, nodes, edges, and execution history/state.
  • Support conditional logic (AND/OR) and multiple branches.
  • Implement server‑side validation for flows and connections (e.g., dangling edges, invalid targets, cycles if disallowed, missing configs).

2) Visual Flow Builder ⭐

  • Drag & Drop: Create and position nodes via React Flow.
  • Connections: Create/modify connections; prevent invalid wiring.
  • Conditional Branching: Visualize decision splits and branches.
  • Configuration UI: Edit node properties in a side panel or modal.

3) Flow Traversal & Execution ⭐

  • Triggers: Support multiple trigger types (see below).
  • Sequencing: Execute actions in order; support parallel branches.
  • Conditions: Evaluate complex AND/OR logic from trigger/context data.
  • Delays: Respect time delays (minutes/hours/days). For demo, you may shorten delays (e.g., seconds) but keep units configurable.
  • State Persistence: Save execution state and history between steps.
  • External Integrations: Mock all external calls (e.g., WhatsApp send, order service). Provide mock REST endpoints and/or a test console to verify interactions.

Triggers & Nodes

Supported Trigger Types

  • New Order
  • Abandoned Checkout
  • Customer Registration
  • Order Status Change

Triggers may be fired via REST webhook‑like calls to your backend or via a simple admin page in the frontend.

Node Types

Action Nodes

  • Send Message: Simulate sending a WhatsApp message (template support). Calls a mock endpoint.
  • Add Order Note: Persist a note linked to an order. Calls a mock endpoint.
  • Add Customer Note: Persist a note linked to a customer. Calls a mock endpoint.
  • Time Delay: Wait a specified duration before proceeding.

Logic Nodes

  • Conditional Split: Evaluate multiple conditions with AND/OR composition; support multiple output paths (e.g., true/false).

Flow Execution Rules

  • Sequential Processing: Respect node ordering on a path.
  • Parallel Branches: Allow fan‑out and process concurrently.
  • Condition Evaluation: Support numeric/string operators (equals, contains, greater_than, less_than).
  • State: Store per‑run state, including current node(s), retries, and last error.

Required Features

A. Frontend (Next.js)

  • Flow Builder UI

    • Drag‑and‑drop node creation with React Flow
    • Connect/disconnect nodes with validation
    • Inline validation feedback (tooltips/badges/toasts)
    • Node configuration panel (edit action/logic settings)
    • Visual display of conditional branches and delay nodes

  • Flow Operations

    • Create, read, update, delete flows
    • Activate/deactivate a flow
    • Save and load flows to/from backend
    • Basic test interface (trigger a flow with sample payloads) (BONUS)

B. Backend (Express/Nest)

  • Flow Management API (REST)

    • CRUD flows (including nodes/edges)
    • Validate flow structure
    • Activate/deactivate flows

  • Execution Engine

    • Endpoint to fire triggers
    • Core traversal to process nodes sequentially/in parallel
    • Conditional evaluation with AND/OR
    • Time delays (using timers/queues or simplified scheduler)
    • Mock external services (WhatsApp send, order system) exposed as REST endpoints for testing

Deliverables

Code Repository

  • frontend/ Next.js app (React Flow builder)
  • backend/ Express/Nest API server
  • README.md setup & run
  • ARCHITECTURE.md key decisions and trade‑offs

Core Functionality Demo ( make a loom )

  1. Flow Creation: Build the sample flow with conditions
  2. Visual Updates: Show real‑time visual changes as nodes/edges are edited
  3. Flow Execution: Trigger and observe the end‑to‑end run
  4. Conditional Logic: Demonstrate condition evaluation and branching output

Bonus (Optional)

  • Unit tests for engine/validators
  • Flow templates and JSON import/export
  • Basic execution analytics (run counts, success/fail)

Submission Guidelines

Submit:

  1. Source code in a GitHub repo
  2. README with setup and usage
  3. 5‑minute demo video (screen recording)
  4. Short ARCHITECTURE.md covering key decisions

Questions

If anything is unclear, ask concise questions early to avoid rework.