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
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.
| Package | Version |
|---|---|
| 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.