Prospecto: kanban, custom variables, and a landing page in one day

3 min readJune 1, 2026#prospecto#crm#whatsapp#kanban#dnd-kit#landing#next-js#docker#build-in-public

Prospecto: kanban, custom variables, and a landing page in one day

Prospecto is a self-hosted mini WhatsApp CRM.

The prospects page was a table. A flat, lifeless table with no information at a glance.

I changed that today.


The kanban

The kanban view replaces the table. Five columns: New → Contacted → Qualified → Converted → Lost.

Each card is a prospect. You drag it from column to column. State updates in real time with @dnd-kit — optimistic first, then confirmed by the server.

What makes it actually useful: clusters.

Every tag has a color the user picks themselves. A filter bar above the kanban lets you isolate a cluster with one click. You see only the prospects with that tag, spread across their columns.

That's how you run a targeted campaign: filter a cluster, see each prospect's status, send.


Custom variables

Prospecto's WhatsApp messages already supported {{nom}} and {{telephone}}.

Now the user can create their own variables — {{entreprise}}, {{ville}}, {{produit}}, anything. A slug (for the template) and a label (for the form).

When you add a prospect, the fields show up. Values are stored as JSON in metadata. At send time, variables are substituted server-side.

The key point: variables are read from the database, never from the HTTP request. No prospect can inject an arbitrary value.


The landing page

The problem: the landing page was generic. Cards with emojis. Copy with no tension. "No technical skills required" — defensive and pointless.

I rewrote the whole thing in my own voice.

The hero: Tu prospectes à la main. Arrête. Left-aligned headline, letter-spacing: -0.04em, a scramble kinetic-text effect on load for each line, with a staggered delay.

The problems section: no more emoji cards. A numbered list 01 / 02 / 03 with real figures — "2 hours for 40 numbers," not "the scattered Excel list."

The personas: a before/after structure. Two paragraphs per card. The first tells the struggle. The second says what changes.

The CTA: a LiquidButton with an SVG filter (feTurbulence + feDisplacementMap) that distorts the background behind the button. No library — just an SVG and CSS.


What's in production

  • v1.0.3 → kanban + tags + custom variables
  • v1.0.4 → self-contained install script (downloads docker-compose.yml itself)
  • v1.0.5 → auto-generated VAPID keys + guided install with purchase URL
  • v1.0.6 → dynamic VAPID fix (NEXT_PUBLIC_ doesn't work inside a pre-built Docker image)

The landing page runs on prospecto.aboudouzinsou.site.


Next step: a testimonials page once the first users are in, and a scheduled-campaigns system.