# ๐ŸŒŠ 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)
> **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)
--- ## ๐Ÿš€ 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 TeamFlow Login ### Dashboard โ€” Board Overview TeamFlow Dashboard ### Kanban Board โ€” Drag & Drop TeamFlow Kanban Board ### Card Detail โ€” Full Feature View TeamFlow Card Detail ### User Management โ€” Admin Panel TeamFlow User Management ### Email Settings โ€” SMTP & IMAP Configuration TeamFlow Email Settings --- ## โœจ 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. ---
**Built with ๐ŸŒŠ by TeamFlow** *Developed end to end, single prompt by [Z.AI GLM-5-TURBO](https://z.ai/subscribe?ic=ROK78RJKNW)*