Client Tracker is a CRM-style application designed for freelancers and small consultancies to track leads, deals and revenue in one place.
The live demo provides:
- Read-only access
- Seeded demo data
- No sign-up required
- Preview
- Features
- Architecture Overview
- Tech Stack
- Authentication
- Role-Based Access Control
- Billing
- Analytics
- Prerequisites
- Running Locally
- Testing
- Deployment
- Troubleshooting
- Contributing
- License
- Full CRUD operations for leads and deals
- Authentication with role-based access control (RBAC)
- Read-only demo mode with seeded data
- Server-side analytics using database aggregation
- Stripe subscription billing (test mode)
The application follows a typical Next.js App Router architecture:
Browser
│
▼
Next.js App Router
│
├── Server Components
├── API Routes
│
▼
Prisma ORM
│
▼
PostgreSQL (Neon)
Authentication is handled through NextAuth, while subscription billing is implemented with Stripe in test mode.
- Next.js (App Router)
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Next.js Server Components
- Next.js API Routes
- Prisma ORM
- PostgreSQL (Neon)
- NextAuth (OAuth)
- Stripe (Test Mode)
Authentication is implemented with:
- NextAuth
- Prisma Adapter
- OAuth providers (Google and GitHub)
- Database session strategy
NEXT_PUBLIC_DEMO_MODE=true
ENABLE_OAUTH=false
Characteristics:
- OAuth disabled
- Read-only access
- Seeded demo account
Ensure the demo user defined in prisma/seed.ts has been seeded before starting the application.
pnpm dlx prisma db seedNEXT_PUBLIC_DEMO_MODE=false
ENABLE_OAUTH=true
OAuth providers must also be configured through the project's environment variables. Refer to .env.example for the complete configuration.
Two application roles are supported.
- Full CRUD access
- View analytics
- Manage billing and subscriptions
- Read-only access
- View analytics
- Cannot modify data
- Cannot manage billing
- The first authenticated user becomes the
owner. - Subsequent users are assigned the
viewerrole.
| Action | Owner | Viewer |
|---|---|---|
| View leads | ✅ | ✅ |
| Create or edit leads | ✅ | ❌ |
| View deals | ✅ | ✅ |
| Create or edit deals | ✅ | ❌ |
| View analytics | ✅ | ✅ |
| Manage billing | ✅ | ❌ |
Stripe is integrated in test mode.
Available plans:
- Free — limited number of deals
- Pro — unlimited deals
Rules:
- Deal limits are enforced when creating new deals.
- Existing deals remain accessible.
- Billing actions are restricted to Owners.
The dashboard provides aggregated business metrics, including:
- Total leads
- Total deals
- Won versus lost deals
- Total revenue
Analytics are calculated server-side using database aggregation queries.
Before running the project locally, ensure you have:
- Git
- Node.js
- pnpm
- Access to a PostgreSQL database (or Neon)
git clone https://github.com/dnmore/client-tracker.git
cd client-trackerpnpm installCopy the example environment file .env.example and populate the required values.
The complete list of required variables is defined there.
pnpm prisma migrate devpnpm dlx prisma db seedpnpm devThe application will be available at:
http://localhost:3000
Unit tests are implemented using Jest.
Current test coverage includes:
-
Page rendering
- Landing page
- Dashboard page
-
Create Form
- Form validation and error handling
- View-only mode (submit button disabled)
- Full mode (submit button enabled)
-
Authentication / Data Access Layer
verifySessionreturns the authenticated session when a user existsverifySessionredirects appropriately when no session is found
Run tests with command:
pnpm testThe application is deployed on Vercel and available here
Common setup issues may include:
- Missing environment variables
- Database migrations not applied
- Database seed not executed before Demo Mode
If running Demo Mode, ensure the seeded demo user exists before launching the application.
Contributions are welcome.
Please open an issue to report bugs or suggest enhancements, or submit a pull request with proposed changes.
This project is licensed under the MIT License.