🚀 Module 10 Capstone Project: Full-Stack SaaS Platform

📋 Project Requirements

TaskFlow Pro is a modern project management platform designed to help teams organize work, track progress, and collaborate effectively. Think of it as a blend of Trello, Asana, and Linear with your own unique touches.

🎯 What You're Building

✅ Minimum Viable Product (MVP) Requirements

🌟 Bonus Features (Choose 2-3)

🚫 What NOT to Build (Keep It Focused)

🎨 Core Features Overview

Let's break down each major feature area and what it should include.

🔐 Authentication & User Management

// Types for authentication
interface User {
  id: string;
  email: string;
  name: string;
  avatar?: string;
  createdAt: Date;
  emailVerified: boolean;
}

interface AuthState {
  user: User | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  error: string | null;
}

// Features to implement:
// - Registration form with validation
// - Email verification flow
// - Login with remember me option
// - Password reset via email
// - Profile management page
// - Avatar upload
// - Account settings

👥 Workspace & Team Management

interface Workspace {
  id: string;
  name: string;
  description?: string;
  ownerId: string;
  members: WorkspaceMember[];
  createdAt: Date;
  updatedAt: Date;
}

interface WorkspaceMember {
  userId: string;
  role: 'owner' | 'admin' | 'member' | 'viewer';
  joinedAt: Date;
}

// Features to implement:
// - Create workspace wizard
// - Workspace settings page
// - Invite members via email
// - Member management table
// - Role-based permissions system
// - Leave/delete workspace functionality

📊 Project & Board Management

interface Project {
  id: string;
  workspaceId: string;
  name: string;
  description?: string;
  color?: string;
  status: 'active' | 'archived' | 'completed';
  lists: List[];
  createdAt: Date;
  updatedAt: Date;
}

interface List {
  id: string;
  projectId: string;
  title: string;
  position: number;
  tasks: Task[];
}

interface Task {
  id: string;
  listId: string;
  title: string;
  description?: string;
  assigneeId?: string;
  dueDate?: Date;
  priority: 'low' | 'medium' | 'high' | 'urgent';
  status: 'todo' | 'in-progress' | 'review' | 'done';
  labels?: string[];
  position: number;
  createdAt: Date;
  updatedAt: Date;
}

// Features to implement:
// - Kanban board with drag-and-drop
// - Quick task creation
// - Task detail modal/sidebar
// - Task assignment dropdown
// - Due date picker with calendar
// - Priority indicators
// - Progress tracking

💬 Comments & Activity

interface Comment {
  id: string;
  taskId: string;
  authorId: string;
  content: string;
  mentions?: string[];  // User IDs mentioned
  createdAt: Date;
  updatedAt: Date;
}

interface Activity {
  id: string;
  workspaceId: string;
  userId: string;
  type: 'task_created' | 'task_updated' | 'comment_added' | 'member_added';
  entityId: string;
  metadata: Record;
  createdAt: Date;
}

// Features to implement:
// - Comment thread on tasks
// - @mention functionality
// - Activity feed timeline
// - Notification system
// - Real-time updates

📈 Analytics & Reporting

interface Analytics {
  projectId: string;
  completionRate: number;
  totalTasks: number;
  completedTasks: number;
  overdueTasks: number;
  tasksByStatus: Record;
  tasksByPriority: Record;
  memberProductivity: {
    userId: string;
    tasksCompleted: number;
    tasksInProgress: number;
  }[];
}

// Features to implement:
// - Dashboard with key metrics cards
// - Completion rate chart (line/area)
// - Task distribution pie/donut chart
// - Team productivity bar chart
// - Filter by date range
// - Export to CSV

🏗️ Technical Architecture

Let's design the technical foundation for your application.

📦 Tech Stack Requirements

🗂️ Folder Structure

taskflow-pro/
├── src/
│   ├── assets/              # Images, icons, fonts
│   ├── components/
│   │   ├── auth/           # Login, Register, ResetPassword
│   │   ├── board/          # Kanban board components
│   │   ├── common/         # Button, Modal, Input, etc.
│   │   ├── dashboard/      # Dashboard widgets
│   │   ├── layout/         # Header, Sidebar, Footer
│   │   ├── tasks/          # TaskCard, TaskDetail, TaskForm
│   │   └── workspace/      # Workspace components
│   ├── features/           # Feature-based organization
│   │   ├── auth/
│   │   │   ├── authSlice.ts
│   │   │   ├── authAPI.ts
│   │   │   └── authHooks.ts
│   │   ├── projects/
│   │   ├── tasks/
│   │   └── workspaces/
│   ├── hooks/              # Custom React hooks
│   │   ├── useAuth.ts
│   │   ├── useDebounce.ts
│   │   ├── useLocalStorage.ts
│   │   └── useRealtime.ts
│   ├── lib/                # Third-party configs
│   │   ├── firebase.ts
│   │   ├── queryClient.ts
│   │   └── store.ts
│   ├── pages/              # Page components
│   │   ├── Dashboard.tsx
│   │   ├── Login.tsx
│   │   ├── Project.tsx
│   │   └── Workspace.tsx
│   ├── services/           # API services
│   │   ├── api.ts
│   │   ├── auth.service.ts
│   │   ├── project.service.ts
│   │   └── task.service.ts
│   ├── types/              # TypeScript types
│   │   ├── auth.types.ts
│   │   ├── project.types.ts
│   │   └── task.types.ts
│   ├── utils/              # Utility functions
│   │   ├── date.ts
│   │   ├── validation.ts
│   │   └── formatters.ts
│   ├── App.tsx
│   ├── main.tsx
│   └── router.tsx
├── public/
├── tests/
│   ├── components/
│   ├── integration/
│   └── utils/
├── .env.example
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

🔄 Data Flow Architecture

🔒 Authentication Flow

🏗️ Phase 1: Foundation & Setup (4-6 hours)

Start by setting up your development environment and creating the basic project structure.

✅ Phase 1 Checklist

📝 Step-by-Step Setup

Step 1: Create Project

# Create Vite project with React + TypeScript
npm create vite@latest taskflow-pro -- --template react-ts
cd taskflow-pro

# Install dependencies
npm install

# Install additional packages
npm install react-router-dom @tanstack/react-query
npm install @reduxjs/toolkit react-redux  # OR zustand
npm install react-hook-form zod @hookform/resolvers
npm install @dnd-kit/core @dnd-kit/sortable
npm install recharts date-fns
npm install firebase  # OR @supabase/supabase-js

# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Install dev dependencies
npm install -D @types/node
npm install -D vitest @testing-library/react @testing-library/jest-dom
npm install -D msw  # for mocking APIs

Step 2: Configure Tailwind CSS

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f4ff',
          100: '#e0e9ff',
          200: '#c7d7fe',
          300: '#a5b8fc',
          400: '#8192f8',
          500: '#667eea',  // Main brand color
          600: '#5b6cd6',
          700: '#4f58b3',
          800: '#434990',
          900: '#3a3d76',
        },
        // Add more custom colors for your app
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
  darkMode: 'class',  // Enable dark mode
};

Step 3: Set Up Router

// src/router.tsx
import { createBrowserRouter, Navigate } from 'react-router-dom';
import { RootLayout } from './components/layout/RootLayout';
import { AuthLayout } from './components/layout/AuthLayout';
import { ProtectedRoute } from './components/auth/ProtectedRoute';

// Page imports
import { LandingPage } from './pages/Landing';
import { LoginPage } from './pages/Login';
import { RegisterPage } from './pages/Register';
import { DashboardPage } from './pages/Dashboard';
import { WorkspacePage } from './pages/Workspace';
import { ProjectPage } from './pages/Project';
import { AnalyticsPage } from './pages/Analytics';
import { SettingsPage } from './pages/Settings';
import { NotFoundPage } from './pages/NotFound';

export const router = createBrowserRouter([
  {
    path: '/',
    element: ,
    children: [
      {
        index: true,
        element: ,
      },
      {
        path: 'auth',
        element: ,
        children: [
          { path: 'login', element:  },
          { path: 'register', element:  },
          { path: 'reset-password', element:  },
        ],
      },
      {
        path: 'app',
        element: ,
        children: [
          { path: 'dashboard', element:  },
          { path: 'workspace/:workspaceId', element:  },
          { path: 'project/:projectId', element:  },
          { path: 'analytics', element:  },
          { path: 'settings', element:  },
        ],
      },
      {
        path: '*',
        element: ,
      },
    ],
  },
]);

Step 4: Create TypeScript Types

// src/types/index.ts

// User types
export interface User {
  id: string;
  email: string;
  name: string;
  avatar?: string;
  createdAt: Date;
  emailVerified: boolean;
}

// Workspace types
export interface Workspace {
  id: string;
  name: string;
  description?: string;
  ownerId: string;
  members: WorkspaceMember[];
  createdAt: Date;
  updatedAt: Date;
}

export interface WorkspaceMember {
  userId: string;
  role: WorkspaceRole;
  joinedAt: Date;
}

export type WorkspaceRole = 'owner' | 'admin' | 'member' | 'viewer';

// Project types
export interface Project {
  id: string;
  workspaceId: string;
  name: string;
  description?: string;
  color?: string;
  status: ProjectStatus;
  lists: List[];
  createdAt: Date;
  updatedAt: Date;
}

export type ProjectStatus = 'active' | 'archived' | 'completed';

// Task types
export interface Task {
  id: string;
  listId: string;
  title: string;
  description?: string;
  assigneeId?: string;
  dueDate?: Date;
  priority: TaskPriority;
  status: TaskStatus;
  labels?: string[];
  position: number;
  createdAt: Date;
  updatedAt: Date;
}

export type TaskPriority = 'low' | 'medium' | 'high' | 'urgent';
export type TaskStatus = 'todo' | 'in-progress' | 'review' | 'done';

// List types
export interface List {
  id: string;
  projectId: string;
  title: string;
  position: number;
  tasks: Task[];
}

// Comment types
export interface Comment {
  id: string;
  taskId: string;
  authorId: string;
  content: string;
  mentions?: string[];
  createdAt: Date;
  updatedAt: Date;
}

// Activity types
export interface Activity {
  id: string;
  workspaceId: string;
  userId: string;
  type: ActivityType;
  entityId: string;
  metadata: Record;
  createdAt: Date;
}

export type ActivityType = 
  | 'task_created'
  | 'task_updated'
  | 'task_completed'
  | 'task_deleted'
  | 'comment_added'
  | 'member_added'
  | 'member_removed'
  | 'project_created';

VITE_FIREBASE_API_KEY=your_api_key_here
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123456789:web:abc123

✅ Phase 1 Completion Criteria

🔐 Phase 2: Authentication & User Management (6-8 hours)

Build a complete authentication system with registration, login, password reset, and protected routes.

✅ Phase 2 Checklist

📝 Implementation Guide

Authentication Service

// src/services/auth.service.ts
import { 
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  sendEmailVerification,
  sendPasswordResetEmail,
  updateProfile,
  User as FirebaseUser
} from 'firebase/auth';
import { auth } from '../lib/firebase';
import type { User } from '../types';

class AuthService {
  async register(email: string, password: string, name: string): Promise {
    const userCredential = await createUserWithEmailAndPassword(
      auth,
      email,
      password
    );
    
    await updateProfile(userCredential.user, { displayName: name });
    await sendEmailVerification(userCredential.user);
    
    return this.mapFirebaseUser(userCredential.user);
  }

  async login(email: string, password: string): Promise {
    const userCredential = await signInWithEmailAndPassword(
      auth,
      email,
      password
    );
    return this.mapFirebaseUser(userCredential.user);
  }

  async logout(): Promise {
    await signOut(auth);
  }

  async resetPassword(email: string): Promise {
    await sendPasswordResetEmail(auth, email);
  }

  async verifyEmail(): Promise {
    const user = auth.currentUser;
    if (user) {
      await sendEmailVerification(user);
    }
  }

  getCurrentUser(): User | null {
    const firebaseUser = auth.currentUser;
    return firebaseUser ? this.mapFirebaseUser(firebaseUser) : null;
  }

  private mapFirebaseUser(firebaseUser: FirebaseUser): User {
    return {
      id: firebaseUser.uid,
      email: firebaseUser.email!,
      name: firebaseUser.displayName || '',
      avatar: firebaseUser.photoURL || undefined,
      createdAt: new Date(firebaseUser.metadata.creationTime!),
      emailVerified: firebaseUser.emailVerified,
    };
  }
}

export const authService = new AuthService();

Registration Form Component

// src/components/auth/RegisterForm.tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useNavigate } from 'react-router-dom';
import { authService } from '../../services/auth.service';

const registerSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'Password must be at least 8 characters')
    .regex(/[A-Z]/, 'Password must contain an uppercase letter')
    .regex(/[0-9]/, 'Password must contain a number'),
  confirmPassword: z.string(),
}).refine((data) => data.password === data.confirmPassword, {
  message: "Passwords don't match",
  path: ['confirmPassword'],
});

type RegisterFormData = z.infer;

export function RegisterForm() {
  const navigate = useNavigate();
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    setError,
  } = useForm({
    resolver: zodResolver(registerSchema),
  });

  const onSubmit = async (data: RegisterFormData) => {
    try {
      await authService.register(data.email, data.password, data.name);
      // Show success message about email verification
      navigate('/auth/verify-email');
    } catch (error: any) {
      setError('root', {
        message: error.message || 'Failed to create account',
      });
    }
  };

  return (
    

      

        
          Full Name
        
        
        {errors.name && (
          
{errors.name.message}
        )}
      

      

        
          Email
        
        
        {errors.email && (
          
{errors.email.message}
        )}
      

      

        
          Password
        
        
        {errors.password && (
          
{errors.password.message}
        )}
      

      

        
          Confirm Password
        
        
        {errors.confirmPassword && (
          

            {errors.confirmPassword.message}
          
        )}
      

      {errors.root && (
        

          
{errors.root.message}
        
      )}

      
        {isSubmitting ? 'Creating account...' : 'Create Account'}
      
    
  );
}

Protected Route Component

// src/components/auth/ProtectedRoute.tsx
import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';
import { LoadingSpinner } from '../common/LoadingSpinner';

export function ProtectedRoute() {
  const { user, isLoading } = useAuth();

  if (isLoading) {
    return (
      

        
      
    );
  }

  if (!user) {
    return ;
  }

  if (!user.emailVerified) {
    return ;
  }

  return ;
}

✅ Phase 2 Completion Criteria

📊 Phase 3: Core Features (10-12 hours)

Build the heart of your application: workspaces, projects, and the Kanban board with drag-and-drop functionality.

✅ Phase 3 Checklist

🏢 Workspace Management Implementation

Workspace Creation Form

// src/components/workspace/CreateWorkspaceForm.tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { workspaceService } from '../../services/workspace.service';

const workspaceSchema = z.object({
  name: z.string()
    .min(3, 'Name must be at least 3 characters')
    .max(50, 'Name must be less than 50 characters'),
  description: z.string()
    .max(500, 'Description must be less than 500 characters')
    .optional(),
});

type WorkspaceFormData = z.infer;

interface CreateWorkspaceFormProps {
  onSuccess?: (workspaceId: string) => void;
  onCancel?: () => void;
}

export function CreateWorkspaceForm({ onSuccess, onCancel }: CreateWorkspaceFormProps) {
  const queryClient = useQueryClient();
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(workspaceSchema),
  });

  const createMutation = useMutation({
    mutationFn: workspaceService.create,
    onSuccess: (workspace) => {
      queryClient.invalidateQueries({ queryKey: ['workspaces'] });
      onSuccess?.(workspace.id);
    },
  });

  const onSubmit = (data: WorkspaceFormData) => {
    createMutation.mutate(data);
  };

  return (
    

      

        
          Workspace Name
        
        
        {errors.name && (
          
{errors.name.message}
        )}
      

      

        
          Description (optional)
        
                {errors.description && (
          <p className="mt-1 text-sm text-red-600">{errors.description.message}</p>
        )}
      </div>

      {createMutation.error && (
        <div className="rounded-md bg-red-50 p-4">
          <p className="text-sm text-red-800">
            {createMutation.error.message || 'Failed to create workspace'}
          </p>
        </div>
      )}

      <div className="flex justify-end space-x-3">
        {onCancel && (
          <button
            type="button"
            onClick={onCancel}
            className="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
          >
            Cancel
          </button>
        )}
        <button
          type="submit"
          disabled={createMutation.isPending}
          className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50"
        >
          {createMutation.isPending ? 'Creating...' : 'Create Workspace'}
        </button>
      </div>
    </form>
  );
}
</code></pre>

                <h4>Member Invitation System</h4>

<pre><code class="language-typescript">// src/components/workspace/InviteMemberForm.tsx
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { workspaceService } from '../../services/workspace.service';
import type { WorkspaceRole } from '../../types';

const inviteSchema = z.object({
  email: z.string().email('Invalid email address'),
  role: z.enum(['admin', 'member', 'viewer']),
});

type InviteFormData = z.infer<typeof inviteSchema>;

interface InviteMemberFormProps {
  workspaceId: string;
  onSuccess?: () => void;
}

export function InviteMemberForm({ workspaceId, onSuccess }: InviteMemberFormProps) {
  const queryClient = useQueryClient();
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<InviteFormData>({
    resolver: zodResolver(inviteSchema),
    defaultValues: { role: 'member' },
  });

  const inviteMutation = useMutation({
    mutationFn: (data: InviteFormData) =>
      workspaceService.inviteMember(workspaceId, data.email, data.role),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['workspace', workspaceId] });
      reset();
      onSuccess?.();
    },
  });

  const onSubmit = (data: InviteFormData) => {
    inviteMutation.mutate(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <label htmlFor="email" className="block text-sm font-medium text-gray-700">
          Email Address
        </label>
        <input
          {...register('email')}
          type="email"
          id="email"
          placeholder="colleague@example.com"
          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
        />
        {errors.email && (
          <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
        )}
      </div>

      <div>
        <label htmlFor="role" className="block text-sm font-medium text-gray-700">
          Role
        </label>
        <select
          {...register('role')}
          id="role"
          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2"
        >
          <option value="viewer">Viewer - Can view projects</option>
          <option value="member">Member - Can create and edit</option>
          <option value="admin">Admin - Full permissions</option>
        </select>
      </div>

      <button
        type="submit"
        disabled={inviteMutation.isPending}
        className="w-full rounded-md bg-primary-600 px-4 py-2 text-white hover:bg-primary-700 disabled:opacity-50"
      >
        {inviteMutation.isPending ? 'Sending...' : 'Send Invitation'}
      </button>
    </form>
  );
}
</code></pre>

                <h3>📋 Kanban Board Implementation</h3>

                <h4>Board Layout Component</h4>

<pre><code class="language-typescript">// src/components/board/KanbanBoard.tsx
import { useState } from 'react';
import {
  DndContext,
  DragOverlay,
  closestCorners,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragStartEvent,
  DragOverEvent,
  DragEndEvent,
} from '@dnd-kit/core';
import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import { BoardList } from './BoardList';
import { TaskCard } from './TaskCard';
import type { Project, List, Task } from '../../types';

interface KanbanBoardProps {
  project: Project;
  onUpdateProject: (project: Project) => void;
}

export function KanbanBoard({ project, onUpdateProject }: KanbanBoardProps) {
  const [activeTask, setActiveTask] = useState<Task | null>(null);
  
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  const handleDragStart = (event: DragStartEvent) => {
    const { active } = event;
    const task = findTask(active.id as string);
    setActiveTask(task);
  };

  const handleDragOver = (event: DragOverEvent) => {
    const { active, over } = event;
    if (!over) return;

    const activeId = active.id as string;
    const overId = over.id as string;

    if (activeId === overId) return;

    // Find which lists contain the tasks
    const activeList = findListByTaskId(activeId);
    const overList = findListByTaskId(overId) || findListById(overId);

    if (!activeList || !overList) return;

    // Handle moving task between lists
    if (activeList.id !== overList.id) {
      moveTaskBetweenLists(activeId, activeList.id, overList.id);
    }
  };

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    setActiveTask(null);

    if (!over) return;

    const activeId = active.id as string;
    const overId = over.id as string;

    if (activeId === overId) return;

    const activeList = findListByTaskId(activeId);
    if (!activeList) return;

    // Reorder tasks within the same list
    const oldIndex = activeList.tasks.findIndex((task) => task.id === activeId);
    const newIndex = activeList.tasks.findIndex((task) => task.id === overId);

    if (oldIndex !== -1 && newIndex !== -1) {
      const newTasks = arrayMove(activeList.tasks, oldIndex, newIndex);
      updateListTasks(activeList.id, newTasks);
    }
  };

  const findTask = (taskId: string): Task | null => {
    for (const list of project.lists) {
      const task = list.tasks.find((t) => t.id === taskId);
      if (task) return task;
    }
    return null;
  };

  const findListByTaskId = (taskId: string): List | null => {
    return project.lists.find((list) =>
      list.tasks.some((task) => task.id === taskId)
    ) || null;
  };

  const findListById = (listId: string): List | null => {
    return project.lists.find((list) => list.id === listId) || null;
  };

  const moveTaskBetweenLists = (
    taskId: string,
    fromListId: string,
    toListId: string
  ) => {
    const updatedLists = project.lists.map((list) => {
      if (list.id === fromListId) {
        return {
          ...list,
          tasks: list.tasks.filter((task) => task.id !== taskId),
        };
      }
      if (list.id === toListId) {
        const task = findTask(taskId);
        return task
          ? { ...list, tasks: [...list.tasks, task] }
          : list;
      }
      return list;
    });

    onUpdateProject({ ...project, lists: updatedLists });
  };

  const updateListTasks = (listId: string, newTasks: Task[]) => {
    const updatedLists = project.lists.map((list) =>
      list.id === listId ? { ...list, tasks: newTasks } : list
    );
    onUpdateProject({ ...project, lists: updatedLists });
  };

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragStart={handleDragStart}
      onDragOver={handleDragOver}
      onDragEnd={handleDragEnd}
    >
      <div className="flex h-full gap-4 overflow-x-auto p-4">
        {project.lists.map((list) => (
          <BoardList key={list.id} list={list} />
        ))}
      </div>

      <DragOverlay>
        {activeTask ? <TaskCard task={activeTask} /> : null}
      </DragOverlay>
    </DndContext>
  );
}
</code></pre>

                <h4>Task Card Component</h4>

<pre><code class="language-typescript">// src/components/board/TaskCard.tsx
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { format } from 'date-fns';
import type { Task } from '../../types';

interface TaskCardProps {
  task: Task;
  onClick?: () => void;
}

export function TaskCard({ task, onClick }: TaskCardProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: task.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  const priorityColors = {
    low: 'bg-gray-100 text-gray-800',
    medium: 'bg-blue-100 text-blue-800',
    high: 'bg-orange-100 text-orange-800',
    urgent: 'bg-red-100 text-red-800',
  };

  const isOverdue = task.dueDate && new Date(task.dueDate) < new Date();

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      onClick={onClick}
      className="group cursor-pointer rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md"
    >
      <div className="flex items-start justify-between">
        <h4 className="flex-1 text-sm font-medium text-gray-900">
          {task.title}
        </h4>
        <span
          className={`ml-2 rounded-full px-2 py-1 text-xs font-medium ${
            priorityColors[task.priority]
          }`}
        >
          {task.priority}
        </span>
      </div>

      {task.description && (
        <p className="mt-2 line-clamp-2 text-sm text-gray-600">
          {task.description}
        </p>
      )}

      <div className="mt-3 flex items-center justify-between">
        {task.dueDate && (
          <div
            className={`flex items-center text-xs ${
              isOverdue ? 'text-red-600' : 'text-gray-500'
            }`}
          >
            <svg
              className="mr-1 h-4 w-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
            {format(new Date(task.dueDate), 'MMM d')}
          </div>
        )}

        {task.assigneeId && (
          <div className="flex items-center">
            <div className="h-6 w-6 rounded-full bg-primary-100 flex items-center justify-center text-xs font-medium text-primary-800">
              {/* Replace with actual avatar */}
              JD
            </div>
          </div>
        )}
      </div>

      {task.labels && task.labels.length > 0 && (
        <div className="mt-2 flex flex-wrap gap-1">
          {task.labels.map((label) => (
            <span
              key={label}
              className="rounded-full bg-gray-100 px-2 py-1 text-xs text-gray-700"
            >
              {label}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}
</code></pre>

                <div class="card" style="background: #e3f2fd; border-left: 4px solid #2196F3;">
                    <h4>💡 Drag & Drop Best Practices</h4>
                    <ul>
                        <li><strong>Keyboard Accessibility:</strong> Ensure keyboard users can reorder tasks</li>
                        <li><strong>Visual Feedback:</strong> Show clear drop zones and drag previews</li>
                        <li><strong>Touch Support:</strong> Test on mobile devices for touch gestures</li>
                        <li><strong>Optimistic Updates:</strong> Update UI immediately, sync with backend after</li>
                        <li><strong>Error Handling:</strong> Revert changes if backend sync fails</li>
                        <li><strong>Performance:</strong> Virtualize long lists to maintain smooth dragging</li>
                    </ul>
                </div>

                <h3>✅ Phase 3 Completion Criteria</h3>

                <div class="card" style="background: #e8f5e9; border-left: 4px solid #4CAF50;">
                    <h4>Before Moving to Phase 4</h4>
                    <ul>
                        <li>✅ Users can create and manage workspaces</li>
                        <li>✅ Workspace members can be invited via email</li>
                        <li>✅ Role-based permissions work correctly</li>
                        <li>✅ Projects can be created within workspaces</li>
                        <li>✅ Kanban board displays with multiple lists</li>
                        <li>✅ Tasks can be dragged between lists</li>
                        <li>✅ Tasks can be reordered within lists</li>
                        <li>✅ Quick task creation works</li>
                        <li>✅ Task detail view shows all information</li>
                        <li>✅ Tasks can be assigned to members</li>
                        <li>✅ Due dates can be set and displayed</li>
                        <li>✅ Priority indicators are visible</li>
                        <li>✅ Task filtering and search work</li>
                        <li>✅ All CRUD operations persist to backend</li>
                    </ul>
                </div>
            </section>

            <!-- Section 7: Phase 4 - Advanced Features -->
            <section id="phase-4" aria-labelledby="phase-4-heading">
                <h2 id="phase-4-heading">⚡ Phase 4: Advanced Features (8-10 hours)</h2>
                
                <p>Add real-time updates, comments, notifications, and analytics to create a truly collaborative experience.</p>

                <h3>✅ Phase 4 Checklist</h3>

                <div class="card" style="background: #e8f5e9; border-left: 4px solid #4CAF50;">
                    <h4>Tasks to Complete</h4>
                    <ol>
                        <li>Implement real-time task updates (WebSocket or polling)</li>
                        <li>Create notification system for mentions and assignments</li>
                        <li>Build comment thread component</li>
                        <li>Add @mention functionality in comments</li>
                        <li>Create activity feed showing workspace changes</li>
                        <li>Build analytics dashboard with charts</li>
                        <li>Implement completion rate visualization</li>
                        <li>Create team productivity metrics</li>
                        <li>Add task distribution charts (by status, priority)</li>
                        <li>Implement file upload for task attachments</li>
                        <li>Create custom labels/tags system</li>
                        <li>Add time tracking features (optional)</li>
                    </ol>
                </div>

                <h3>🔄 Real-Time Updates Implementation</h3>

                <h4>Real-Time Hook with Firebase</h4>

<pre><code class="language-typescript">// src/hooks/useRealtime.ts
import { useEffect } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { onSnapshot, doc, collection } from 'firebase/firestore';
import { db } from '../lib/firebase';
import type { Task, Project } from '../types';

export function useRealtimeProject(projectId: string) {
  const queryClient = useQueryClient();

  useEffect(() => {
    // Subscribe to project document changes
    const unsubscribe = onSnapshot(
      doc(db, 'projects', projectId),
      (snapshot) => {
        if (snapshot.exists()) {
          const project = {
            id: snapshot.id,
            ...snapshot.data(),
          } as Project;

          // Update React Query cache
          queryClient.setQueryData(['project', projectId], project);
        }
      },
      (error) => {
        console.error('Real-time subscription error:', error);
      }
    );

    // Cleanup subscription on unmount
    return () => unsubscribe();
  }, [projectId, queryClient]);
}

export function useRealtimeTasks(projectId: string) {
  const queryClient = useQueryClient();

  useEffect(() => {
    // Subscribe to tasks collection changes
    const unsubscribe = onSnapshot(
      collection(db, 'projects', projectId, 'tasks'),
      (snapshot) => {
        const tasks: Task[] = [];
        snapshot.forEach((doc) => {
          tasks.push({ id: doc.id, ...doc.data() } as Task);
        });

        // Update cache with new tasks
        queryClient.setQueryData(['tasks', projectId], tasks);

        // Show toast notification for changes made by others
        snapshot.docChanges().forEach((change) => {
          if (change.type === 'added') {
            // Show "New task added" notification
          } else if (change.type === 'modified') {
            // Show "Task updated" notification
          }
        });
      }
    );

    return () => unsubscribe();
  }, [projectId, queryClient]);
}
</code></pre>

                <h4>Notification System</h4>

<pre><code class="language-typescript">// src/components/notifications/NotificationCenter.tsx
import { useQuery } from '@tanstack/react-query';
import { notificationService } from '../../services/notification.service';
import { formatDistanceToNow } from 'date-fns';
import type { Notification } from '../../types';

export function NotificationCenter() {
  const { data: notifications, isLoading } = useQuery({
    queryKey: ['notifications'],
    queryFn: notificationService.getAll,
  });

  const unreadCount = notifications?.filter((n) => !n.read).length || 0;

  const getNotificationIcon = (type: Notification['type']) => {
    switch (type) {
      case 'task_assigned':
        return '📋';
      case 'mention':
        return '@';
      case 'task_completed':
        return '✅';
      case 'comment':
        return '💬';
      default:
        return '🔔';
    }
  };

  return (
    <div className="relative">
      <button className="relative rounded-lg p-2 hover:bg-gray-100">
        <svg
          className="h-6 w-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
          />
        </svg>
        {unreadCount > 0 && (
          <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-600 text-xs text-white">
            {unreadCount}
          </span>
        )}
      </button>

      {/* Notification dropdown */}
      <div className="absolute right-0 mt-2 w-80 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
        <div className="p-4">
          <h3 className="text-lg font-semibold">Notifications</h3>
        </div>
        <div className="max-h-96 overflow-y-auto">
          {isLoading ? (
            <div className="p-4 text-center text-gray-500">Loading...</div>
          ) : notifications?.length === 0 ? (
            <div className="p-4 text-center text-gray-500">
              No notifications
            </div>
          ) : (
            notifications?.map((notification) => (
              <div
                key={notification.id}
                className={`border-b border-gray-100 p-4 hover:bg-gray-50 ${
                  !notification.read ? 'bg-blue-50' : ''
                }`}
              >
                <div className="flex items-start">
                  <span className="text-2xl">
                    {getNotificationIcon(notification.type)}
                  </span>
                  <div className="ml-3 flex-1">
                    <p className="text-sm text-gray-900">
                      {notification.message}
                    </p>
                    <p className="mt-1 text-xs text-gray-500">
                      {formatDistanceToNow(new Date(notification.createdAt), {
                        addSuffix: true,
                      })}
                    </p>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
}
</code></pre>

                <h3>💬 Comments System</h3>

<pre><code class="language-typescript">// src/components/task/CommentThread.tsx
import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { commentService } from '../../services/comment.service';
import { formatDistanceToNow } from 'date-fns';
import type { Comment } from '../../types';

interface CommentThreadProps {
  taskId: string;
}

export function CommentThread({ taskId }: CommentThreadProps) {
  const queryClient = useQueryClient();
  const [showInput, setShowInput] = useState(false);

  const { data: comments, isLoading } = useQuery({
    queryKey: ['comments', taskId],
    queryFn: () => commentService.getByTaskId(taskId),
  });

  const { register, handleSubmit, reset } = useForm<{ content: string }>();

  const addCommentMutation = useMutation({
    mutationFn: (content: string) =>
      commentService.create(taskId, content),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['comments', taskId] });
      reset();
      setShowInput(false);
    },
  });

  const onSubmit = (data: { content: string }) => {
    addCommentMutation.mutate(data.content);
  };

  // Parse @mentions in comment content
  const renderCommentContent = (content: string) => {
    const mentionRegex = /@(\w+)/g;
    const parts = content.split(mentionRegex);

    return parts.map((part, index) => {
      if (index % 2 === 1) {
        // This is a mention
        return (
          <span key={index} className="text-primary-600 font-medium">
            @{part}
          </span>
        );
      }
      return part;
    });
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold">
          Comments ({comments?.length || 0})
        </h3>
        {!showInput && (
          <button
            onClick={() => setShowInput(true)}
            className="text-sm text-primary-600 hover:text-primary-700"
          >
            Add Comment
          </button>
        )}
      </div>

      {showInput && (
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
          <textarea
            {...register('content', { required: true })}
            rows={3}
            placeholder="Write a comment... Use @ to mention someone"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
          />
          <div className="flex justify-end space-x-2">
            <button
              type="button"
              onClick={() => {
                setShowInput(false);
                reset();
              }}
              className="rounded-md px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={addCommentMutation.isPending}
              className="rounded-md bg-primary-600 px-4 py-2 text-sm text-white hover:bg-primary-700 disabled:opacity-50"
            >
              {addCommentMutation.isPending ? 'Posting...' : 'Post Comment'}
            </button>
          </div>
        </form>
      )}

      <div className="space-y-3">
        {isLoading ? (
          <p className="text-center text-gray-500">Loading comments...</p>
        ) : comments?.length === 0 ? (
          <p className="text-center text-gray-500">No comments yet</p>
        ) : (
          comments?.map((comment) => (
            <div key={comment.id} className="rounded-lg bg-gray-50 p-3">
              <div className="flex items-start justify-between">
                <div className="flex items-center space-x-2">
                  <div className="h-8 w-8 rounded-full bg-primary-100 flex items-center justify-center">
                    <span className="text-xs font-medium text-primary-800">
                      {/* Avatar or initials */}
                      JD
                    </span>
                  </div>
                  <div>
                    <p className="text-sm font-medium">John Doe</p>
                    <p className="text-xs text-gray-500">
                      {formatDistanceToNow(new Date(comment.createdAt), {
                        addSuffix: true,
                      })}
                    </p>
                  </div>
                </div>
              </div>
              <p className="mt-2 text-sm text-gray-700">
                {renderCommentContent(comment.content)}
              </p>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
</code></pre>

                <h3>📊 Analytics Dashboard</h3>

<pre><code class="language-typescript">// src/components/analytics/AnalyticsDashboard.tsx
import { useQuery } from '@tanstack/react-query';
import {
  LineChart,
  Line,
  PieChart,
  Pie,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Cell,
} from 'recharts';
import { analyticsService } from '../../services/analytics.service';

interface AnalyticsDashboardProps {
  workspaceId: string;
  projectId?: string;
}

export function AnalyticsDashboard({ workspaceId, projectId }: AnalyticsDashboardProps) {
  const { data: analytics, isLoading } = useQuery({
    queryKey: ['analytics', workspaceId, projectId],
    queryFn: () => analyticsService.getAnalytics(workspaceId, projectId),
  });

  if (isLoading) {
    return <div>Loading analytics...</div>;
  }

  const COLORS = ['#667eea', '#48bb78', '#ed8936', '#f56565'];

  // Prepare data for charts
  const completionData = analytics?.completionHistory || [];
  const statusData = Object.entries(analytics?.tasksByStatus || {}).map(
    ([status, count]) => ({
      name: status,
      value: count,
    })
  );
  const priorityData = Object.entries(analytics?.tasksByPriority || {}).map(
    ([priority, count]) => ({
      name: priority,
      count,
    })
  );

  return (
    <div className="space-y-6">
      {/* Key Metrics */}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
        <div className="rounded-lg bg-white p-6 shadow">
          <h3 className="text-sm font-medium text-gray-500">Total Tasks</h3>
          <p className="mt-2 text-3xl font-bold text-gray-900">
            {analytics?.totalTasks || 0}
          </p>
        </div>
        <div className="rounded-lg bg-white p-6 shadow">
          <h3 className="text-sm font-medium text-gray-500">Completed</h3>
          <p className="mt-2 text-3xl font-bold text-green-600">
            {analytics?.completedTasks || 0}
          </p>
        </div>
        <div className="rounded-lg bg-white p-6 shadow">
          <h3 className="text-sm font-medium text-gray-500">In Progress</h3>
          <p className="mt-2 text-3xl font-bold text-blue-600">
            {analytics?.inProgressTasks || 0}
          </p>
        </div>
        <div className="rounded-lg bg-white p-6 shadow">
          <h3 className="text-sm font-medium text-gray-500">Completion Rate</h3>
          <p className="mt-2 text-3xl font-bold text-primary-600">
            {analytics?.completionRate || 0}%
          </p>
        </div>
      </div>

      {/* Completion Trend */}
      <div className="rounded-lg bg-white p-6 shadow">
        <h3 className="mb-4 text-lg font-semibold">Completion Trend</h3>
        <ResponsiveContainer width="100%" height={300}>
          <LineChart data={completionData}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="date" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line
              type="monotone"
              dataKey="completed"
              stroke="#48bb78"
              strokeWidth={2}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>

      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
        {/* Task Status Distribution */}
        <div className="rounded-lg bg-white p-6 shadow">
          <h3 className="mb-4 text-lg font-semibold">Tasks by Status</h3>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={statusData}
                cx="50%"
                cy="50%"
                labelLine={false}
                label={({ name, percent }) =>
                  `${name}: ${(percent * 100).toFixed(0)}%`
                }
                outerRadius={80}
                fill="#8884d8"
                dataKey="value"
              >
                {statusData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                ))}
              </Pie>
              <Tooltip />
            </PieChart>
          </ResponsiveContainer>
        </div>

        {/* Task Priority Distribution */}
        <div className="rounded-lg bg-white p-6 shadow">
          <h3 className="mb-4 text-lg font-semibold">Tasks by Priority</h3>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={priorityData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="count" fill="#667eea" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Team Productivity */}
      <div className="rounded-lg bg-white p-6 shadow">
        <h3 className="mb-4 text-lg font-semibold">Team Productivity</h3>
        <div className="space-y-3">
          {analytics?.memberProductivity?.map((member) => (
            <div key={member.userId} className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="h-10 w-10 rounded-full bg-primary-100 flex items-center justify-center">
                  <span className="text-sm font-medium text-primary-800">
                    {member.name?.slice(0, 2).toUpperCase()}
                  </span>
                </div>
                <span className="font-medium">{member.name}</span>
              </div>
              <div className="flex space-x-4 text-sm">
                <span className="text-green-600">
                  ✅ {member.tasksCompleted} completed
                </span>
                <span className="text-blue-600">
                  🔄 {member.tasksInProgress} in progress
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
</code></pre>

                <div class="card" style="background: #e3f2fd; border-left: 4px solid #2196F3;">
                    <h4>💡 Real-Time Best Practices</h4>
                    <ul>
                        <li><strong>Optimistic Updates:</strong> Update UI immediately, sync with server after</li>
                        <li><strong>Conflict Resolution:</strong> Handle cases where multiple users edit simultaneously</li>
                        <li><strong>Connection Status:</strong> Show indicator when connection is lost</li>
                        <li><strong>Debouncing:</strong> Don't send updates on every keystroke</li>
                        <li><strong>Presence Indicators:</strong> Show who's currently viewing/editing</li>
                        <li><strong>Graceful Degradation:</strong> App should work offline with limited functionality</li>
                    </ul>
                </div>

                <h3>✅ Phase 4 Completion Criteria</h3>

                <div class="card" style="background: #e8f5e9; border-left: 4px solid #4CAF50;">
                    <h4>Before Moving to Phase 5</h4>
                    <ul>
                        <li>✅ Real-time updates work across multiple browser tabs</li>
                        <li>✅ Notifications appear for assignments and mentions</li>
                        <li>✅ Comment system allows threaded discussions</li>
                        <li>✅ @mentions work and notify users</li>
                        <li>✅ Activity feed shows recent workspace changes</li>
                        <li>✅ Analytics dashboard displays key metrics</li>
                        <li>✅ Charts visualize task distribution and trends</li>
                        <li>✅ Team productivity metrics are accurate</li>
                        <li>✅ All bonus features (if implemented) are functional</li>
                    </ul>
                </div>
            </section>

            <!-- Section 8: Phase 5 - Polish & Optimization -->
            <section id="phase-5" aria-labelledby="phase-5-heading">
                <h2 id="phase-5-heading">✨ Phase 5: Polish & Optimization (6-8 hours)</h2>
                
                <p>Refine your application with performance optimizations, accessibility improvements, and professional polish.</p>

                <h3>✅ Phase 5 Checklist</h3>

                <div class="card" style="background: #e8f5e9; border-left: 4px solid #4CAF50;">
                    <h4>Tasks to Complete</h4>
                    <ol>
                        <li>Implement loading states and skeleton screens</li>
                        <li>Add error boundaries for graceful error handling</li>
                        <li>Optimize images and assets</li>
                        <li>Implement code splitting and lazy loading</li>
                        <li>Add performance monitoring</li>
                        <li>Improve accessibility (ARIA labels, keyboard navigation)</li>
                        <li>Add tooltips and help text throughout</li>
                        <li>Implement dark mode (if not done earlier)</li>
                        <li>Add empty states for lists and boards</li>
                        <li>Create onboarding flow for new users</li>
                        <li>Add keyboard shortcuts for power users</li>
                        <li>Polish animations and transitions</li>
                        <li>Optimize bundle size</li>
                        <li>Add meta tags for SEO</li>
                    </ol>
                </div>

                <h3>⚡ Performance Optimization</h3>

                <h4>Code Splitting and Lazy Loading</h4>

<pre><code class="language-typescript">// src/router.tsx - Updated with lazy loading
import { lazy, Suspense } from 'react';
import { createBrowserRouter } from 'react-router-dom';
import { LoadingSpinner } from './components/common/LoadingSpinner';

// Lazy load heavy components
const DashboardPage = lazy(() => import('./pages/Dashboard'));
const ProjectPage = lazy(() => import('./pages/Project'));
const AnalyticsPage = lazy(() => import('./pages/Analytics'));
const SettingsPage = lazy(() => import('./pages/Settings'));

// Wrapper component for suspense
function LazyPage({ Component }: { Component: React.LazyExoticComponent<any> }) {
  return (
    <Suspense
      fallback={
        <div className="flex h-screen items-center justify-center">
          <LoadingSpinner size="large" />
        </div>
      }
    >
      <Component />
    </Suspense>
  );
}

export const router = createBrowserRouter([
  // ... other routes
  {
    path: 'app',
    element: <ProtectedRoute />,
    children: [
      {
        path: 'dashboard',
        element: <LazyPage Component={DashboardPage} />,
      },
      {
        path: 'project/:projectId',
        element: <LazyPage Component={ProjectPage} />,
      },
      // ... other lazy routes
    ],
  },
]);
</code></pre>

                <h4>React Query Optimization</h4>

<pre><code class="language-typescript">// src/lib/queryClient.ts
import { QueryClient } from '@tanstack/react-query';

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      cacheTime: 10 * 60 * 1000, // 10 minutes
      refetchOnWindowFocus: false,
      retry: 1,
      // Prefetch adjacent data
      onSuccess: (data) => {
        // Prefetch related queries
      },
    },
    mutations: {
      // Optimistic updates
      onMutate: async (variables) => {
        // Cancel outgoing refetches
        // Snapshot previous value
        // Optimistically update cache
      },
      onError: (err, variables, context) => {
        // Rollback on error
      },
    },
  },
});
</code></pre>

                <h4>Memoization for Performance</h4>

<pre><code class="language-typescript">// src/components/board/KanbanBoard.tsx - With memoization
import { useMemo, memo } from 'react';

interface KanbanBoardProps {
  project: Project;
  onUpdateProject: (project: Project) => void;
}

export const KanbanBoard = memo(function KanbanBoard({ 
  project, 
  onUpdateProject 
}: KanbanBoardProps) {
  // Memoize expensive computations
  const sortedLists = useMemo(() => {
    return [...project.lists].sort((a, b) => a.position - b.position);
  }, [project.lists]);

  const taskCount = useMemo(() => {
    return project.lists.reduce((sum, list) => sum + list.tasks.length, 0);
  }, [project.lists]);

  // Memoize callbacks to prevent child re-renders
  const handleTaskUpdate = useCallback((taskId: string, updates: Partial<Task>) => {
    // Update logic
  }, [project]);

  return (
    // ... board JSX
  );
});
</code></pre>

                <h3>♿ Accessibility Improvements</h3>

<pre><code class="language-typescript">// src/components/common/Button.tsx - Accessible button component
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  isLoading = false,
  leftIcon,
  rightIcon,
  disabled,
  ...props
}: ButtonProps) {
  return (
    <button
      {...props}
      disabled={disabled || isLoading}
      aria-busy={isLoading}
      aria-disabled={disabled || isLoading}
      className={/* styled classes */}
    >
      {isLoading && (
        <span className="mr-2" aria-hidden="true">
          <LoadingSpinner size="sm" />
        </span>
      )}
      {leftIcon && !isLoading && (
        <span className="mr-2" aria-hidden="true">
          {leftIcon}
        </span>
      )}
      {children}
      {rightIcon && (
        <span className="ml-2" aria-hidden="true">
          {rightIcon}
        </span>
      )}
    </button>
  );
}
</code></pre>

                <h4>Keyboard Shortcuts</h4>

<pre><code class="language-typescript">// src/hooks/useKeyboardShortcuts.ts
import { useEffect } from 'react';

interface Shortcut {
  key: string;
  ctrl?: boolean;
  shift?: boolean;
  alt?: boolean;
  action: () => void;
  description: string;
}

export function useKeyboardShortcuts(shortcuts: Shortcut[]) {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      for (const shortcut of shortcuts) {
        const ctrlMatch = shortcut.ctrl ? event.ctrlKey || event.metaKey : !event.ctrlKey && !event.metaKey;
        const shiftMatch = shortcut.shift ? event.shiftKey : !event.shiftKey;
        const altMatch = shortcut.alt ? event.altKey : !event.altKey;
        const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase();

        if (ctrlMatch && shiftMatch && altMatch && keyMatch) {
          event.preventDefault();
          shortcut.action();
          break;
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [shortcuts]);
}

// Usage in component
export function ProjectBoard() {
  const navigate = useNavigate();

  useKeyboardShortcuts([
    {
      key: 'n',
      action: () => openNewTaskModal(),
      description: 'Create new task',
    },
    {
      key: 'k',
      ctrl: true,
      action: () => openCommandPalette(),
      description: 'Open command palette',
    },
    {
      key: '/',
      action: () => focusSearch(),
      description: 'Focus search',
    },
  ]);

  // ... component logic
}
</code></pre>

                <h4>Error Boundaries</h4>

<pre><code class="language-typescript">// src/components/common/ErrorBoundary.tsx
import { Component, ReactNode } from 'react';

interface Props {
  children: ReactNode;
  fallback?: ReactNode;
}

interface State {
  hasError: boolean;
  error?: Error;
}

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('Error caught by boundary:', error, errorInfo);
    // Log to error tracking service (Sentry, LogRocket, etc.)
  }

  render() {
    if (this.state.hasError) {
      return (
        this.props.fallback || (
          <div className="flex min-h-screen items-center justify-center">
            <div className="text-center">
              <h1 className="text-2xl font-bold text-gray-900">
                Something went wrong
              </h1>
              <p className="mt-2 text-gray-600">
                We're sorry for the inconvenience. Please try refreshing the page.
              </p>
              <button
                onClick={() => window.location.reload()}
                className="mt-4 rounded-md bg-primary-600 px-4 py-2 text-white"
              >
                Refresh Page
              </button>
            </div>
          </div>
        )
      );
    }

    return this.props.children;
  }
}
</code></pre>

                <h3>🎨 Empty States and Loading States</h3>

<pre><code class="language-typescript">// src/components/common/EmptyState.tsx
interface EmptyStateProps {
  icon?: React.ReactNode;
  title: string;
  description: string;
  action?: {
    label: string;
    onClick: () => void;
  };
}

export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
  return (
    <div className="flex flex-col items-center justify-center py-12 text-center">
      {icon && (
        <div className="mb-4 text-6xl opacity-50" aria-hidden="true">
          {icon}
        </div>
      )}
      <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
      <p className="mt-2 max-w-sm text-sm text-gray-600">{description}</p>
      {action && (
        <button
          onClick={action.onClick}
          className="mt-6 rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700"
        >
          {action.label}
        </button>
      )}
    </div>
  );
}

// Usage
<EmptyState
  icon="📋"
  title="No tasks yet"
  description="Get started by creating your first task"
  action={{
    label: 'Create Task',
    onClick: () => openTaskModal(),
  }}
/>
</code></pre>

                <div class="card" style="background: #fff3cd; border-left: 4px solid #ffc107;">
                    <h4>⚠️ Performance Checklist</h4>
                    <ul>
                        <li>✅ Lighthouse score > 90 in all categories</li>
                        <li>✅ First Contentful Paint < 1.8s</li>
                        <li>✅ Time to Interactive < 3.8s</li>
                        <li>✅ Largest Contentful Paint < 2.5s</li>
                        <li>✅ Cumulative Layout Shift < 0.1</li>
                        <li>✅ Bundle size optimized (lazy loading, tree shaking)</li>
                        <li>✅ Images optimized (WebP, responsive images)</li>
                        <li>✅ No unnecessary re-renders (use React DevTools)</li>
                    </ul>
                </div>

                <h3>✅ Phase 5 Completion Criteria</h3>

                <div class="card" style="background: #e8f5e9; border-left: 4px solid #4CAF50;">
                    <h4>Before Moving to Phase 6</h4>
                    <ul>
                        <li>✅ Loading states display during data fetching</li>
                        <li>✅ Error boundaries catch and handle errors gracefully</li>
                        <li>✅ Images are optimized and lazy loaded</li>
                        <li>✅ Routes are code-split and lazy loaded</li>
                        <li>✅ Lighthouse performance score > 90</li>
                        <li>✅ WCAG 2.1 AA accessibility compliance</li>
                        <li>✅ Keyboard navigation works throughout app</li>
                        <li>✅ Screen readers can navigate effectively</li>
                        <li>✅ Dark mode implemented (optional)</li>
                        <li>✅ Empty states provide clear guidance</li>
                        <li>✅ Keyboard shortcuts work for common actions</li>
                        <li>✅ Animations are smooth and purposeful</li>
                        <li>✅ Bundle size is optimized</li>
                        <li>✅ App feels polished and professional</li>
                    </ul>
                </div>
            </section>

            <!-- Continue in next part with Phase 6, Implementation Guide, and Evaluation -->
            <!-- Section 9: Phase 6 - Testing & Deployment -->
            <section id="phase-6" aria-labelledby="phase-6-heading">
                <h2 id="phase-6-heading">🧪 Phase 6: Testing & Deployment (6-8 hours)</h2>
                
                <p>Ensure your application is production-ready with comprehensive testing, CI/CD setup, and professional deployment.</p>

                <h3>✅ Phase 6 Checklist</h3>

                <div class="card" style="background: #e8f5e9; border-left: 4px solid #4CAF50;">
                    <h4>Tasks to Complete</h4>
                    <ol>
                        <li>Write unit tests for utility functions</li>
                        <li>Write component tests for UI components</li>
                        <li>Test user interactions and workflows</li>
                        <li>Test async operations and data fetching</li>
                        <li>Write integration tests for key features</li>
                        <li>Set up GitHub Actions for CI/CD</li>
                        <li>Configure environment variables for production</li>
                        <li>Deploy to Vercel or Netlify</li>
                        <li>Set up error tracking (Sentry)</li>
                        <li>Configure analytics (Google Analytics, Plausible)</li>
                        <li>Set up monitoring and alerts</li>
                        <li>Create comprehensive README documentation</li>
                    </ol>
                </div>

                <h3>🧪 Testing Strategy</h3>

                <h4>Unit Tests for Utilities</h4>

<pre><code class="language-typescript">// src/utils/__tests__/date.test.ts
import { describe, it, expect } from 'vitest';
import { formatDate, isOverdue, getDaysUntil } from '../date';

describe('date utilities', () => {
  it('formats dates correctly', () => {
    const date = new Date('2024-01-15');
    expect(formatDate(date)).toBe('Jan 15, 2024');
  });

  it('detects overdue dates', () => {
    const pastDate = new Date('2020-01-01');
    const futureDate = new Date('2030-01-01');
    
    expect(isOverdue(pastDate)).toBe(true);
    expect(isOverdue(futureDate)).toBe(false);
  });

  it('calculates days until date', () => {
    const date = new Date();
    date.setDate(date.getDate() + 5);
    
    expect(getDaysUntil(date)).toBe(5);
  });
});
</code></pre>

                <h4>Component Tests</h4>

<pre><code class="language-typescript">// src/components/board/__tests__/TaskCard.test.tsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { TaskCard } from '../TaskCard';
import type { Task } from '../../../types';

const mockTask: Task = {
  id: '1',
  listId: 'list-1',
  title: 'Test Task',
  description: 'Test description',
  priority: 'high',
  status: 'todo',
  position: 0,
  createdAt: new Date(),
  updatedAt: new Date(),
};

describe('TaskCard', () => {
  it('renders task information', () => {
    render(<TaskCard task={mockTask} />);
    
    expect(screen.getByText('Test Task')).toBeInTheDocument();
    expect(screen.getByText('Test description')).toBeInTheDocument();
    expect(screen.getByText('high')).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const handleClick = vi.fn();
    render(<TaskCard task={mockTask} onClick={handleClick} />);
    
    fireEvent.click(screen.getByText('Test Task'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('displays overdue indicator for past due dates', () => {
    const overdueTask = {
      ...mockTask,
      dueDate: new Date('2020-01-01'),
    };
    
    render(<TaskCard task={overdueTask} />);
    const dateElement = screen.getByText(/Jan 1/);
    expect(dateElement).toHaveClass('text-red-600');
  });
});
</code></pre>

                <h4>Integration Tests</h4>

<pre><code class="language-typescript">// src/__tests__/integration/task-workflow.test.tsx
import { describe, it, expect } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ProjectBoard } from '../../pages/ProjectBoard';

const createWrapper = () => {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });
  
  return ({ children }: { children: React.ReactNode }) => (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
};

describe('Task Workflow', () => {
  it('creates, edits, and completes a task', async () => {
    const user = userEvent.setup();
    render(<ProjectBoard />, { wrapper: createWrapper() });

    // Create task
    const createButton = screen.getByRole('button', { name: /create task/i });
    await user.click(createButton);

    const titleInput = screen.getByLabelText(/title/i);
    await user.type(titleInput, 'New Test Task');

    const submitButton = screen.getByRole('button', { name: /create/i });
    await user.click(submitButton);

    // Verify task appears
    await waitFor(() => {
      expect(screen.getByText('New Test Task')).toBeInTheDocument();
    });

    // Edit task
    const taskCard = screen.getByText('New Test Task');
    await user.click(taskCard);

    const editButton = screen.getByRole('button', { name: /edit/i });
    await user.click(editButton);

    const descriptionInput = screen.getByLabelText(/description/i);
    await user.type(descriptionInput, 'Updated description');

    const saveButton = screen.getByRole('button', { name: /save/i });
    await user.click(saveButton);

    // Complete task
    const completeButton = screen.getByRole('button', { name: /complete/i });
    await user.click(completeButton);

    await waitFor(() => {
      expect(screen.getByText(/completed/i)).toBeInTheDocument();
    });
  });
});
</code></pre>

                <h3>🚀 CI/CD Setup</h3>

                <h4>GitHub Actions Workflow</h4>

<pre><code class="language-yaml"># .github/workflows/ci.yml
name: CI/CD Pipeline

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run linter
        run: npm run lint
      
      - name: Run type check
        run: npm run type-check
      
      - name: Run tests
        run: npm run test:ci
        env:
          CI: true
      
      - name: Upload coverage
        uses: codecov/codecov-action@v3
        with:
          files: ./coverage/coverage-final.json

  build:
    needs: test
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build application
        run: npm run build
        env:
          VITE_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
          VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
      
      - name: Upload build artifacts
        uses: actions/upload-artifact@v3
        with:
          name: dist
          path: dist/

  deploy:
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    
    steps:
      - uses: actions/checkout@v3
      
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'
</code></pre>

                <h4>Environment Configuration</h4>

<pre><code class="language-bash"># .env.production
VITE_APP_ENV=production
VITE_API_URL=https://api.taskflow.com
VITE_FIREBASE_API_KEY=your_production_key
VITE_FIREBASE_AUTH_DOMAIN=taskflow-prod.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=taskflow-prod
VITE_SENTRY_DSN=your_sentry_dsn
VITE_GA_TRACKING_ID=your_ga_id
</code></pre>

                <h3>📊 Monitoring & Analytics</h3>

                <h4>Error Tracking with Sentry</h4>

<pre><code class="language-typescript">// src/lib/sentry.ts
import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';

export function initSentry() {
  if (import.meta.env.PROD) {
    Sentry.init({
      dsn: import.meta.env.VITE_SENTRY_DSN,
      integrations: [
        new BrowserTracing(),
        new Sentry.Replay(),
      ],
      tracesSampleRate: 0.1,
      replaysSessionSampleRate: 0.1,
      replaysOnErrorSampleRate: 1.0,
      environment: import.meta.env.VITE_APP_ENV,
    });
  }
}

// Usage in main.tsx
import { initSentry } from './lib/sentry';

initSentry();
</code></pre>

                <div class="card" style="background: #e3f2fd; border-left: 4px solid #2196F3;">
                    <h4>💡 Deployment Best Practices</h4>
                    <ul>
                        <li><strong>Environment Variables:</strong> Never commit secrets to Git</li>
                        <li><strong>Preview Deployments:</strong> Test changes before production</li>
                        <li><strong>Automated Testing:</strong> Run tests on every commit</li>
                        <li><strong>Error Tracking:</strong> Monitor production errors in real-time</li>
                        <li><strong>Performance Monitoring:</strong> Track Core Web Vitals</li>
                        <li><strong>Rollback Plan:</strong> Be able to revert deployments quickly</li>
                    </ul>
                </div>

                <h3>✅ Phase 6 Completion Criteria</h3>

                <div class="card" style="background: #e8f5e9; border-left: 4px solid #4CAF50;">
                    <h4>Production Ready Checklist</h4>
                    <ul>
                        <li>✅ Unit test coverage > 70%</li>
                        <li>✅ All critical user flows tested</li>
                        <li>✅ CI/CD pipeline configured and running</li>
                        <li>✅ Application deployed to production</li>
                        <li>✅ Custom domain configured (optional)</li>
                        <li>✅ SSL/HTTPS enabled</li>
                        <li>✅ Error tracking active</li>
                        <li>✅ Analytics configured</li>
                        <li>✅ Performance monitoring in place</li>
                        <li>✅ README documentation complete</li>
                        <li>✅ All environment variables secured</li>
                        <li>✅ Backup/disaster recovery plan</li>
                    </ul>
                </div>
            </section>

            <!-- Section 10: Implementation Guide -->
            <section id="implementation-guide" aria-labelledby="implementation-guide-heading">
                <h2 id="implementation-guide-heading">💡 Implementation Guide</h2>
                
                <p>Here are additional tips and patterns to help you build your capstone project effectively.</p>

                <h3>🗂️ State Management Strategy</h3>

                <div class="card" style="background: #e3f2fd; border-left: 4px solid #2196F3;">
                    <h4>💡 When to Use Which State Management</h4>
                    <ul>
                        <li><strong>useState:</strong> Component-local UI state (modals, form inputs)</li>
                        <li><strong>useReducer:</strong> Complex component state with multiple actions</li>
                        <li><strong>Context:</strong> Theme, user preferences, auth state</li>
                        <li><strong>Zustand/Redux:</strong> Truly global state (workspaces, projects)</li>
                        <li><strong>React Query:</strong> All server state (API data, cache)</li>
                    </ul>
                </div>

                <h3>🎯 Feature Implementation Order</h3>

                <div class="mermaid">
graph TD
    A[Setup & Auth] --> B[Workspace CRUD]
    B --> C[Project CRUD]
    C --> D[Basic Kanban Board]
    D --> E[Drag & Drop]
    E --> F[Task CRUD]
    F --> G[Comments]
    G --> H[Real-time Updates]
    H --> I[Analytics]
    I --> J[Polish & Testing]
    
    style A fill:#667eea,stroke:#764ba2,stroke-width:2px,color:#fff
    style D fill:#48bb78,stroke:#38a169,stroke-width:2px,color:#fff
    style H fill:#ed8936,stroke:#dd6b20,stroke-width:2px,color:#fff
    style J fill:#9f7aea,stroke:#805ad5,stroke-width:2px,color:#fff
                </div>

                <h3>⚡ Performance Tips</h3>

                <details>
                    <summary><strong>Optimize Component Re-renders</strong></summary>
                    <div style="padding: 1rem; background: #f5f5f5; margin-top: 0.5rem;">
                        <ul>
                            <li>Use React.memo() for expensive components</li>
                            <li>Memoize callbacks with useCallback</li>
                            <li>Memoize computed values with useMemo</li>
                            <li>Split large components into smaller ones</li>
                            <li>Use React DevTools Profiler to find bottlenecks</li>
                        </ul>
                    </div>
                </details>

                <details>
                    <summary><strong>Optimize Data Fetching</strong></summary>
                    <div style="padding: 1rem; background: #f5f5f5; margin-top: 0.5rem;">
                        <ul>
                            <li>Implement pagination for large lists</li>
                            <li>Use infinite scroll with React Query</li>
                            <li>Prefetch data for likely next actions</li>
                            <li>Cache aggressively, invalidate precisely</li>
                            <li>Implement optimistic updates for better UX</li>
                        </ul>
                    </div>
                </details>

                <details>
                    <summary><strong>Optimize Bundle Size</strong></summary>
                    <div style="padding: 1rem; background: #f5f5f5; margin-top: 0.5rem;">
                        <ul>
                            <li>Use dynamic imports for heavy libraries</li>
                            <li>Tree-shake unused code</li>
                            <li>Analyze bundle with webpack-bundle-analyzer</li>
                            <li>Use lightweight alternatives (date-fns vs moment)</li>
                            <li>Remove unused dependencies</li>
                        </ul>
                    </div>
                </details>

                <h3>🛠️ Debugging Tips</h3>

                <div class="card" style="background: #fff3cd; border-left: 4px solid #ffc107;">
                    <h4>⚠️ Common Issues and Solutions</h4>
                    <ul>
                        <li><strong>Infinite re-renders:</strong> Check useEffect dependencies</li>
                        <li><strong>Stale closures:</strong> Update dependency arrays properly</li>
                        <li><strong>Type errors:</strong> Ensure proper TypeScript types everywhere</li>
                        <li><strong>State not updating:</strong> Don't mutate state directly</li>
                        <li><strong>Tests failing:</strong> Mock external dependencies properly</li>
                        <li><strong>Memory leaks:</strong> Clean up subscriptions in useEffect</li>
                    </ul>
                </div>

                <h3>📚 Recommended Resources</h3>

                <table>
                    <thead>
                        <tr>
                            <th>Resource</th>
                            <th>Description</th>
                            <th>When to Use</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>React Documentation</strong></td>
                            <td>Official React docs</td>
                            <td>Understanding core concepts</td>
                        </tr>
                        <tr>
                            <td><strong>TanStack Query Docs</strong></td>
                            <td>Data fetching patterns</td>
                            <td>Implementing server state</td>
                        </tr>
                        <tr>
                            <td><strong>dnd kit Documentation</strong></td>
                            <td>Drag and drop guides</td>
                            <td>Building Kanban board</td>
                        </tr>
                        <tr>
                            <td><strong>Firebase Docs</strong></td>
                            <td>Backend integration</td>
                            <td>Auth and real-time features</td>
                        </tr>
                        <tr>
                            <td><strong>Tailwind CSS Docs</strong></td>
                            <td>Utility-first styling</td>
                            <td>Styling components</td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <!-- Section 11: Evaluation Criteria -->
            <section id="evaluation-criteria" aria-labelledby="evaluation-criteria-heading">
                <h2 id="evaluation-criteria-heading">📊 Evaluation Criteria</h2>
                
                <p>Your capstone project will be evaluated based on the following criteria. Use this as a checklist to ensure you've met all requirements.</p>

                <h3>🎯 Grading Rubric</h3>

                <table>
                    <thead>
                        <tr>
                            <th>Category</th>
                            <th>Weight</th>
                            <th>Criteria</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Functionality</strong></td>
                            <td>30%</td>
                            <td>
                                - All MVP features implemented<br>
                                - Features work as expected<br>
                                - No critical bugs<br>
                                - Edge cases handled
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Code Quality</strong></td>
                            <td>25%</td>
                            <td>
                                - Clean, readable code<br>
                                - Proper TypeScript usage<br>
                                - Consistent code style<br>
                                - Follows React best practices
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Architecture</strong></td>
                            <td>20%</td>
                            <td>
                                - Well-organized folder structure<br>
                                - Proper separation of concerns<br>
                                - Reusable components<br>
                                - Efficient state management
                            </td>
                        </tr>
                        <tr>
                            <td><strong>UI/UX</strong></td>
                            <td>15%</td>
                            <td>
                                - Professional appearance<br>
                                - Responsive design<br>
                                - Intuitive user experience<br>
                                - Accessibility compliance
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Testing</strong></td>
                            <td>10%</td>
                            <td>
                                - Adequate test coverage<br>
                                - Tests for key features<br>
                                - Tests actually pass<br>
                                - Good test practices
                            </td>
                        </tr>
                    </tbody>
                </table>

                <h3>💎 Excellence Indicators</h3>

                <div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                    <h4 style="color: white;">🌟 What Makes a Portfolio-Worthy Project</h4>
                    <ul style="color: white;">
                        <li><strong>Professional Polish:</strong> Looks and feels like a real product</li>
                        <li><strong>Attention to Detail:</strong> Loading states, error handling, empty states</li>
                        <li><strong>Performance:</strong> Fast, responsive, optimized</li>
                        <li><strong>Accessibility:</strong> Works for everyone, keyboard navigation</li>
                        <li><strong>Documentation:</strong> Comprehensive README, code comments</li>
                        <li><strong>Real-World Features:</strong> Goes beyond basic CRUD</li>
                        <li><strong>Production Ready:</strong> Deployed, monitored, maintained</li>
                    </ul>
                </div>

                <h3>📝 Submission Requirements</h3>

                <div class="card" style="background: #e8f5e9; border-left: 4px solid #4CAF50;">
                    <h4>What to Submit</h4>
                    <ol>
                        <li><strong>Live Demo URL:</strong> Deployed application on Vercel/Netlify</li>
                        <li><strong>GitHub Repository:</strong> Complete source code with README</li>
                        <li><strong>Demo Video:</strong> 3-5 minute walkthrough of key features (optional)</li>
                        <li><strong>Project Report:</strong> Brief document covering:
                            <ul>
                                <li>Technical decisions and trade-offs</li>
                                <li>Challenges faced and solutions</li>
                                <li>Features implemented and future plans</li>
                                <li>What you learned from the project</li>
                            </ul>
                        </li>
                    </ol>
                </div>

                <h3>📋 README Template</h3>

<pre><code class="language-markdown"># TaskFlow Pro

A collaborative project management platform built with React, TypeScript, and Firebase.

## 🚀 Features

- **Workspace Management:** Create and manage team workspaces
- **Kanban Boards:** Drag-and-drop task organization
- **Real-Time Collaboration:** Live updates across team members
- **Analytics Dashboard:** Track project progress and team productivity
- **Comments & Mentions:** Collaborate directly on tasks
- **Role-Based Access:** Owner, Admin, Member, and Viewer roles

## 🛠️ Tech Stack

- **Frontend:** React 18, TypeScript, Vite
- **Styling:** Tailwind CSS
- **State Management:** Zustand + TanStack Query
- **Routing:** React Router v6
- **Forms:** React Hook Form + Zod
- **Drag & Drop:** dnd kit
- **Charts:** Recharts
- **Backend:** Firebase (Auth, Firestore, Storage)
- **Testing:** Vitest, React Testing Library
- **Deployment:** Vercel

## 🏃 Getting Started

### Prerequisites
- Node.js 18+
- npm or pnpm

### Installation

```bash
git clone https://github.com/yourusername/taskflow-pro.git
cd taskflow-pro
npm install
```

### Environment Setup

Create a `.env` file:

```
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
```

### Run Development Server

```bash
npm run dev
```

Visit http://localhost:5173

## 🧪 Testing

```bash
npm run test        # Run tests
npm run test:ui     # Open Vitest UI
npm run coverage    # Generate coverage report
```

## 📦 Building

```bash
npm run build       # Create production build
npm run preview     # Preview production build
```

## 🎯 Key Features Implemented

### Phase 1: Foundation
- [x] Project setup with Vite + TypeScript
- [x] Tailwind CSS configuration
- [x] React Router setup

### Phase 2: Authentication
- [x] User registration and login
- [x] Email verification
- [x] Password reset flow
- [x] Protected routes

### Phase 3: Core Features
- [x] Workspace CRUD operations
- [x] Project management
- [x] Kanban board with drag & drop
- [x] Task management

### Phase 4: Advanced Features
- [x] Real-time updates
- [x] Comment system with @mentions
- [x] Notifications
- [x] Analytics dashboard

### Phase 5: Polish
- [x] Performance optimization
- [x] Accessibility (WCAG 2.1 AA)
- [x] Error boundaries
- [x] Loading states

### Phase 6: Production
- [x] Comprehensive testing
- [x] CI/CD pipeline
- [x] Production deployment
- [x] Error tracking

## 💡 Challenges & Solutions

**Challenge:** Implementing real-time updates across multiple users
**Solution:** Used Firebase onSnapshot with React Query cache invalidation

**Challenge:** Complex drag-and-drop state management
**Solution:** Leveraged dnd kit with optimistic updates

## 📈 What I Learned

- Advanced TypeScript patterns and generics
- Real-time data synchronization strategies
- Production deployment and monitoring
- Writing maintainable, testable React code

## 🚧 Future Enhancements

- [ ] Mobile app with React Native
- [ ] Offline support with service workers
- [ ] Advanced filtering and search
- [ ] Calendar view for tasks
- [ ] Email integrations

## 📄 License

MIT License

## 👤 Author

Your Name - [GitHub](https://github.com/yourusername)
</code></pre>
            </section>

            <!-- Section 12: Final Thoughts -->
            <section id="whats-next" aria-labelledby="whats-next-heading">
                <h2 id="whats-next-heading">🎓 Final Thoughts & Next Steps</h2>
                
                <div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                    <h3 style="color: white;">🎉 Congratulations!</h3>
                    <p style="color: white; font-size: 1.1rem; line-height: 1.8;">
                        You've reached the capstone project—the culmination of everything you've learned in this course. This project is your opportunity to showcase your skills, creativity, and problem-solving abilities. Take your time, build something you're proud of, and remember: this is what goes in your portfolio!
                    </p>
                </div>

                <h3>💪 Making the Most of Your Capstone</h3>

                <div class="card" style="background: #e3f2fd; border-left: 4px solid #2196F3;">
                    <h4>💡 Success Strategies</h4>
                    <ul>
                        <li><strong>Start Early:</strong> Give yourself 2-3 weeks to build properly</li>
                        <li><strong>Build Daily:</strong> Consistent progress beats cramming</li>
                        <li><strong>Test Continuously:</strong> Don't wait until the end to test</li>
                        <li><strong>Git Often:</strong> Commit frequently with clear messages</li>
                        <li><strong>Document as You Go:</strong> Update README with each feature</li>
                        <li><strong>Deploy Early:</strong> Set up deployment in Phase 1, not Phase 6</li>
                        <li><strong>Ask for Feedback:</strong> Share your progress with peers</li>
                        <li><strong>Refactor Boldly:</strong> Don't be afraid to improve code</li>
                    </ul>
                </div>

                <h3>🎯 Time Management</h3>

                <table>
                    <thead>
                        <tr>
                            <th>Week</th>
                            <th>Focus</th>
                            <th>Deliverables</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Week 1</strong></td>
                            <td>Phases 1-2</td>
                            <td>Setup complete, auth working, first deployment</td>
                        </tr>
                        <tr>
                            <td><strong>Week 2</strong></td>
                            <td>Phases 3-4</td>
                            <td>Core features working, real-time updates live</td>
                        </tr>
                        <tr>
                            <td><strong>Week 3</strong></td>
                            <td>Phases 5-6</td>
                            <td>Polished, tested, documented, production-ready</td>
                        </tr>
                    </tbody>
                </table>

                <h3>🚀 Going Above and Beyond</h3>

                <details>
                    <summary><strong>Optional: Add Advanced Features</strong></summary>
                    <div style="padding: 1rem; background: #f5f5f5; margin-top: 0.5rem;">
                        <p>If you finish early and want to challenge yourself further:</p>
                        <ul>
                            <li><strong>Webhooks:</strong> Integrate with Slack or Discord</li>
                            <li><strong>AI Features:</strong> Auto-categorize tasks, smart suggestions</li>
                            <li><strong>Advanced Analytics:</strong> Burndown charts, velocity tracking</li>
                            <li><strong>Mobile App:</strong> Build React Native version</li>
                            <li><strong>Email Integration:</strong> Create tasks via email</li>
                            <li><strong>API Documentation:</strong> If you built custom backend</li>
                        </ul>
                    </div>
                </details>

                <h3>💼 Using This in Job Applications</h3>

                <div class="card" style="background: #e8f5e9; border-left: 4px solid #4CAF50;">
                    <h4>✅ How to Present Your Capstone</h4>
                    <ul>
                        <li><strong>Portfolio:</strong> Feature it prominently on your portfolio site</li>
                        <li><strong>Resume:</strong> List it under "Projects" with 2-3 bullet points</li>
                        <li><strong>LinkedIn:</strong> Share it as a project with screenshots</li>
                        <li><strong>GitHub:</strong> Pin it to your profile with excellent README</li>
                        <li><strong>Interviews:</strong> Use it to demonstrate technical decisions</li>
                        <li><strong>Case Study:</strong> Write a blog post about building it</li>
                    </ul>
                </div>

                <h3>📚 Continue Learning</h3>

                <p>After completing your capstone, consider exploring:</p>

                <ul>
                    <li><strong>Next.js:</strong> Server-side rendering and modern React patterns</li>
                    <li><strong>React Native:</strong> Build mobile apps with your React skills</li>
                    <li><strong>Advanced TypeScript:</strong> Type gymnastics and advanced patterns</li>
                    <li><strong>System Design:</strong> Architecture for large-scale applications</li>
                    <li><strong>DevOps:</strong> CI/CD, Docker, Kubernetes</li>
                    <li><strong>Open Source:</strong> Contribute to React ecosystem projects</li>
                </ul>

                <h3>💬 Get Help & Support</h3>

                <div class="card" style="background: #fff3cd; border-left: 4px solid #ffc107;">
                    <h4>⚠️ When You Get Stuck</h4>
                    <p>Remember these debugging strategies:</p>
                    <ol>
                        <li><strong>Read the Error:</strong> Error messages usually tell you what's wrong</li>
                        <li><strong>Console.log Strategically:</strong> Trace data flow through your app</li>
                        <li><strong>React DevTools:</strong> Inspect component state and props</li>
                        <li><strong>Check Dependencies:</strong> Ensure useEffect dependencies are correct</li>
                        <li><strong>Isolate the Problem:</strong> Create a minimal reproduction</li>
                        <li><strong>Google Effectively:</strong> Include error message and technologies</li>
                        <li><strong>Ask for Help:</strong> StackOverflow, Discord, Reddit with code examples</li>
                    </ol>
                </div>

                <h3>🎖️ Badge of Completion</h3>

                <div class="card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; text-align: center; padding: 3rem;">
                    <h2 style="color: white; font-size: 3rem; margin: 0;">🏆</h2>
                    <h3 style="color: white; margin-top: 1rem;">React TypeScript Capstone</h3>
                    <p style="color: white; font-size: 1.2rem; margin-top: 1rem;">
                        By completing this capstone project, you demonstrate<br>
                        mastery of production-level React development with TypeScript.
                    </p>
                    <p style="color: white; font-size: 1rem; margin-top: 2rem; opacity: 0.9;">
                        You are now ready for professional React developer positions!
                    </p>
                </div>

                <h3>✨ Final Words</h3>

                <div class="card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem;">
                    <p style="color: white; font-size: 1.1rem; line-height: 1.8;">
                        This capstone is more than just a project—it's proof of your journey from beginner to skilled developer. You've learned TypeScript, mastered React, built complex state management, implemented real-time features, and deployed to production. That's incredible!
                    </p>
                    <p style="color: white; font-size: 1.1rem; line-height: 1.8; margin-top: 1rem;">
                        Take pride in what you build. Make it uniquely yours. Add features that excite you. Polish it until it shines. This is the project that will open doors for you.
                    </p>
                    <p style="color: white; font-size: 1.1rem; line-height: 1.8; margin-top: 1rem;">
                        Remember: the best developers aren't those who know everything—they're those who can figure anything out. You've proven you can do that. Now go build something amazing!
                    </p>
                </div>

                <div style="text-align: center; margin-top: 3rem; padding: 2rem;">
                    <h2 style="color: #667eea; font-size: 2.5rem;">Good luck with your capstone! 🚀</h2>
                    <p style="font-size: 1.2rem; color: #666; margin-top: 1rem;">
                        You've got this! 💪
                    </p>
                </div>
            </section>
        </div>
    </main>

    <!-- Lesson Navigation -->
    <nav aria-label="Lesson Navigation" style="margin: 3rem auto; max-width: 1200px; padding: 0 2rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
            <a class='nav-button' href='/lesson_10_5_next_steps_advanced_topics' style='text-decoration: none; padding: 1rem 2rem; background: #667eea; color: white; border-radius: 8px; transition: all 0.3s;'>
                ← Previous: Next Steps and Advanced Topics
            </a>
            <a class='nav-button' href='/' style='text-decoration: none; padding: 1rem 2rem; background: #48bb78; color: white; border-radius: 8px; transition: all 0.3s;'>
                🏠 Back to Home
            </a>
            <a class='nav-button' href='/' style='text-decoration: none; padding: 1rem 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; transition: all 0.3s;'>
                🎓 Course Complete!
            </a>
        </div>
    </nav>

    <!-- Footer -->
    <footer style="background: #2c3e50; color: white; padding: 2rem; text-align: center; margin-top: 4rem;">
        <p style="margin: 0 0 0.5rem 0;">© 2025 React TypeScript Course. All rights reserved.</p>
        <p style="margin: 0; opacity: 0.8; font-size: 0.9rem;">Built with ❤️ for aspiring React developers</p>
        <p style="margin: 1rem 0 0 0; font-size: 0.9rem;">
            <a href='/' style='color: #667eea; text-decoration: none;'>Home</a> | 
            <a href='/#modules' style='color: #667eea; text-decoration: none;'>All Modules</a> | 
            <a href="react-typescript-curriculum.md" style="color: #667eea; text-decoration: none;">Curriculum</a>
        </p>
    </footer>

    <!-- Scripts -->
    <script src="js/clipboard.js"></script>
    <script src="js/course-enhancements.js"></script>
</body>
</html>