Initial commit

README.md

@@ -1,36 +1,157 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# 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
 
-First, run the development server:
+### 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
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000) in your browser.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### Build
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+Build the production application:
 
-## Learn More
+```bash
+npm run build
+```
 
-To learn more about Next.js, take a look at the following resources:
+### Linting & Formatting
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+```bash
+# Run ESLint
+npm run lint
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+# Format code with Prettier
+npm run format
+```
 
-## Deploy on Vercel
+## Features Implemented (Sprint 1)
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### 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)
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+### 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