Skip to content
Framework: Vite + React + TypeScriptDifficulty: intermediate

CRM pipeline

Contacts table plus a five-stage deal pipeline board with inline stage changes, all persisted locally.

A small CRM with two views over the same data: a searchable contacts table with stage selects and delete, and a kanban-style pipeline (Lead → Qualified → Proposal → Won/Lost) where deals move between columns with keyboard-accessible buttons. State lives in localStorage via a typed hook so the app works offline; swap src/store.ts for API calls when you add a backend.

  • react
  • crm
  • pipeline
  • kanban
  • tailwind

This preview is the template's actual file tree and source code — exactly what is copied into a new project. Codexa does not publish screenshots or mock-ups of templates; run the project to see it rendered.

Files14 files

src/store.ts22 lines
import { useLocalStorage } from "./useLocalStorage";

export const STAGES = ["Lead", "Qualified", "Proposal", "Won", "Lost"] as const;
export type Stage = (typeof STAGES)[number];

export type Contact = { id: string; name: string; company: string; email: string; stage: Stage; value: number; note: string };

const seed: Contact[] = [
  { id: "c1", name: "Meera Iyer", company: "Harbor Labs", email: "meera@harborlabs.example", stage: "Lead", value: 4000, note: "Met at the Bengaluru meetup." },
  { id: "c2", name: "Daniel Okafor", company: "Lumen Retail", email: "daniel@lumen.example", stage: "Qualified", value: 12000, note: "Needs SSO before Q3." },
  { id: "c3", name: "Sofia Rossi", company: "Quartz Studio", email: "sofia@quartz.example", stage: "Proposal", value: 7500, note: "Proposal sent 12 May." },
  { id: "c4", name: "Arjun Mehta", company: "Nimbus", email: "arjun@nimbus.example", stage: "Won", value: 9800, note: "Annual plan." },
];

export function useContacts() {
  const [contacts, setContacts] = useLocalStorage<Contact[]>("crm-contacts", seed);
  const add = (c: Omit<Contact, "id">) => setContacts((prev) => [...prev, { ...c, id: "c" + Date.now().toString(36) }]);
  const update = (id: string, patch: Partial<Contact>) => setContacts((prev) => prev.map((c) => (c.id === id ? { ...c, ...patch } : c)));
  const remove = (id: string) => setContacts((prev) => prev.filter((c) => c.id !== id));
  const reset = () => setContacts(seed);
  return { contacts, add, update, remove, reset };
}

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

PackageVersion
react^19.1.0
react-dom^19.1.0
vite^6.3.0
@vitejs/plugin-react^4.4.0
tailwindcss^4.1.0
@tailwindcss/vite^4.1.0
typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Opens at
/
Difficulty
intermediate

Projects run in an isolated sandbox with a live preview. Read the projects documentation for details on settings, snapshots and deployment.

Need the raw data? GET /api/v1/templates/vite-react-crm returns this template with its files.

Build on CRM pipeline

Create a free account, start from this template, and ask the AI agent to turn it into your app.