CRM & Lead Management System

Build a lightweight CRM for tracking leads through a sales pipeline, logging activity, and managing contact records.

Advanced2-3 days

See the build prompt Browse AI coding tools

Stack

Technology used

Next.js
TypeScript
Postgres
Prisma
Tailwind CSS
NextAuth

Required tools

AI coding tools you'll need

Claude Code
Cursor

What you'll learn

Skills you'll practice

How to model a sales pipeline with stages and lead-to-stage relationships
How to build a drag-and-drop kanban board backed by a database
How to implement role-based authentication for a multi-user internal tool
How to log and display an activity timeline per lead
How to design queries and indexes that stay fast as records grow

Build process

Step-by-step build

1
Design the schema
Model Contact, Lead (with stage, value, source), Activity (notes/calls/emails), and User.
2
Set up authentication
Add NextAuth so each team member has their own login.
3
Build the contacts section
Add a list, search, and detail view per contact.
4
Build the pipeline board
Build a kanban view with columns per stage (New, Contacted, Qualified, Proposal, Won, Lost) that supports drag-and-drop to change stage.
5
Wire stage changes to the database
Connect drag-and-drop to a server action that updates the lead's stage and logs an activity entry automatically.
6
Build the lead detail page
Show value, source, assigned owner, and a chronological activity timeline with a form to add notes.
7
Add basic reporting
Show total pipeline value per stage and a simple conversion-rate view.
8
Add search and filtering
Filter leads by owner, stage, source, and value range.
9
Add role-based permissions
Restrict sales reps to their own leads while admins can see everyone's.
10
Deploy and load-test
Deploy and test with a larger seeded dataset to confirm the board stays responsive.

Starter prompt

Paste this into your AI coding tool

Adapt the placeholders in brackets to your own product, then iterate on the result step by step rather than expecting a perfect first pass.

Prompt

Build a lightweight CRM using Next.js App Router, TypeScript, Prisma, Postgres and NextAuth for authentication. Data model: User (with role: admin or rep), Contact (name, email, phone, company), Lead (contactId, ownerId, stage: new/contacted/qualified/proposal/won/lost, value, source), and Activity (leadId, type: note/call/email, content, createdAt). Build: a login-protected dashboard; a /contacts section to list and search contacts; a /pipeline kanban board with one column per stage where I can drag a lead card between columns and have it persist via a server action, automatically logging an Activity entry for the stage change; a lead detail page with an activity timeline and a form to log a new note or call; and a simple /reports page showing total pipeline value per stage and a win-rate percentage. Sales reps should only see leads they own; admins should see everyone's. Seed the database with a realistic set of about 15 sample leads across different stages for testing the board.

SEO

SEO considerations

This is an internal, authenticated tool — set robots noindex, nofollow on every route
Do not expose lead or contact data through any publicly cacheable route or static export
If a public marketing page exists for the product, keep its metadata and content entirely separate from the app routes
Ensure server-rendered pages containing customer data are never served from a shared CDN cache

Ship it

Deployment steps

Provision a managed Postgres database and run Prisma migrations against it
Configure NextAuth environment variables (secret, provider credentials) in your hosting provider
Deploy to Vercel or another Node host with support for server actions
Set up daily automated database backups given this holds real customer data
Add monitoring and alerting for failed background jobs or slow queries as usage grows

Keep building