🌊 TeamFlow

The Modern Trello Alternative for Small Teams

Kanban boards. Integrated email. Zero friction.

Developed end to end, single prompt by Z.AI GLM-5-TURBO

Full-stack application — backend, API, database, frontend, email integration — generated from a single natural language instruction.

🚀 Live Demo · 📖 Features · ⚡ Quick Start · 📧 Email Integration

---

🚀 Live Demo

Try TeamFlow right now — no signup required.

👉 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

Dashboard — Board Overview

Kanban Board — Drag & Drop

Card Detail — Full Feature View

User Management — Admin Panel

Email Settings — SMTP & IMAP Configuration

---

✨ 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

# 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

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

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

Environment Variables

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.

---

Built with 🌊 by TeamFlow

Developed end to end, single prompt by Z.AI GLM-5-TURBO