158 lines
4.0 KiB
Markdown
158 lines
4.0 KiB
Markdown
# 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
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Create `.env.local` file:
|
|
```env
|
|
NEXT_PUBLIC_API_URL=http://localhost:5000/api/v1
|
|
```
|
|
|
|
### Development
|
|
|
|
Start the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
|
|
|
### Build
|
|
|
|
Build the production application:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### Linting & Formatting
|
|
|
|
```bash
|
|
# 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
|