TeamFlow AI

A modern, real-time team collaboration platform built with Next.js, featuring AI-powered compose assistance, workspace management, and real-time messaging capabilities.

✨ Features

🏢 Workspace Management

• Multi-workspace support with organization-based access control
• Workspace creation and management powered by Kinde Auth
• Role-based permissions and member management

💬 Real-time Messaging

• Real-time channels with instant message delivery
• Thread-based conversations for organized discussions
• Message reactions and emoji support
• Image attachments via UploadThing
• Presence tracking to see who's online

🤖 AI-Powered Compose Assistant

• AI-enhanced message composition
• Smart content suggestions and improvements
• Powered by OpenRouter AI SDK
• Rate-limited and security-protected AI interactions

🔒 Advanced Security

• Comprehensive security middleware with Arcjet
  • Bot detection and prevention
  • Rate limiting (sliding window)
  • Sensitive information detection
  • Shield protection against common attacks
• Request validation and sanitization
• Secure authentication with Kinde

🎨 Modern UI/UX

• Beautiful, responsive design with Tailwind CSS
• Dark/Light theme support
• Rich text editor with TipTap
• Smooth animations with Framer Motion
• Custom UI components with Radix UI

🛠️ Tech Stack

Frontend

• Framework: Next.js 16 (React 19)
• Styling: Tailwind CSS 4
• UI Components: Radix UI
• Animations: Framer Motion
• Rich Text Editor: TipTap
• State Management: TanStack Query

Backend

• API: oRPC - Type-safe RPC framework
• Database: PostgreSQL with Prisma
• Authentication: Kinde Auth
• Real-time: PartyKit (Cloudflare Durable Objects)
• File Upload: UploadThing

AI & Security

• AI SDK: @ai-sdk/react with OpenRouter
• Security: Arcjet
  • Bot detection
  • Rate limiting
  • Sensitive info detection
  • Shield protection

Development Tools

• Language: TypeScript
• Package Manager: pnpm
• Linting: ESLint
• Edge Runtime: Cloudflare Workers (via Wrangler)

📋 Prerequisites

• Node.js 20.x or higher
• pnpm (recommended) or npm
• PostgreSQL database
• Kinde account for authentication
• UploadThing account for file uploads
• OpenRouter API key for AI features
• Arcjet API key for security features

🚀 Getting Started

1. Clone the repository

git clone <your-repo-url>
cd team-flow-ai

2. Install dependencies

pnpm install

3. Set up environment variables

Create a .env file in the root directory with the following variables:

# Database
DATABASE_URL="postgresql://..."

# Kinde Auth
KINDE_CLIENT_ID="..."
KINDE_CLIENT_SECRET="..."
KINDE_ISSUER_URL="..."
KINDE_SITE_URL="http://localhost:3000"
KINDE_POST_LOGOUT_REDIRECT_URL="http://localhost:3000"
KINDE_POST_LOGIN_REDIRECT_URL="http://localhost:3000/workspace"

# Kinde Management API
KINDE_MANAGEMENT_CLIENT_ID="..."
KINDE_MANAGEMENT_CLIENT_SECRET="..."

# UploadThing
UPLOADTHING_TOKEN="..."

# OpenRouter AI
OPENROUTER_API_KEY="..."

# Arcjet Security
ARCJET_KEY="..."

# PartyKit (for real-time features)
NEXT_PUBLIC_PARTYKIT_HOST="..."

4. Set up the database

pnpm prisma generate
pnpm prisma db push

5. Run the development server

pnpm dev

Open http://localhost:3000 to see the application.

6. (Optional) Deploy real-time server

For real-time features, deploy the PartyKit server:

pnpm wrangler deploy

📁 Project Structure

team-flow-ai/
├── app/                          # Next.js app directory
│   ├── (dashboard)/             # Dashboard routes (workspace UI)
│   ├── (marketing)/             # Marketing pages
│   ├── api/                     # API routes
│   ├── middlewares/             # Security and auth middlewares
│   ├── router/                  # oRPC route handlers
│   ├── schemas/                 # Zod validation schemas
│   └── rpc/                     # RPC endpoint
├── components/                   # Reusable React components
│   ├── general/                 # General components
│   ├── rich-text-editor/        # TipTap editor components
│   └── ui/                      # UI library components
├── hooks/                       # Custom React hooks
├── lib/                         # Utility functions and configs
│   ├── generated/prisma/        # Generated Prisma client
│   └── query/                   # TanStack Query setup
├── prisma/                      # Database schema
├── providers/                   # React context providers
├── realtime/                    # PartyKit real-time server
└── public/                      # Static assets

🔑 Key Features Explained

Workspace Management

The app uses Kinde organizations to manage workspaces. Each workspace can have multiple channels and members with role-based access control.

Real-time Communication

PartyKit (Cloudflare Durable Objects) powers the real-time features, providing:

• Instant message delivery
• Presence tracking
• Live updates across all connected clients

AI Compose Assistant

The AI assistant helps users compose better messages by:

• Analyzing current message content
• Providing intelligent suggestions
• Improving clarity and tone
• Rate-limited to prevent abuse

Security Layers

Multiple security layers protect the application:

• Authentication: Kinde provides secure user authentication
• Bot Protection: Arcjet detects and blocks malicious bots
• Rate Limiting: Prevents API abuse with sliding window rate limits
• Sensitive Data: Automatically detects and blocks sensitive information
• Shield: Protects against common web attacks

🧪 Development

Available Scripts

# Development
pnpm dev              # Start development server
pnpm build            # Build for production
pnpm start            # Start production server

# Linting
pnpm lint             # Run ESLint

# Database
pnpm prisma studio    # Open Prisma Studio
pnpm prisma generate  # Generate Prisma client

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project to Vercel
3. Add environment variables
4. Deploy

Cloudflare Workers (Real-time server)

pnpm wrangler deploy

📝 License

This project is private and proprietary.

🤝 Contributing

This is a private project. Please contact the maintainer for contribution guidelines.

---

Built with ❤️ using Next.js, Prisma, and modern web technologies.