Frontend: Core UI

Before You Start: Prerequisites

• Complete Part 2: Backend endpoints, auth flow, and database are running.
• Local services: API available on http://localhost:3001 and client on http://localhost:5173.
• Frontend stack: React + TypeScript + Tailwind scaffolding already in place.
• Shared types: /shared/types.ts is importable from client code.
• UI pace: Focused on functional core UI first; deeper polish comes in later parts.

Assumptions for This Part

• State management uses Zustand for speed rather than a heavier architecture.
• You are comfortable iterating components in short loops: generate, review, test, refine.
• Accessibility and responsive behavior are considered now, then expanded in polish/deployment stages.

The Component Map

Before generating any components, let's lay out what we're building this session. Milestones 6, 7, and 8 from our plan.

State Management First

We build the Zustand stores before any UI components. This is the foundation everything renders from. Notice how we share the types and API endpoints as context.

import { create } from 'zustand';
import type { User } from '@taskflow/shared';

const API = 'http://localhost:3001';

interface AuthState {
  user: User | null;
  token: string | null;
  isLoading: boolean;
  login: (email: string, password: string) => Promise<void>;
  register: (email: string, password: string, name: string) => Promise<void>;
  logout: () => void;
  initialize: () => Promise<void>;
}

export const useAuthStore = create<AuthState>((set, get) => ({
  user: null,
  token: null,
  isLoading: true,

  login: async (email, password) => {
    const res = await fetch(`${API}/auth/login`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    });

    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || 'Login failed');
    }

    const { token, user } = await res.json();
    localStorage.setItem('token', token);
    set({ token, user });
  },

  register: async (email, password, name) => {
    const res = await fetch(`${API}/auth/register`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password, name }),
    });

    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || 'Registration failed');
    }

    const { token, user } = await res.json();
    localStorage.setItem('token', token);
    set({ token, user });
  },

  logout: () => {
    localStorage.removeItem('token');
    set({ user: null, token: null });
  },

  initialize: async () => {
    const token = localStorage.getItem('token');
    if (!token) { set({ isLoading: false }); return; }

    try {
      const res = await fetch(`${API}/auth/me`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (res.ok) {
        const { user } = await res.json();
        set({ token, user, isLoading: false });
      } else {
        localStorage.removeItem('token');
        set({ isLoading: false });
      }
    } catch {
      set({ isLoading: false });
    }
  },
}));

Login and Register Pages

AI generates both pages. The key things to verify:

• Error handling — try/catch around store actions, error message displayed to user
• Loading state — Button disabled during submission, prevents double-submit
• Redirect — navigate('/') after successful login/register
• No hardcoded styles — Pure Tailwind classes, no inline CSS objects

Protected Routes

import { Navigate } from 'react-router-dom';
import { useAuthStore } from '../stores/authStore';

export function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { user, isLoading } = useAuthStore();

  if (isLoading) {
    return (
      <div className="h-screen flex items-center justify-center">
        <div className="animate-spin h-8 w-8 border-2 border-blue-500
                        border-t-transparent rounded-full" />
      </div>
    );
  }

  if (!user) return <Navigate to="/login" replace />;

  return <>{children}</>;
}

Simple, clear, no over-engineering. Loading spinner while checking token, redirect if not authenticated, render children if authenticated.

The Project Store

Same pattern as auth — build the store first, then the components that consume it.

The critical pattern in this store: every API call reads the token from the auth store and includes it in the Authorization header. Here's the helper that makes this clean:

// Helper: authenticated fetch
async function authFetch(path: string, options: RequestInit = {}) {
  const token = useAuthStore.getState().token;
  const res = await fetch(`${API}${path}`, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
      ...options.headers,
    },
  });

  if (res.status === 401) {
    useAuthStore.getState().logout();
    throw new Error('Session expired');
  }

  if (!res.ok) {
    const err = await res.json();
    throw new Error(err.error || 'Request failed');
  }

  return res.json();
}

This helper handles auth header injection and automatic logout on expired tokens. Every action in the project store uses authFetch instead of raw fetch.

Dashboard Layout

At this point, you should have a working flow: login → see dashboard → create project → see it appear in sidebar → select it → see empty project view. Test this in the browser before moving on.

The Kanban Board

This is the centerpiece of the app. Four columns, task cards in each, and a modal for creating and editing tasks. We build it with progressive complexity — columns and cards first, drag-and-drop in Part 4.

const COLUMNS: { status: TaskStatus; label: string; accent: string }[] = [
  { status: 'todo', label: 'To Do', accent: 'bg-blue-500' },
  { status: 'in_progress', label: 'In Progress', accent: 'bg-amber-500' },
  { status: 'review', label: 'Review', accent: 'bg-violet-500' },
  { status: 'done', label: 'Done', accent: 'bg-green-500' },
];

export function KanbanBoard() {
  const tasks = useProjectStore((s) => s.tasks);

  return (
    <div className="grid grid-cols-4 gap-4 p-6 h-full overflow-x-auto">
      {COLUMNS.map((col) => {
        const columnTasks = tasks
          .filter((t) => t.status === col.status)
          .sort((a, b) => a.position - b.position);

        return (
          <Column
            key={col.status}
            status={col.status}
            label={col.label}
            accent={col.accent}
            tasks={columnTasks}
          />
        );
      })}
    </div>
  );
}

Clean separation: KanbanBoard filters and distributes tasks, Column renders the list, TaskCard renders individual items. Each component has one job.

Task Modal

The modal ties together the full flow: click "+" in a column → modal opens with that column's status pre-selected → fill in details → submit → task appears in the column. Test this end-to-end before moving on.

Sunday Morning Checkpoint

At this point, Taskflow is a working application. Users can register, log in, create projects, create tasks, view them on a kanban board, and edit them. The architecture is clean — stores handle data, components handle rendering, the API handles persistence.

What's left for this afternoon: drag-and-drop, filtering, responsive design, and polish. Then this evening: testing, security review, and deployment.

Jump to Any Part