Files

admin 576c41b3ca 📸 Add screenshots, live demo section, and seed data

- 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

2026-04-03 15:24:08 +00:00

8.5 KiB

Raw Blame History

🌊 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

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:

📧 Configure Email — Enter your SMTP credentials (Google App Password supported)
👤 Create Admin — Set up the first admin account
🎉 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

8.5 KiB Raw Blame History