576c41b3ca
- 6 app screenshots (login, dashboard, kanban, card detail, users, email) - Live demo URL with 4 demo accounts (admin + 3 members) - Demo data: 3 boards, 21 cards, labels, comments, activity - Seed script for reproducible demo environment - Updated README with screenshots section and demo credentials
266 lines
8.5 KiB
Markdown
266 lines
8.5 KiB
Markdown
<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>
|
|
|
|
---
|
|
|
|
## 🚀 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>
|