🚀 Real-Time Collaborative Platform (Work in progress)

A modern, real-time collaborative platform built with cutting-edge technologies for seamless team collaboration.

---

📖 Table of Contents

• ✨ Features
• 🖼️ Screenshots
• 🛠️ Tech Stack
• 🚀 Getting Started
• 📦 Installation
• 🔧 Configuration
• 🏗️ Project Structure
• 🆕 Recent Updates
• 🔄 CI/CD Pipeline
• 🤝 Contributing
• 📚 Documentation
• 📄 License

---

✨ Features

🎯 Core Functionality

• Real-time Collaboration: Multiple users can edit documents simultaneously with live cursors and presence tracking
• Enhanced Collaborator System: Complete visibility of all workspace members with online status indicators
• Workspace Management: Create and organize workspaces with folders and files
• Authentication: Secure user authentication with Supabase Auth
• File Management: Create, edit, and organize files and folders with proper access control
• Banner Upload: Add custom banners to workspaces, folders, and files with inheritance
• Emoji Picker: Customize icons for workspaces, folders, and files
• Subscription Management: Premium features with Stripe integration

🎨 User Experience

• Dark Mode Support: Full dark mode support for all components including Quill editor
• Responsive Design: Works seamlessly on desktop and mobile devices
• Inline Editing: Rename workspaces, folders, and files directly in the interface
• Real-time Updates: Changes appear instantly for all collaborators
• Profile Management: Upload and manage profile pictures
• Breadcrumb Navigation: Instant visibility of workspace/folder/file names
• Connection Status: Real-time connection indicators for better user feedback

🔧 Developer Experience

• TypeScript: Full TypeScript support for type safety
• PostgREST API: Efficient database queries with Supabase PostgREST
• ESLint: Code quality and consistency
• Unit Testing: Comprehensive test suite with 28 tests covering main components
• CodeRabbit AI: Automated code reviews and quality assurance
• Snyk Security: Continuous vulnerability monitoring and alerts
• Performance Optimized: Reduced re-rendering and optimized real-time connections
• CI/CD Pipeline: Automated testing, building, and deployment
• Comprehensive Documentation: Detailed setup and troubleshooting guides

---

🖼️ Screenshots

🏠 Landing Page

📝 Real-time Editor

👥 Collaboration

🎨 Dark Mode

📁 Workspace Management

🔐 Authentication

⚙️ Settings & Profile

📱 Mobile Responsive

---

🛠️ Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• TypeScript - Type safety and better DX
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Beautiful UI components
• Quill Editor - Rich text editor with real-time collaboration
• Lucide React - Beautiful icons

Backend & Database

• Supabase - Backend as a service
  • PostgreSQL database
  • Real-time subscriptions
  • Authentication
  • Storage
• PostgREST - RESTful API for PostgreSQL (via Supabase)

Real-time Features

• Supabase Realtime - Real-time subscriptions
• Quill Cursors - Collaborative cursors
• WebSocket - Real-time communication

Development & Deployment

• pnpm - Fast, disk space efficient package manager
• ESLint - Code linting
• GitHub Actions - CI/CD pipeline
• Vercel - Deployment platform

Payment Integration

• Stripe - Payment processing
• Webhooks - Payment event handling

---

🚀 Getting Started

Prerequisites

• Node.js 18+ or modern package manager
• Supabase account
• Stripe account (for payments)

Quick Start

1. Clone the repository

git clone https://github.com/frckbrice/collaborative-platform.git
cd collaborative-platform

2. Install dependencies

pnpm install

3. Set up environment variables

cp env.example .env.local

4. Configure your environment variables in .env.local

5. Start the development server

pnpm dev

6. Open http://localhost:3000 in your browser

---

📦 Installation

Step 1: Environment Setup

Create a .env.local file with the following variables:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Database
NEXT_PUBLIC_DATABASE_URL=postgres://postgres:postgres@localhost:54322/postgres

# Stripe Configuration (for payments)
STRIPE_SECRET_KEY=your_stripe_secret_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

# JWT Secret (must match the one in docker-compose.yml)
JWT_SECRET=your-super-secret-jwt-token-with-at-least-32-characters-long

Step 2: Database Setup

1. Set up your Supabase project

2. Run the database migrations:

supabase db reset

3. Set up storage buckets and policies as described in the setup documentation

Step 3: Start Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run linting
pnpm lint

# Run tests
pnpm test

# Build for production
pnpm build

---

🔧 Configuration

Supabase Setup

1. Create a new Supabase project
2. Enable the following services:
   • Authentication
   • Database
   • Storage
   • Realtime
3. Configure authentication providers
4. Set up storage buckets for file uploads

Stripe Setup

1. Create a Stripe account
2. Get your API keys from the dashboard
3. Configure webhooks for payment events
4. Set up subscription products

Local Development

For local development with Supabase:

# Install Supabase CLI
npm install -g supabase

# Start local Supabase
supabase start

# Reset database
supabase db reset

---

🏗️ Project Structure

src/
├── app/                    # Next.js 15 app router
│   ├── (auth)/            # Authentication pages
│   ├── (main)/            # Main application pages
│   ├── (site)/            # Landing page
│   └── api/               # API routes
├── components/             # React components
│   ├── features/          # Feature-specific components
│   │   ├── auth/          # Authentication components
│   │   ├── main/          # Main app components
│   │   └── settings/      # Settings components
│   ├── global-components/ # Shared components
│   └── ui/               # UI components (shadcn/ui)
├── lib/                   # Utilities and configurations
│   ├── providers/         # React context providers
│   ├── supabase/          # Supabase configuration
│   └── stripe/            # Stripe configuration
└── utils/                 # Helper functions

---

🆕 Recent Updates

v2.0.0 - PostgREST Migration & Enhanced Collaboration

🔄 Database Layer Refactor

• Migrated from Drizzle ORM to PostgREST: Improved performance and simplified database interactions
• Enhanced Query Optimization: More efficient data fetching with PostgREST's built-in filtering and pagination
• Type Safety: Maintained full TypeScript support throughout the migration

👥 Improved Collaborator System

• Complete Collaborator Visibility: All workspace members (owners and invitees) can now see the full collaborator list
• Online Status Indicators: Real-time green dots show who's currently active
• Avatar Fallbacks: Proper avatar fallbacks for all collaborators
• Enhanced Tooltips: Detailed collaborator information with online status

🎨 UI/UX Enhancements

• Breadcrumb Navigation: Instant visibility of workspace/folder/file names
• Banner Inheritance: Folders and files inherit workspace banners when not set
• Connection Status: Real-time connection indicators
• Responsive Collaborator List: Better mobile experience for collaboration features

🚀 Performance Optimizations

• Reduced Re-rendering: Optimized React hooks and memoization
• Stable Realtime Connections: Improved WebSocket connection management
• Memory Leak Prevention: Proper cleanup of realtime subscriptions
• Concurrent Connection Limits: Reduced Supabase realtime connection usage

🔧 Developer Experience

• Linting Improvements: Fixed all ESLint warnings and errors
• Build Optimization: Resolved TypeScript compilation issues
• Code Organization: Better separation of concerns and cleaner architecture
• Error Handling: Enhanced error boundaries and user feedback

🐛 Bug Fixes

• Redirect Loop Fix: Resolved dashboard navigation issues
• Stripe Integration: Fixed deprecated payment session properties
• Authentication Flow: Improved server-side authentication handling
• File Management: Better error handling for file operations

---

🔄 CI/CD Pipeline

The project includes comprehensive automated workflows for quality assurance and deployment:

🔍 Code Quality & Security

• CodeRabbit AI: Automated code reviews with AI-powered analysis
  • Security vulnerability detection
  • Performance optimization suggestions
  • Best practices enforcement
  • TypeScript and React-specific recommendations
• Snyk Security: Continuous security monitoring for vulnerabilities
  • Dependency vulnerability scanning
  • Real-time security alerts
  • Automated security updates

🔧 CI Workflow (.github/workflows/ci.yml)

• Linting and Type Checking: Ensures code quality with ESLint and TypeScript
• Unit Testing: Comprehensive test suite with Vitest (28 tests covering main components)
• Building: Production build validation
• Security Scanning: Automated vulnerability checks
• Build Artifacts: Uploads build files for deployment

🚀 Deployment Workflow (.github/workflows/deploy.yml)

• Automatic Deployment: Deploys to Vercel on push
• Environment Management: Separate staging and production environments
• Branch-based Deployment:
  • main branch → Production
  • develop branch → Preview

🤖 CodeRabbit Integration

• Configuration: .coderabbit.yaml - AI-powered code review settings
• Ignore Patterns: .coderabbit.ignore - Files excluded from review
• CI Integration: Integrated into existing CI workflow (.github/workflows/ci.yml)
• Automated PR Reviews: AI-powered code analysis on pull requests
• Quality Gates: Ensures code meets quality standards before merge
• Integration: Seamless GitHub integration with status checks

---

🤝 Contributing

We welcome contributions! This project is free for collaboration.

How to Contribute

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Add tests if applicable
5. Commit your changes: git commit -m 'Add amazing feature'
6. Push to the branch: git push origin feature/amazing-feature
7. Submit a pull request

Development Guidelines

• Follow the existing code style
• Add tests for new features
• Update documentation as needed
• Ensure all CI checks pass
• Use TypeScript for all new code
• Follow the project's commit message conventions

Code of Conduct

• Be respectful and inclusive
• Help others learn and grow
• Provide constructive feedback
• Follow the project's coding standards

---

📚 Documentation

• Troubleshooting Guide - Common issues and solutions
• Environment Setup - Environment variables reference
• Database Schema - Database migrations and schema
• API Documentation - API endpoints documentation

Common Issues

• Supabase CLI Issues: Configuration and setup problems
• Docker Container Problems: Container conflicts and port issues
• Email Configuration: Mailpit setup and SMTP configuration
• Realtime Collaboration: Connection and presence tracking issues
• Authentication Issues: User management and JWT problems
• File Upload Problems: Profile pictures and storage issues

---

🚀 Deployment

Vercel (Recommended)

1. Connect your GitHub repository to Vercel
2. Configure environment variables in Vercel dashboard
3. Deploy automatically on push to main branch

Manual Deployment

# Build the application
pnpm build

# Start the production server
pnpm start

Environment Variables for Production

Make sure to set all required environment variables in your deployment platform:

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• SUPABASE_SERVICE_ROLE_KEY
• STRIPE_SECRET_KEY
• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
• STRIPE_WEBHOOK_SECRET
• JWT_SECRET

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Next.js - React framework
• Supabase - Backend as a service
• Quill Editor - Rich text editor
• shadcn/ui - UI components
• Stripe - Payment processing
• Tailwind CSS - CSS framework
• PostgREST - RESTful API for PostgreSQL

---

Made with ❤️ for the open-source community