# ๐ TeamFlow
### The Modern Trello Alternative for Small Teams
**Kanban boards. Integrated email. Zero friction.**
[](LICENSE)
[](https://nodejs.org)
[](https://react.dev)
> **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.*
[๐ Live Demo](https://teamflow.95-216-124-247.sslip.io) ยท [๐ Features](#-features) ยท [โก Quick Start](#-quick-start) ยท [๐ง Email Integration](#-email-integration)
---
## โจ 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)
โ โโโ 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
โโโ 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 |
---
## ๐จ Screenshots
### Setup Wizard
Step-by-step email configuration and admin creation โ verified live before saving.
### Kanban Board
Drag-and-drop cards between lists. Priority indicators, due dates, labels, assignees, and checklist progress โ all visible at a glance.
### Card Detail Modal
Full-featured card editor with description, checklists, time tracking, comments, labels, priority, and activity history.
### User Management
Admin panel to create users, manage roles, reset passwords, and enable/disable accounts.
### Email Settings
Configure SMTP/IMAP, send test emails, view email logs and stats, and manage inbound processing.
---
## ๐ License
MIT โ use it, fork it, ship it.
---
**Built with ๐ by TeamFlow**
*Developed end to end, single prompt by [Z.AI GLM-5-TURBO](https://z.ai/subscribe?ic=ROK78RJKNW)*