Framework: Next.js 15 (App Router)
Language: TypeScript 5.x
UI Components: shadcn/ui + Radix UI
Styling: Tailwind CSS 4
State Management:
- TanStack Query v5 (server state)
- Zustand (client state)
Form Handling: React Hook Form + Zod
Icons: Lucide React

Project Structure

colaflow-web/
├── app/                    # Next.js App Router
│   ├── (auth)/            # Authentication routes
│   ├── (dashboard)/       # Main application routes
│   │   ├── dashboard/     # Dashboard page
│   │   ├── projects/      # Projects management
│   │   └── kanban/        # Kanban board
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page (redirects to dashboard)
├── components/
│   ├── ui/                # shadcn/ui components
│   ├── features/          # Feature-specific components
│   │   ├── projects/      # Project components
│   │   └── kanban/        # Kanban components
│   └── layout/            # Layout components (Header, Sidebar)
├── lib/
│   ├── api/              # API client and endpoints
│   ├── hooks/            # Custom React hooks
│   ├── providers/        # Context providers
│   └── utils.ts          # Utility functions
├── stores/               # Zustand stores
├── types/                # TypeScript type definitions
└── public/               # Static assets

Getting Started

Prerequisites

Node.js 20 LTS or higher
npm or yarn

Installation

Install dependencies:

npm install

Create .env.local file:

NEXT_PUBLIC_API_URL=http://localhost:5000/api/v1

Development

Start the development server:

npm run dev

Open http://localhost:3000 in your browser.

Build

Build the production application:

npm run build

Linting & Formatting

# Run ESLint
npm run lint

# Format code with Prettier
npm run format

Features Implemented (Sprint 1)

Core Pages

Dashboard with project overview
Projects list page with search and filtering
Project detail page
Kanban board (static, drag-and-drop in Sprint 2)

Components

Responsive layout with sidebar navigation
Project creation dialog with form validation
Kanban board with column and task cards
shadcn/ui integration (Button, Card, Dialog, Form, Input, Table)

State Management

TanStack Query for server state
Zustand for UI state (sidebar, theme, modals, notifications)
Custom hooks for projects and kanban

API Integration

Type-safe API client with error handling
Projects API endpoints
Kanban board API integration

TypeScript Types

All API responses and data models are fully typed:

types/project.ts - Project, Epic, Story, Task types
types/kanban.ts - Kanban board types
types/user.ts - User and authentication types

API Endpoints

The frontend expects the following API endpoints:

GET /api/v1/projects - List all projects
POST /api/v1/projects - Create project
GET /api/v1/projects/{id} - Get project details
PUT /api/v1/projects/{id} - Update project
DELETE /api/v1/projects/{id} - Delete project
GET /api/v1/projects/{id}/kanban - Get kanban board

Environment Variables

Variable	Description	Default
`NEXT_PUBLIC_API_URL`	Backend API URL	`http://localhost:5000/api/v1`

Next Steps (Sprint 2)

Implement drag-and-drop for Kanban board
Add task creation and editing
Implement authentication (login/register)
Add user profile management
Implement real-time updates with SignalR
Add workflow customization
Implement audit logs viewer

Architecture Reference

For complete architecture details, see: docs/M1-Architecture-Design.md

License

Proprietary - ColaFlow Project