3fa43c5542
Create comprehensive SignalR Context infrastructure to support real-time updates across the application.
Changes:
- Created SignalRContext.tsx with React Context API for SignalR connection management
- Implemented useSignalREvent and useSignalREvents hooks for simplified event subscription
- Updated Kanban page to use new SignalR hooks (reduced from 150+ lines to ~50 lines)
- Updated root layout to use new SignalRProvider from SignalRContext
- Fixed login page Suspense boundary issue for Next.js 16 compatibility
- Fixed Kanban type issue: made description optional to match API response
Features:
- Auto-connect when user is authenticated
- Auto-reconnect with configurable delays (0s, 2s, 5s, 10s, 30s)
- Toast notifications for connection status changes
- Event subscription management with automatic cleanup
- Support for multiple hub connections (PROJECT, NOTIFICATION)
- TypeScript type safety with proper interfaces
Usage:
```tsx
// Subscribe to single event
useSignalREvent('TaskCreated', (task) => {
console.log('Task created:', task);
});
// Subscribe to multiple events
useSignalREvents({
'TaskCreated': (task) => handleTaskCreated(task),
'TaskUpdated': (task) => handleTaskUpdated(task),
});
```
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
ColaFlow Web
AI-Powered Project Management System - Frontend
Tech Stack
- 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.localfile:
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 typestypes/kanban.ts- Kanban board typestypes/user.ts- User and authentication types
API Endpoints
The frontend expects the following API endpoints:
GET /api/v1/projects- List all projectsPOST /api/v1/projects- Create projectGET /api/v1/projects/{id}- Get project detailsPUT /api/v1/projects/{id}- Update projectDELETE /api/v1/projects/{id}- Delete projectGET /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