Planning & Architecture

Before You Start: Prerequisites

• Time budget: 2-4 focused hours for this part.
• Environment: Node.js 20+ and npm installed.
• Skill level: Comfortable with JavaScript/TypeScript basics and terminal commands.
• AI tooling: Access to your preferred coding assistant (chat or editor-integrated).
• Scope mindset: Build for weekend delivery, not long-term scale.

Assumptions for This Tutorial

• You can run local dev servers and install dependencies without step-by-step onboarding.
• You are okay with pragmatic choices that optimize speed (for example SQLite and minimal infra).
• You will review AI output critically instead of copy-pasting blindly.

What We're Building

A task management app called Taskflow: an example full-stack scope with authentication, a database, a REST API, and a frontend. The tutorial shows a path toward a demo deployment; actual build time and readiness depend on your implementation and verification.

The walkthrough is organized as weekend-sized sessions using AI-assisted methodology. AI can draft decisions, components, and tests; you review the output and own each result.

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 for a typed component workflow, Tailwind to keep styling close to components, Express for a small API surface, and SQLite to avoid operating a separate database server for the tutorial. The choices prioritize a compact example build.

The Weekend Schedule

Here's a suggested sequence. Five parts roughly map to five focused sessions, but the times are planning estimates rather than measured outcomes. Adjust to your pace; the key is planning before code and verification before moving on.

Step 1: Design the Architecture

We're starting exactly how the AI Programming Manual teaches: design before code. The following illustrative exchange produces an architecture draft to critique and refine.

One prompt produces an architecture draft. It is not accepted yet — next comes the critique step.

Step 2: Critique the Design

In this illustrative critique, six potential issues are identified before implementation. Addressing issues such as ordering, deletion behavior, error handling, and CORS early can reduce later debugging, but any time saved depends on your build.

Step 3: The Improved Architecture

Incorporating the illustrative critique, here's the revised architecture draft to validate:

Step 4: Define Milestones

Break the build into small, testable milestones. Each milestone defines something to verify before moving on, which helps avoid carrying too many unfinished flows at once.

Planning estimate: ~8 hours of focused work. Treat it as a scope budget, not a promised completion time. Each milestone defines a check to run 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;
}

Jump to Any Part