TeamFlow AI

A modern, AI-powered team collaboration platform built with Next.js, React, and TypeScript.

🚀 Features

• User Authentication - Secure authentication powered by Kinde
• Workspace Management - Create and manage multiple workspaces with validated schemas
• Dashboard Layout - Dedicated dashboard for workspace organization and team collaboration
• Responsive UI - Beautiful, modern interface with Tailwind CSS
• Dark Mode Support - Built-in theme switching with next-themes
• Smooth Animations - Enhanced UX with Motion animations
• Accessible Components - Radix UI primitives for accessible, composable components
• Form Handling - Robust form management with React Hook Form and Zod validation
• Toast Notifications - User-friendly notifications with Sonner

🛠️ Tech Stack

• Framework: Next.js 16 - React framework for production
• Language: TypeScript - Typed JavaScript
• Styling: Tailwind CSS - Utility-first CSS framework
• UI Components: Radix UI - Unstyled, accessible components
• Authentication: Kinde - Secure auth solution
• Form Management: React Hook Form + Zod - Form validation
• Icons: Lucide React - Beautiful icon library
• Notifications: Sonner - Toast notifications
• Animations: Motion - Animation library
• Package Manager: pnpm - Fast, disk space efficient package manager

📦 Project Structure

teamflow-ai/
├── app/                                    # Next.js app directory
│   ├── (marketing)/                        # Marketing pages
│   │   ├── page.tsx                       # Home page
│   │   └── _components/
│   │       ├── header.tsx                # Header navigation
│   │       └── hero-section.tsx          # Hero section
│   ├── (dashboard)/                       # Dashboard layout group
│   │   ├── layout.tsx                    # Dashboard layout
│   │   └── workspace/                    # Workspace management
│   │       ├── page.tsx                  # Workspace page
│   │       ├── layout.tsx                # Workspace layout
│   │       └── _components/              # Workspace components
│   ├── api/                               # API routes
│   │   └── auth/                         # Authentication routes
│   ├── schemas/                           # Zod validation schemas
│   │   └── workspace.ts                  # Workspace schema
│   ├── globals.css                        # Global styles
│   └── layout.tsx                         # Root layout
├── components/                             # Reusable React components
│   └── ui/                                # UI component library
│       ├── button.tsx
│       ├── card.tsx
│       ├── dialog.tsx
│       ├── input.tsx
│       ├── form.tsx
│       ├── avatar.tsx
│       ├── dropdown-menu.tsx
│       ├── collapsible.tsx
│       ├── popover.tsx
│       ├── skeleton.tsx
│       ├── text-effect.tsx
│       ├── theme-toggle.tsx
│       └── ...more UI components
├── lib/                                   # Utility functions and providers
│   ├── theme-provider.tsx                # Theme provider setup
│   └── utils.ts                          # Helper utilities
├── public/                                # Static assets
│   └── companies/                        # Company logos
├── package.json                           # Project dependencies
├── tsconfig.json                          # TypeScript configuration
├── tailwind.config.js                     # Tailwind CSS configuration
├── next.config.ts                         # Next.js configuration
└── eslint.config.mjs                      # ESLint configuration

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Clone the repository

   git clone https://github.com/srnsksyp/teamflow-ai.git
   cd teamflow-ai

2. Install dependencies

   pnpm install
   # or
   npm install

3. Set up environment variables

   Create a .env.local file in the root directory and add your Kinde authentication credentials:

   NEXT_PUBLIC_KINDE_CLIENT_ID=your_client_id
   KINDE_CLIENT_SECRET=your_client_secret
   KINDE_ISSUER_URL=your_issuer_url
   KINDE_SITE_URL=http://localhost:3000
   KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000

4. Run the development server

   pnpm dev
   # or
   npm run dev

5. Open your browser

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

📝 Available Scripts

• pnpm dev - Start the development server with hot reload
• pnpm build - Build the application for production
• pnpm start - Start the production server
• pnpm lint - Run ESLint to check code quality

🎨 Customization

Theme Configuration

The project supports light and dark modes. Theme settings can be customized in lib/theme-provider.tsx.

UI Components

All UI components are located in components/ui/ and built on top of Radix UI primitives. Customize component styles in their respective files using Tailwind CSS classes.

Styling

• Global styles: app/globals.css
• Tailwind configuration: tailwind.config.js
• PostCSS configuration: postcss.config.mjs

🔐 Authentication

This project uses Kinde for authentication. The header component automatically handles:

• Login/Register links
• User session management
• Logout functionality
• Responsive mobile navigation

🏢 Workspace Management

The dashboard includes a comprehensive workspace management system:

• Create Workspaces - Set up new workspaces with validated names (2-50 characters)
• Workspace Layout - Dedicated dashboard layout for workspace organization
• Schema Validation - Zod-based validation for workspace data ensuring data integrity
• Team Collaboration - Organized workspace structure for team interactions

Workspace Schema

Workspace names are validated using Zod schema:

workspaceSchema = z.object({
  name: z.string().min(2).max(50),
})

📱 Responsive Design

The project is fully responsive and mobile-friendly. The navigation menu adapts to different screen sizes with a mobile hamburger menu.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

📧 Contact

For questions or inquiries, please reach out to the project maintainer.

---

Built with ❤️ using Next.js and TypeScript