stevekrouse

crm-kanban

Public

Starter template with client-side React & Hono server

Val Town is a collaborative website to build and scale JavaScript apps.

Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

CRM Kanban Board

A minimal sales pipeline kanban board built with React, Hono, and SQLite on Val Town.

Features:

5-stage sales pipeline (Lead → Qualified → Proposal → Negotiation → Won)
Drag-and-drop deals to update status
Real-time deal tracking with amounts
Pre-loaded with 8 demo deals
Dark theme with gradient styling

How it works

Backend (index.ts): Hono server that initializes SQLite with demo data and provides API routes
Frontend (frontend/components/): React components for the kanban board
- App.tsx: Loads deals from /api/deals and handles status updates
- Kanban.tsx: 5-column kanban with drag-and-drop
- DealCard.tsx: Individual deal cards

API

GET /api/deals — Get all deals
POST /api/deals/:id/status — Update deal status
POST /api/deals — Create new deal

Database

SQLite table:

CREATE TABLE deals (
  id INTEGER PRIMARY KEY,
  name TEXT NOT NULL,
  company TEXT NOT NULL,
  status TEXT NOT NULL,
  amount INTEGER NOT NULL,
  createdAt TEXT NOT NULL
)

Next steps

Add edit/delete functionality
Persist drag-drop reordering
Add filtering and search
Connect to a real CRM API

Code