🌊 TeamFlow — Modern Trello alternative with email integration
- Full-stack: React 18 + Express + SQLite - Drag-and-drop kanban boards with @hello-pangea/dnd - Google App Password email integration (SMTP + IMAP) - Inbound email: create cards by sending emails - Reply-to-card: email replies become comments - Admin/user management with role-based access - Setup wizard: email config → admin creation - Checklists, time tracking, priorities, labels, due dates - Real-time notifications with activity feed - Beautiful HTML email templates
This commit is contained in:
admin
234
README.md
Normal file
234
README.md
Normal file
@@ -0,0 +1,234 @@
|
||||
<div align="center">
|
||||
|
||||
# 🌊 TeamFlow
|
||||
|
||||
### The Modern Trello Alternative for Small Teams
|
||||
|
||||
**Kanban boards. Integrated email. Zero friction.**
|
||||
|
||||
[](LICENSE)
|
||||
[](https://nodejs.org)
|
||||
[](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>
|
||||
|
||||
---
|
||||
|
||||
## ✨ 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.
|
||||
|
||||
---
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user