ProjectFlow Pro

Project Name: ProjectFlow Pro Technology Stack: ExpressJS Agent Team Preview URL: https://easycoda.com/explore/projects/66f11676-1766-46d0-addd-f5f463ce5904 This project was built with EasyCoda AI Agent Team. # TaskFlow A **Trello-like project management** application for teams. Organize projects into boards, track tasks with cards, collaborate with team members, and keep everyone aligned — all in one place. Built with **React 19**, **Express 4**, **PostgreSQL**, and **shadcn/ui**. Online Preview: https://unqann66f116.4c055e81.apps.easycoda.site You can signup a new account or signin with a test account: [email protected]/password123 --- ## ✨ Features ### 📋 Boards - Create and manage multiple boards for different projects - Each board has customizable lists (columns) and cards - Invite team members and assign roles (admin / member) ### 📌 Lists & Cards - **Lists** — Create, rename, delete, and reorder columns to match your workflow - **Cards** — Add, edit, delete, and move cards between lists - **Native HTML5 Drag & Drop** — Drag cards between lists and reorder within lists with smooth optimistic updates ### 🃏 Card Details - **Title & Description** — Rich text-like editing with expandable textareas - **Due Dates** — Set and manage due dates with a calendar picker - **Assignees** — Assign cards to board members - **Labels** — Color-coded labels for categorizing cards (10 colors) - **Comments** — Threaded comments on cards with author info and timestamps ### 👥 Team Collaboration - **Multi-user** — Multiple team members can work on the same board - **Member Management** — Add members by email, manage roles (admin/member) - **Share Dialog** — Easy member invitation and role management ### 📊 Activity Log - **Timeline Feed** — Track every action: card moves, creates, updates, comments, and more - **Grouped by Date** — Today, Yesterday, and older entries ### 🔐 Authentication - **JWT-based** — Secure signup and login - **Protected Routes** — All board operations require authentication - **Profile Management** — Update your name and profile --- ## 🚀 Tech Stack | Layer | Technology | |---|---| | **Frontend** | [React 19](https://react.dev/), [TypeScript](https://www.typescriptlang.org/) (strict), [Vite 7](https://vite.dev/) | | **Styling** | [Tailwind CSS v4](https://tailwindcss.com/), [shadcn/ui](https://ui.shadcn.com/) components | | **State Management** | [Zustand](https://github.com/pmndrs/zustand) (client state), [TanStack Query](https://tanstack.com/query/latest) (server state) | | **Forms** | [React Hook Form](https://react-hook-form.com/) + [Zod](https://zod.dev/) validation | | **Routing** | [React Router v7](https://reactrouter.com/) | | **Backend** | [Node.js 20](https://nodejs.org/), [Express 4](https://expressjs.com/), [TypeScript](https://www.typescriptlang.org/) | | **Database** | [PostgreSQL 17](https://www.postgresql.org/), [Prisma 7](https://www.prisma.io/) (ORM) | | **Auth** | [JWT](https://jwt.io/) + [bcrypt](https://github.com/kelektiv/node.bcrypt.js) | ### Key Packages **Frontend:** - `axios` — HTTP client with auth interceptor - `date-fns` — Date formatting and manipulation - `lucide-react` — Icon library - `sonner` — Toast notifications - `@tanstack/react-query` — Data fetching, caching, optimistic updates **Backend:** - `helmet` — Security headers - `cors` — Cross-origin resource sharing - `morgan` — HTTP request logging - `zod` — Request validation - `jsonwebtoken` — JWT signing and verification --- ## 📁 Project Structure ``` taskflow/ ├── client/ # React frontend │ ├── src/ │ │ ├── components/ │ │ │ ├── auth/ # Login, Register forms, route guards │ │ │ ├── board/ # Kanban board, CardDetail, Share, Activity │ │ │ ├── boards/ # Board list, Card, CreateDialog │ │ │ ├── layout/ # AppLayout, AuthLayout, BoardLayout │ │ │ ├── shared/ # ErrorBoundary │ │ │ └── ui/ # shadcn/ui components │ │ ├── pages/ # Login, Register, BoardList, BoardPage │ │ ├── schemas/ # Zod validation schemas │ │ ├── services/ # API client and service modules │ │ ├── store/ # Zustand stores (auth, board) │ │ └── types/ # Shared TypeScript types │ └── index.html ├── server/ # Express backend │ ├── prisma/ │ │ ├── models/ # Multi-file Prisma schema (9 models) │ │ ├── migrations/ # Database migrations │ │ └── seed.ts # Database seeder │ ├── src/ │ │ ├── config/ # Auth config, database config │ │ ├── controllers/ # Route handlers │ │ ├── middleware/ # Auth middleware, error handler │ │ ├── routes/ # Route definitions │ │ ├── schemas/ # Zod validation schemas │ │ ├── services/ # Business logic │ │ └── utils/ # AppError utility │ └── .env.example └── spec/ # Technical specification files ``` --- ## 🛠️ Quick Start ### Prerequisites - **Node.js** 20+ - **pnpm** (recommended) or npm - **PostgreSQL** 17+ ### 1. Clone the repository ```bash git clone https://github.com/your-username/taskflow.git cd taskflow ``` ### 2. Set up the backend ```bash cd server # Copy environment variables cp .env.example .env # Edit .env with your database credentials # DATABASE_URL="postgresql://user:password@localhost:5432/taskflow" # Install dependencies pnpm install # Run database migrations pnpm prisma:migrate # (Optional) Seed with sample data pnpm prisma:seed # Start the development server pnpm dev ``` ### 3. Set up the frontend ```bash cd client # Copy environment variables cp .env.example .env # Install dependencies pnpm install # Start the development server pnpm dev ``` ### 4. Open the app Navigate to `http://localhost:8080` in your browser. ### Environment Variables **Server** (`server/.env`): | Variable | Description | Default | |---|---|---| | `DATABASE_URL` | PostgreSQL connection string | `postgresql://user:pass@localhost:5432/taskflow` | | `PORT` | Server port | `3000` | | `NODE_ENV` | Environment (development/production) | `development` | | `CORS_ORIGIN` | Allowed CORS origin | `http://localhost:8080` | | `JWT_SECRET` | Secret key for JWT signing | (required) | | `JWT_EXPIRES_IN` | JWT expiration duration | `7d` | | `SALT_ROUNDS` | Bcrypt salt rounds | `10` | **Client** (`client/.env`): | Variable | Description | Default | |---|---|---| | `VITE_API_BASE_URL` | API base URL (proxied in dev) | `/api/v1` | > **Note:** In development, Vite proxies `/api` requests to the Express server at `http://localhost:3000`. No separate CORS configuration is needed for local development. --- ## 📡 API Overview All API endpoints are prefixed with `/api/v1`. | Method | Endpoint | Auth | Description | |---|---|---|---| | `POST` | `/auth/signup` | No | Register a new user | | `POST` | `/auth/login` | No | Login, returns JWT | | `GET` | `/auth/me` | Yes | Get current user profile | | `GET` | `/boards` | Yes | List user's boards | | `POST` | `/boards` | Yes | Create a new board | | `GET` | `/boards/:id` | Yes | Get board details (lists, cards, members) | | `PUT` | `/boards/:id` | Yes | Update board | | `DELETE` | `/boards/:id` | Yes | Delete board (owner only) | | `POST` | `/boards/:id/members` | Yes | Add member | | `DELETE` | `/boards/:id/members/:userId` | Yes | Remove member | | `GET/POST` | `/boards/:id/lists` | Yes | List/Create lists | | `PUT/DELETE` | `/boards/:id/lists/:listId` | Yes | Update/Delete list | | `POST` | `/boards/:id/lists/:listId/cards` | Yes | Create card | | `PUT/DELETE` | `/cards/:cardId` | Yes | Update/Delete card | | `PUT` | `/cards/:cardId/move` | Yes | Move card to another list | | `GET/POST` | `/cards/:cardId/comments` | Yes | List/Create comments | | `GET/POST` | `/boards/:id/labels` | Yes | List/Create labels | | `GET` | `/boards/:id/activity` | Yes | Get board activity log | --- ## 🧪 Running Tests ```bash # Backend cd server && pnpm run build # Frontend cd client && pnpm run build ``` --- ## 🤝 Contributing Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add some amazing feature'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request --- ## 📄 License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. --- ## 🙏 Acknowledgments - Built by [EasyCoda ExpressJs Agent Team](https://easycoda.com) - Built with [shadcn/ui](https://ui.shadcn.com/) component library - Inspired by [Trello](https://trello.com/) - Icons by [Lucide](https://lucide.dev/)