Freelancer CRM

Premium client relationship management for freelancers and creative professionals.

Live Demo: https://freelancer-crm-ivory.vercel.app

---

What is this?

A fully functional CRM built for freelancers — manage clients, projects, invoices, proposals, contracts, and payments from one place.

Features

• Dashboard — Revenue overview, active projects, pending proposals, overdue invoice alerts
• Clients — Directory with health scoring, search, filters, and table/card views
• Projects — Status tracking, budgets, deadlines, client linking
• Invoices — Line items, payment history, record payments, status tracking
• Proposals — Dynamic line items, validity tracking
• Contracts — Draft → Sent → Signed workflow
• Settings — Data export (JSON), dark mode, notification preferences

Tech Stack

• Framework: Next.js 16 (App Router) + React 19
• Language: TypeScript 5
• Styling: Tailwind CSS v4
• UI Primitives: Radix UI (dropdowns, tabs, tooltips, avatars)
• Icons: Lucide React
• State: React Context + localStorage persistence
• Fonts: Geist (via next/font)

---

Screenshots

Dashboard

Clients

Client Detail

Invoices

Settings

---

Status

Production-ready. Every button, link, form, and interaction is fully wired.

Getting Started

Requires Node.js 20.9 or newer (Next.js 16's minimum).

npm install
npm run dev

Open http://localhost:3000 in your browser.

Other scripts: npm run build (production build), npm start (serve it), npm run lint.

Project Structure

src/
├── app/
│   ├── (shell)/           # Authenticated routes (sidebar + layout)
│   │   ├── dashboard/
│   │   ├── clients/       # List, detail, new client
│   │   ├── projects/      # List, detail, new project
│   │   ├── invoices/      # List, detail, new invoice
│   │   ├── proposals/     # List, detail, new proposal
│   │   ├── contracts/     # List, detail, new contract
│   │   └── settings/
│   ├── layout.tsx         # Root layout (providers)
│   └── page.tsx           # Redirects to /dashboard
├── components/
│   ├── sidebar.tsx
│   ├── theme-script.tsx   # Applies saved theme before paint (no flash)
│   └── ui/               # Reusable UI components
└── lib/
    ├── data-context.tsx   # All data + CRUD operations
    ├── toast-context.tsx  # Toast notification system
    └── utils.ts           # Formatting helpers

Data

All data is stored in localStorage under the key freelancer-crm-data. Seed data is generated on first load. Export your data anytime from Settings → Data Management → Export.

License

MIT

Author

Built by Mouad Sehli, freelance front-end developer (React, TypeScript, Tailwind). More work and contact details are on the portfolio.