Planning & Architecture

What We're Building

A task management app called Taskflow. Not a toy — a real, deployable application with authentication, a database, a REST API, and a polished frontend. The kind of project that typically takes a week or two of focused work.

We're building it in a weekend using AI-first methodology. Every decision, every component, every test — AI participates. You drive, AI accelerates.

Feature Set

• Projects — Create, rename, archive projects to group related tasks
• Tasks — Full CRUD with title, description, status, priority, due date, assignment
• Kanban board — Drag-and-drop columns: To Do, In Progress, Review, Done
• Filtering & search — By status, priority, assignee, and text search
• Authentication — JWT-based login/register with secure password hashing
• Responsive — Works on desktop and mobile

Tech Stack

We're choosing this stack deliberately: React and TypeScript because they're the dominant frontend combination, Tailwind because it eliminates CSS bikeshedding, Express because it's minimal and fast to set up, and SQLite because it requires zero configuration — no Docker, no database server, just a file. Everything optimized for weekend speed.

The Weekend Schedule

Here's the realistic timeline. Five parts, roughly mapping to five focused sessions. You don't need to follow this exactly — adjust to your pace. The key is the sequence: planning before code, review before moving on.

Step 1: Design the Architecture

We're starting exactly how the AI Programming Manual teaches: design before code. Here's the actual conversation with AI that produces our architecture.

One prompt, and we have a complete architecture. But we're not done — next comes the critique step.

Step 2: Critique the Design

Six issues found in under a minute. Issues 2, 4, 5, and 6 would have become debugging sessions later. By finding them now, we've saved at least an hour of weekend time.

Step 3: The Improved Architecture

Incorporating the critique, here's our validated architecture:

Step 4: Define Milestones

Breaking the build into small, testable milestones. Each milestone produces something you can verify before moving on. This prevents the "everything is half-done" problem.

Total estimated time: ~8 hours of focused work. That's a weekend with breaks. Each milestone is independently verifiable — you know it works before moving on.

Step 5: Define the Types

Before writing any implementation code, we define the TypeScript types. These types become the contract that both frontend and backend must respect — and they're the single most important context to share with AI throughout the build.

// === Entities ===

export interface User {
  id: string;
  email: string;
  name: string;
  created_at: string;
}

export interface Project {
  id: string;
  name: string;
  owner_id: string;
  archived: boolean;
  created_at: string;
}

export type TaskStatus = 'todo' | 'in_progress' | 'review' | 'done';
export type TaskPriority = 'low' | 'medium' | 'high' | 'urgent';

export interface Task {
  id: string;
  project_id: string;
  title: string;
  description: string;
  status: TaskStatus;
  priority: TaskPriority;
  assignee: string | null;
  due_date: string | null;
  position: number;
  completed_at: string | null;
  created_at: string;
  updated_at: string;
}

// === API Request/Response ===

export interface CreateTaskInput {
  title: string;
  description?: string;
  status?: TaskStatus;
  priority?: TaskPriority;
  assignee?: string;
  due_date?: string;
}

export interface UpdateTaskInput {
  title?: string;
  description?: string;
  status?: TaskStatus;
  priority?: TaskPriority;
  assignee?: string | null;
  due_date?: string | null;
}

export interface MoveTaskInput {
  status: TaskStatus;
  position: number;
}

export interface ApiError {
  error: string;
  code: string;
}