Skip to content

README.md

Latest commit

 

History

History
161 lines (124 loc) · 3.79 KB

README.md

File metadata and controls

161 lines (124 loc) · 3.79 KB

Client Work Tracker

A Next.js dashboard for tracking clients and their associated projects. Monitor project status, access production sites and repositories, and manage client relationships all in one place.

Features

  • Client Management: Track client contact information, company details, and notes
  • Project Tracking: Monitor multiple projects per client with status indicators
  • Status Management: Track projects as Active, Completed, On Hold, or Canceled
  • Quick Access Links: Direct links to production sites and GitHub repositories
  • Real-time Dashboard: Visual overview of all clients and active work
  • Summary Stats: Track total clients, active projects, and completed work
  • Database-Backed: PostgreSQL storage with Drizzle ORM for type-safe queries

Quick Start

Prerequisites

  • Node.js 18+
  • A Neon PostgreSQL database (or any PostgreSQL instance)

Setup

  1. Clone the repository:
git clone https://github.com/patrickmitchellconsulting/client-work-tracker.git
cd client-work-tracker
  1. Install dependencies:
npm install
  1. Set up your environment:
cp .env.example .env

Edit .env and add your database connection string:

DATABASE_URL=postgresql://user:password@host:5432/database
  1. Set up the database:
npm run db:push
  1. Start the development server:
npm run dev
  1. Open http://localhost:3000 in your browser

Usage

Adding Clients

The dashboard displays all clients with their associated projects. Each client card shows:

  • Client name and company
  • Contact information (email, phone)
  • List of associated projects
  • Active status indicator

Project Information

Each project displays:

  • Project name and description
  • Current status (color-coded badge)
  • Links to production site and repository
  • Start date and completion date
  • Notes and additional details

Status Indicators

Projects are color-coded by status:

  • Active (Blue): Currently in development
  • Completed (Green): Successfully delivered
  • On Hold (Yellow): Temporarily paused
  • Canceled (Red): Discontinued

Database Management

View and manage your data using Drizzle Studio:

npm run db:studio

Access the visual database browser at http://localhost:4983

Tech Stack

  • Next.js 16: React framework with App Router
  • TypeScript: Type-safe development
  • Tailwind CSS 4: Utility-first styling
  • Drizzle ORM: Type-safe database queries
  • Neon PostgreSQL: Serverless database
  • @paralleldrive/cuid2: Collision-resistant IDs

Database Schema

Clients Table

{
  id: string (CUID2)
  name: string
  email: string?
  phone: string?
  company: string?
  notes: text?
  isActive: boolean (default: true)
  createdAt: timestamp
  updatedAt: timestamp
}

Projects Table

{
  id: string (CUID2)
  clientId: string (foreign key -> clients.id)
  name: string
  description: text?
  status: string (default: "active")
  productionUrl: string?
  repositoryUrl: string?
  startDate: timestamp?
  completedDate: timestamp?
  notes: text?
  createdAt: timestamp
  updatedAt: timestamp
}

Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run start - Start production server
  • npm run lint - Run ESLint
  • npm run db:generate - Generate Drizzle migrations
  • npm run db:migrate - Run migrations
  • npm run db:push - Push schema changes to database
  • npm run db:studio - Open Drizzle Studio

Development

This project uses:

  • Server Components for optimal performance
  • Server Actions for database mutations (when implemented)
  • Drizzle ORM for type-safe database queries
  • Responsive design with Tailwind CSS
  • PostgreSQL for reliable data persistence

License

MIT