<div align="center">

# 🌊 TeamFlow

### The Modern Trello Alternative for Small Teams

**Kanban boards. Integrated email. Zero friction.**

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Node.js](https://img.shields.io/badge/Node.js-22-green.svg)](https://nodejs.org)
[![React](https://img.shields.io/badge/React-18-61DAFB.svg)](https://react.dev)

<br />

> **Developed end to end, single prompt by [Z.AI GLM-5-TURBO](https://z.ai/subscribe?ic=ROK78RJKNW)**
>
> *Full-stack application — backend, API, database, frontend, email integration — generated from a single natural language instruction.*

<br />

[🚀 Live Demo](https://teamflow.95-216-124-247.sslip.io) · [📖 Features](#-features) · [⚡ Quick Start](#-quick-start) · [📧 Email Integration](#-email-integration)

</div>

---

## 🚀 Live Demo

Try TeamFlow right now — no signup required.

👉 **[teamflow.95-216-124-247.sslip.io](https://teamflow.95-216-124-247.sslip.io)**

### Demo Accounts

| Role | Email | Password |
|------|-------|----------|
| 👑 Admin | `admin@teamflow.local` | `demo1234` |
| 👤 Member | `sarah@demo.teamflow` | `demo1234` |
| 👤 Member | `alex@demo.teamflow` | `demo1234` |
| 👤 Member | `jordan@demo.teamflow` | `demo1234` |

> **Tip:** Use the admin account to explore user management and email settings. All member accounts have the same password.

---

## 📸 Screenshots

### Login

<img src="docs/screenshots/06-login.png" alt="TeamFlow Login" width="100%" />

### Dashboard — Board Overview

<img src="docs/screenshots/01-dashboard.png" alt="TeamFlow Dashboard" width="100%" />

### Kanban Board — Drag & Drop

<img src="docs/screenshots/02-kanban-board.png" alt="TeamFlow Kanban Board" width="100%" />

### Card Detail — Full Feature View

<img src="docs/screenshots/03-card-detail.png" alt="TeamFlow Card Detail" width="100%" />

### User Management — Admin Panel

<img src="docs/screenshots/04-user-management.png" alt="TeamFlow User Management" width="100%" />

### Email Settings — SMTP & IMAP Configuration

<img src="docs/screenshots/05-email-settings.png" alt="TeamFlow Email Settings" width="100%" />

---

## ✨ Features

### 🏗️ Kanban Boards
- **Drag & drop** cards and lists with smooth animations (@hello-pangea/dnd)
- **Multiple boards** with gradient backgrounds
- **Labels** with custom colors per board
- **Priority levels** — None, Low, Medium, High, Urgent (color-coded)
- **Due dates** with overdue and upcoming alerts on the dashboard
- **Card colors** for quick visual categorization
- **Rich card detail modal** with everything in one place

### ✅ Checklists & Time Tracking
- **Per-card checklists** with progress indicators
- **Time estimation** — set expected hours per card
- **Time logging** — track actual hours spent
- **Progress bars** on cards in the board view

### 👥 Team Management
- **Role-based access** — Admin & Member roles
- **Admin-only user creation** — no public registration
- **Board-level membership** — invite users to specific boards
- **Password management** — admins can reset any user's password
- **User enable/disable** — deactivate accounts without deleting

### 📧 Email Integration (Google App Password)
- **SMTP setup wizard** with live verification
- **Beautiful HTML notification emails** — assignments, comments, due dates, card moves
- **Inbound email processing** via IMAP — send emails to create cards
- **Reply-to-card** — reply to notification emails to add comments automatically
- **Email log & stats** — full visibility into sent/received/failed messages
- **Test email** button before going live
- **Configurable polling interval** for inbound processing

### 🔔 Notifications
- **Real-time notification bell** with unread count
- **Per-card activity feed** — see every action with timestamps
- **Mark as read / mark all / delete** notification management
- **Auto-refresh** every 30 seconds

### 🔐 Security
- **JWT authentication** with 7-day tokens
- **bcrypt password hashing** (12 salt rounds)
- **Route protection** — admin-only pages for user/email management
- **Auto-logout on token expiry**

---

## ⚡ Quick Start

```bash
# Clone the repo
git clone https://github.rommark.dev/admin/TeamFlow--Trello-Like-.git
cd TeamFlow--Trello-Like-

# Install all dependencies (root + server + client)
npm run install:all

# Start development servers (API on :3001, client on :5173)
npm run dev
```

Open **http://localhost:5173** — the setup wizard will guide you through:

1. **📧 Configure Email** — Enter your SMTP credentials (Google App Password supported)
2. **👤 Create Admin** — Set up the first admin account
3. **🎉 Start Working** — Create boards, invite your team, ship faster

### Production Build

```bash
# Build the React frontend
cd client && npx vite build && cd ..

# Start the server (serves API + static files)
node server/index.js
```

### Environment Variables

```env
PORT=3001                          # API server port
JWT_SECRET=your-secret-here        # JWT signing secret
APP_URL=https://your-domain.com    # Public URL for email links
```

---

## 📧 Email Integration

TeamFlow turns email into a first-class workflow tool:

### Outbound (Notifications)
Every card action can trigger a beautifully styled email:
- ✅ Card assigned → notification with direct link
- 💬 Comment added → full comment in email body
- 📋 Card moved → list change notification
- ⏰ Due date approaching → reminder alert

### Inbound (Create Cards via Email)
Enable IMAP in **Settings → Email** and start sending emails:

```
To: your-team@gmail.com
Subject: [tf-project-alpha] Fix login bug
Body: Users report timeout on the login page after 30 seconds...
```

This automatically creates a card in the "project-alpha" board!

### Reply-to-Card
Reply to any notification email — your reply becomes a comment on the card automatically.

### Board Email Prefix
Default: `tf-` — customize in settings. Matches the beginning of your board title:
- Board: **"Project Alpha"** → prefix match: `tf-project-alpha`

---

## 🏗️ Architecture

```
teamflow/
├── server/
│   ├── index.js              # Express server + HTTPS support
│   ├── db.js                 # SQLite schema (auto-migrates)
│   ├── seed-demo.cjs         # Demo data seeder
│   ├── middleware/
│   │   └── auth.js           # JWT auth + admin guard
│   ├── routes/
│   │   ├── setup.js          # Setup wizard API
│   │   ├── auth.js           # Login + profile
│   │   ├── users.js          # User CRUD + email invite
│   │   ├── boards.js         # Board CRUD + membership
│   │   ├── cards.js          # Cards, lists, checklists, labels, comments
│   │   ├── notifications.js  # Notification management
│   │   └── email.js          # Email config + stats + log
│   └── email/
│       ├── transporter.js    # Nodemailer SMTP + HTML templates
│       └── imap.js           # ImapFlow inbound processing
├── client/
│   ├── src/
│   │   ├── App.jsx           # Router + route guards
│   │   ├── api.js            # API client
│   │   ├── context/
│   │   │   └── AuthContext.jsx
│   │   ├── components/
│   │   │   ├── Layout.jsx    # Header + sidebar + notifications
│   │   │   ├── Sidebar.jsx
│   │   │   ├── SetupWizard.jsx   # Email → Admin flow
│   │   │   ├── CardModal.jsx     # Full card detail view
│   │   │   └── NotificationPanel.jsx
│   │   └── pages/
│   │       ├── Login.jsx
│   │       ├── Dashboard.jsx     # Board grid
│   │       ├── BoardView.jsx     # Kanban board + DnD
│   │       ├── UserManagement.jsx
│   │       └── EmailSettings.jsx
│   └── ...config files
├── docs/
│   └── screenshots/          # App screenshots
└── package.json
```

### Tech Stack

| Layer | Technology |
|-------|-----------|
| Frontend | React 18, Vite 6, Tailwind CSS 3 |
| Drag & Drop | @hello-pangea/dnd |
| Icons | Lucide React |
| Backend | Express.js 4 |
| Database | SQLite via better-sqlite3 |
| Authentication | JWT + bcryptjs |
| Email (SMTP) | Nodemailer |
| Email (IMAP) | ImapFlow + mailparser |
| Date Formatting | date-fns |

---

## 📄 License

MIT — use it, fork it, ship it.

---

<div align="center">

**Built with 🌊 by TeamFlow**

*Developed end to end, single prompt by [Z.AI GLM-5-TURBO](https://z.ai/subscribe?ic=ROK78RJKNW)*

</div>
