Drift - Project Tracker

A lightweight internal project tracker for two collaborators (Joe + Mark) that emphasizes honest progress tracking through deadlines, milestones, wins, losses, and drift detection — without becoming a complex project management tool.

Optimized for 60-second daily usage.

Features

• Today Dashboard — Shows overdue items, upcoming deadlines, drifting projects (no activity in 3+ days), and recent wins/losses at a glance.
• Project Management — Create and track projects with next actions. Each project shows a progress bar based on completed actions.
• Daily Check-in — A focused form to log wins, losses, and next steps. Takes under a minute.
• Drift Detection — Projects with no completed actions or check-ins in N days are flagged as "drifting" on the dashboard.
• Activity Log — Recent check-ins from both users are displayed on the dashboard for shared visibility.

Tech Stack

• Frontend: React, Tailwind CSS v4, shadcn/ui, wouter, TanStack Query
• Backend: Node.js, Express
• Database: PostgreSQL or SQLite with Drizzle ORM
• Language: TypeScript

Getting Started

Prerequisites

• Node.js 20+

Install Dependencies

npm install

Database Setup

Option 1: PostgreSQL (Replit/Production)

export DATABASE_URL=postgresql://...
npm run db:push

Option 2: SQLite (Local Development) The app will automatically use SQLite if DATABASE_URL is not set.

Run Development Server

npm run dev

The app will be available at http://localhost:5000.

Project Structure

├── client/               # React frontend
│   └── src/
│       ├── components/   # Shared UI components
│       ├── pages/       # Route pages (Dashboard, Projects, CheckIn, Login)
│       ├── hooks/       # Custom React hooks
│       └── lib/         # Query client and utilities
├── server/              # Express backend
│   ├── index.ts        # Server entry point
│   ├── routes.ts       # API route definitions
│   ├── storage.ts     # Database storage interface
│   ├── seed.ts        # Seeds Joe and Mark user accounts
│   ├── db.ts          # Database connection
│   ├── rateLimit.ts   # Rate limiting middleware
│   └── sanitize.ts    # Input sanitization
└── shared/
    └── schema.ts      # Drizzle schema (users, projects, actions, check_ins)

Authentication

This app uses API key authentication. On login, users receive an API key that must be included in requests:

X-API-Key: <your-api-key>

API Endpoints

Authentication

Method	Path	Description
POST	/api/auth/login	Login and receive API key
GET	/api/auth/me	Get current user info (requires auth)

Users

Method	Path	Description
GET	/api/users	List all users
GET	/api/users/:id	Get user by ID (requires auth)

Projects

Method	Path	Description
GET	/api/projects	List all projects
POST	/api/projects	Create a project (requires auth)
PATCH	/api/projects/:id	Update a project (requires auth)

Actions

Method	Path	Description
GET	/api/actions	List all actions
GET	/api/actions/:projectId	List actions by project
POST	/api/actions	Create an action (requires auth)
PATCH	/api/actions/:id/toggle	Toggle action completion (requires auth)

Check-ins

Method	Path	Description
GET	/api/check-ins	List all check-ins
POST	/api/check-ins	Create a check-in (requires auth)

Dashboard

Method	Path	Description
GET	/api/dashboard	Aggregated dashboard data

Design

• Clean, card-based layout with generous whitespace
• Inter font throughout
• Color palette: Slate (#2D3748), Calm Blue (#4299E1), Green (#48BB78), Orange (#ED8936), Red (#F56565)
• Inspired by Basecamp and Linear's minimalist approach