🚀 CollabSpace

A modern, collaborative project management platform designed to help teams work together seamlessly

Features • Installation • Usage • Tech Stack • API Documentation

---

📋 Table of Contents

• About
• Features
• Tech Stack
• Prerequisites
• Installation
• Environment Variables
• Usage
• Project Structure
• API Documentation
• Use Cases
• Contributing
• License

---

🎯 About

CollabSpace is a comprehensive project management solution that empowers teams to collaborate effectively, manage tasks efficiently, and track progress in real-time. Built with modern technologies, it offers an intuitive interface combined with powerful features for teams of all sizes.

Key Highlights

• ✨ Modern UI/UX - Clean, minimal design with smooth animations
• 🔐 Secure Authentication - Powered by Clerk for enterprise-grade security
• 📊 Real-time Analytics - Track project progress with detailed insights
• 👥 Team Collaboration - Seamless workspace and project management
• 📅 Calendar Integration - Never miss a deadline with visual calendar views
• 🎨 Dark Mode - Beautiful dark theme support
• 📱 Responsive Design - Works perfectly on all devices

---

✨ Features

🎯 Core Features

Feature	Description
📁 Workspace Management	Create and manage multiple workspaces with role-based access control
📊 Project Tracking	Organize projects with status, priority, and progress tracking
✅ Task Management	Create, assign, and track tasks with due dates and priorities
👥 Team Collaboration	Invite team members, assign roles, and collaborate in real-time
📅 Calendar View	Visualize tasks and deadlines in an intuitive calendar interface
📈 Analytics & Reports	Get insights with charts, graphs, and detailed analytics
💬 Comments & Updates	Communicate directly on tasks and projects
🔔 Real-time Updates	See changes instantly across all devices
🎨 Customizable	Personalize workspaces with custom logos and settings

🎨 User Experience Features

• Smooth Animations - Beautiful fade-in, slide-in, and hover animations
• Interactive Cards - Hover effects and transitions for better engagement
• Loading States - Clear feedback during async operations
• Error Handling - Graceful error messages and fallbacks
• Toast Notifications - Non-intrusive notifications for user actions
• Responsive Design - Mobile-first approach with breakpoint optimization

🔒 Security Features

• Secure Authentication - Clerk-powered authentication with OAuth support
• Role-Based Access - Admin and Member roles with granular permissions
• Workspace Isolation - Data separation between workspaces
• Task Permissions - Only assigned users can complete their tasks
• Protected Routes - Authentication required for app access

---

🛠 Tech Stack

Frontend

• React 19.1.1 - Modern UI library
• React Router DOM 7.8.1 - Client-side routing
• Redux Toolkit 2.8.2 - State management
• Tailwind CSS 4.1.12 - Utility-first CSS framework
• Vite 7.1.2 - Fast build tool and dev server
• Axios 1.7.9 - HTTP client
• React Hot Toast 2.6.0 - Toast notifications
• Recharts 3.1.2 - Chart library
• Lucide React 0.540.0 - Icon library
• date-fns 4.1.0 - Date utility library
• Clerk React 5.40.0 - Authentication

Backend

• Node.js - Runtime environment
• Express 5.2.1 - Web framework
• Prisma 6.19.2 - ORM and database toolkit
• PostgreSQL - Relational database
• Clerk Express 1.7.64 - Authentication middleware
• Nodemailer 7.0.12 - Email service
• Inngest 3.49.3 - Event-driven serverless functions
• CORS 2.8.6 - Cross-origin resource sharing

Infrastructure

• PostgreSQL - Primary database
• Clerk - Authentication and user management
• Inngest - Background job processing
• SMTP (Brevo) - Email delivery service

---

📦 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• PostgreSQL (v14 or higher)
• Git

Required Accounts

• Clerk Account - For authentication (Sign up here)
• Brevo Account - For email service (Sign up here)
• Inngest Account - For background jobs (Sign up here)

---

🚀 Installation

1. Clone the Repository

git clone https://github.com/yourusername/collabspace.git
cd collabspace

2. Install Dependencies

Frontend

cd client
npm install

Backend

cd server
npm install

3. Database Setup

cd server
npx prisma migrate dev
npx prisma generate

4. Environment Variables

Create .env files in both client and server directories. See Environment Variables section for details.

5. Run the Application

Development Mode

Terminal 1 - Backend:

cd server
npm run server

Terminal 2 - Frontend:

cd client
npm run dev

The application will be available at:

• Frontend: http://localhost:5173
• Backend: http://localhost:5000

---

🔐 Environment Variables

Client (client/.env)

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_API_URL=http://localhost:5000

Server (server/.env)

# Database
DATABASE_URL=postgresql://user:password@localhost:5432/collabspace
DIRECT_URL=postgresql://user:password@localhost:5432/collabspace

# Clerk
CLERK_SECRET_KEY=your_clerk_secret_key

# Email (Brevo/SMTP)
SMTP_HOST=smtp-relay.brevo.com
SMTP_PORT=587
SMTP_USER=your_smtp_username
SMTP_PASSWORD=your_smtp_password
SENDER_EMAIL=noreply@collabspace.com

# Application URLs
CLIENT_URL=http://localhost:5173
FRONTEND_URL=http://localhost:5173

# Inngest
INNGEST_EVENT_KEY=your_inngest_event_key
INNGEST_SIGNING_KEY=your_inngest_signing_key
INNGEST_BASE_URL=http://localhost:3000

---

💻 Usage

Getting Started

1. Sign Up / Sign In

   • Visit the home page
   • Click "Get Started" or "Sign In"
   • Complete authentication via Clerk

2. Create a Workspace

   • After signing in, create your first workspace
   • Add a name and description
   • Upload a workspace logo (optional)

3. Create a Project

   • Navigate to Projects
   • Click "New Project"
   • Fill in project details (name, description, dates, team lead)
   • Add team members

4. Create Tasks

   • Open a project
   • Click "New Task"
   • Assign tasks to team members
   • Set due dates and priorities

5. Track Progress

   • View analytics in the Analytics tab
   • Check calendar for upcoming deadlines
   • Monitor task completion in real-time

Key Workflows

Inviting Team Members

1. Go to Team page
2. Click "Invite Member"
3. Enter email and select role
4. Member receives invitation email
5. They sign up/sign in and join automatically

Managing Tasks

• Create: Add new tasks with details
• Assign: Assign to team members
• Track: Monitor status and progress
• Complete: Assigned users can mark tasks as done
• Update: Team leads can update task details

Viewing Analytics

• Dashboard: Overview of all projects and tasks
• Project Analytics: Detailed charts and metrics per project
• Real-time Updates: All data updates automatically

---

📁 Project Structure

collabspace/
├── client/                 # Frontend React application
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── features/      # Redux slices
│   │   ├── layouts/       # Layout components
│   │   ├── configs/       # Configuration files
│   │   └── assets/        # Static assets
│   ├── public/            # Public assets
│   └── package.json
│
├── server/                # Backend Express application
│   ├── controllers/       # Route controllers
│   ├── routes/           # API routes
│   ├── middleware/       # Express middleware
│   ├── configs/          # Configuration files
│   ├── utils/            # Utility functions
│   ├── inngest/          # Background job handlers
│   ├── prisma/           # Database schema and migrations
│   └── package.json
│
└── README.md

Key Directories

• client/src/components/ - Reusable React components
• client/src/pages/ - Page-level components
• client/src/features/ - Redux state management
• server/controllers/ - Business logic handlers
• server/routes/ - API endpoint definitions
• server/prisma/ - Database schema and migrations

---

📡 API Documentation

Authentication

All protected routes require a Bearer token in the Authorization header:

Authorization: Bearer <clerk_jwt_token>

Workspace Endpoints

Get User Workspaces

GET /api/workspaces
Authorization: Bearer <token>

Send Invitation Email

POST /api/workspaces/send-invitation-email
Authorization: Bearer <token>
Content-Type: application/json

{
  "email": "user@example.com",
  "workspaceName": "My Workspace",
  "invitationUrl": "https://app.com?invitation_token=...",
  "inviterName": "John Doe"
}

Project Endpoints

Get Projects for Workspace

GET /api/projects/workspace/:workspaceId
Authorization: Bearer <token>

Create Project

POST /api/projects
Authorization: Bearer <token>
Content-Type: application/json

{
  "workspaceId": "workspace-id",
  "name": "Project Name",
  "description": "Project description",
  "status": "PLANNING",
  "priority": "MEDIUM",
  "start_date": "2025-01-01",
  "end_date": "2025-12-31",
  "team_lead": "user-id",
  "progress": 0
}

Update Project

PUT /api/projects/:projectId
Authorization: Bearer <token>
Content-Type: application/json

{
  "name": "Updated Name",
  "progress": 50,
  ...
}

Task Endpoints

Create Task

POST /api/tasks
Authorization: Bearer <token>
Content-Type: application/json

{
  "projectId": "project-id",
  "title": "Task Title",
  "description": "Task description",
  "type": "TASK",
  "status": "TODO",
  "priority": "MEDIUM",
  "assigneeId": "user-id",
  "due_date": "2025-01-15"
}

Update Task

PUT /api/tasks/:taskId
Authorization: Bearer <token>
Content-Type: application/json

{
  "status": "DONE",
  ...
}

Note: Only assigned users can update task status to DONE. Team leads can update all other fields.

Delete Task

DELETE /api/tasks/delete/:taskId
Authorization: Bearer <token>

---

🎯 Use Cases

For Project Managers

• 📊 Track Multiple Projects - Manage multiple projects across different workspaces
• 👥 Team Management - Assign tasks, monitor progress, and manage team members
• 📈 Analytics - Get insights into team productivity and project health
• 📅 Deadline Management - Visualize all deadlines in calendar view
• 🔔 Stay Updated - Real-time notifications for project changes

For Team Members

• ✅ Task Management - View assigned tasks and update status
• 📋 Task Completion - Mark tasks as done when completed
• 💬 Collaboration - Comment on tasks and communicate with team
• 📅 Personal Calendar - View personal task deadlines
• 📊 Progress Tracking - Monitor individual and team progress

For Organizations

• 🏢 Multi-Workspace - Separate workspaces for different departments
• 🔐 Role-Based Access - Control access with Admin and Member roles
• 📧 Team Invitations - Easy onboarding with email invitations
• 📈 Reporting - Comprehensive analytics for decision-making
• 🔒 Security - Enterprise-grade authentication and data protection

---

🎨 Features in Detail

Real-time Analytics

• Task Status Distribution - Pie charts showing task breakdown
• Priority Analysis - Visual representation of task priorities
• Type Distribution - Breakdown of tasks by type (Task, Bug, Feature, etc.)
• Progress Tracking - Real-time progress bars and metrics
• Overdue Tasks - Automatic detection and highlighting

Calendar Integration

• Monthly View - Full calendar with task indicators
• Due Date Tracking - Visual representation of all due dates
• Overdue Highlighting - Red borders for overdue tasks
• Upcoming Tasks - Sidebar showing upcoming deadlines
• Task Details - Click any date to see all tasks for that day

Task Management

• Multiple Types - Task, Bug, Feature, Improvement, Other
• Priority Levels - Low, Medium, High with color coding
• Status Tracking - TODO, IN_PROGRESS, DONE
• Assignee Management - Assign tasks to team members
• Due Dates - Set and track deadlines
• Comments - Add comments and updates

---

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style
• Write meaningful commit messages
• Add comments for complex logic
• Test your changes thoroughly
• Update documentation as needed

---

📝 License

This project is licensed under the ISC License.

---

🙏 Acknowledgments

• Clerk - For authentication infrastructure
• Prisma - For excellent ORM and database tools
• Tailwind CSS - For the utility-first CSS framework
• React Team - For the amazing React library
• Lucide - For beautiful icons

---

📞 Support

For support, email support@collabspace.com or open an issue in the repository.

---

🚀 Deployment

Frontend (Vercel/Netlify)

1. Build the project:

cd client
npm run build

2. Deploy the dist folder to your hosting service

3. Set environment variables in your hosting platform

Backend (Render/Railway)

1. Set up a PostgreSQL database
2. Set environment variables
3. Deploy the server directory
4. Run migrations: npx prisma migrate deploy

Environment Variables for Production

Ensure all environment variables are set in your hosting platform, including:

• Database connection strings
• Clerk keys
• SMTP credentials
• Application URLs

---

Made with ❤️ by the CollabSpace Team

⭐ Star this repo • 🐛 Report Bug • 💡 Request Feature