{"id":31033115,"url":"https://github.com/frckbrice/collaborative-platform","last_synced_at":"2025-12-30T21:24:11.343Z","repository":{"id":310700671,"uuid":"1021128942","full_name":"frckbrice/collaborative-platform","owner":"frckbrice","description":"real time collaborative platform where users can work together in th same file, folders and workspaces.","archived":false,"fork":false,"pushed_at":"2025-08-19T19:12:05.000Z","size":24217,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-19T19:26:49.845Z","etag":null,"topics":["drizzle-orm","github-actions-ci-cd","next15","postgres","psql-database","quill-delta","quill-editor","reactjs","scripting-language","shadcn","stripe-payment","supabase-cli","tailwindcss","typescript","workflow"],"latest_commit_sha":null,"homepage":"https://collaborative-platform-sepia.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/frckbrice.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-16T23:53:31.000Z","updated_at":"2025-08-19T19:12:11.000Z","dependencies_parsed_at":"2025-08-19T19:37:17.725Z","dependency_job_id":null,"html_url":"https://github.com/frckbrice/collaborative-platform","commit_stats":null,"previous_names":["frckbrice/collaborative-platform"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/frckbrice/collaborative-platform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frckbrice%2Fcollaborative-platform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frckbrice%2Fcollaborative-platform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frckbrice%2Fcollaborative-platform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frckbrice%2Fcollaborative-platform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frckbrice","download_url":"https://codeload.github.com/frckbrice/collaborative-platform/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frckbrice%2Fcollaborative-platform/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275051509,"owners_count":25396978,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-13T02:00:10.085Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drizzle-orm","github-actions-ci-cd","next15","postgres","psql-database","quill-delta","quill-editor","reactjs","scripting-language","shadcn","stripe-payment","supabase-cli","tailwindcss","typescript","workflow"],"created_at":"2025-09-14T01:33:56.085Z","updated_at":"2025-12-30T21:24:11.293Z","avatar_url":"https://github.com/frckbrice.png","language":"HTML","readme":"# 🚀 Real-Time Collaborative Platform (Work in progress)\n\n\u003cdiv align=\"center\"\u003e\n\n![Collaborative Platform](public/project-images/26.png)\n\n**A modern, real-time collaborative platform built with cutting-edge technologies for seamless team collaboration.**\n\n[![Next.js](https://img.shields.io/badge/Next.js-15-black?style=for-the-badge\u0026logo=next.js)](https://nextjs.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?style=for-the-badge\u0026logo=typescript)](https://www.typescriptlang.org/)\n[![Supabase](https://img.shields.io/badge/Supabase-Real--time-orange?style=for-the-badge\u0026logo=supabase)](https://supabase.com/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3+-38B2AC?style=for-the-badge\u0026logo=tailwind-css)](https://tailwindcss.com/)\n\n[![CodeRabbit](https://img.shields.io/badge/CodeRabbit-AI_Powered-purple?style=for-the-badge\u0026logo=robot)](https://coderabbit.ai/)\n[![Snyk](https://img.shields.io/badge/Snyk-Security-red?style=for-the-badge\u0026logo=snyk)](https://snyk.io/)\n[![Tests](https://img.shields.io/badge/Tests-28_Passing-green?style=for-the-badge\u0026logo=vitest)](https://vitest.dev/)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)](http://makeapullrequest.com)\n\n\u003c/div\u003e\n\n---\n\n## 📖 Table of Contents\n\n- [✨ Features](#-features)\n- [🖼️ Screenshots](#️-screenshots)\n- [🛠️ Tech Stack](#️-tech-stack)\n- [🚀 Getting Started](#-getting-started)\n- [📦 Installation](#-installation)\n- [🔧 Configuration](#-configuration)\n- [🏗️ Project Structure](#️-project-structure)\n- [🆕 Recent Updates](#-recent-updates)\n- [🔄 CI/CD Pipeline](#-cicd-pipeline)\n- [🤝 Contributing](#-contributing)\n- [📚 Documentation](#-documentation)\n- [📄 License](#-license)\n\n---\n\n## ✨ Features\n\n### 🎯 Core Functionality\n\n- **Real-time Collaboration**: Multiple users can edit documents simultaneously with live cursors and presence tracking\n- **Enhanced Collaborator System**: Complete visibility of all workspace members with online status indicators\n- **Workspace Management**: Create and organize workspaces with folders and files\n- **Authentication**: Secure user authentication with Supabase Auth\n- **File Management**: Create, edit, and organize files and folders with proper access control\n- **Banner Upload**: Add custom banners to workspaces, folders, and files with inheritance\n- **Emoji Picker**: Customize icons for workspaces, folders, and files\n- **Subscription Management**: Premium features with Stripe integration\n\n### 🎨 User Experience\n\n- **Dark Mode Support**: Full dark mode support for all components including Quill editor\n- **Responsive Design**: Works seamlessly on desktop and mobile devices\n- **Inline Editing**: Rename workspaces, folders, and files directly in the interface\n- **Real-time Updates**: Changes appear instantly for all collaborators\n- **Profile Management**: Upload and manage profile pictures\n- **Breadcrumb Navigation**: Instant visibility of workspace/folder/file names\n- **Connection Status**: Real-time connection indicators for better user feedback\n\n### 🔧 Developer Experience\n\n- **TypeScript**: Full TypeScript support for type safety\n- **PostgREST API**: Efficient database queries with Supabase PostgREST\n- **ESLint**: Code quality and consistency\n- **Unit Testing**: Comprehensive test suite with 28 tests covering main components\n- **CodeRabbit AI**: Automated code reviews and quality assurance\n- **Snyk Security**: Continuous vulnerability monitoring and alerts\n- **Performance Optimized**: Reduced re-rendering and optimized real-time connections\n- **CI/CD Pipeline**: Automated testing, building, and deployment\n- **Comprehensive Documentation**: Detailed setup and troubleshooting guides\n\n---\n\n## 🖼️ Screenshots\n\n\u003cdiv align=\"center\"\u003e\n\n### 🏠 Landing Page\n\n![Landing Page](public/project-images/26.png)\n![Landing Page](public/project-images/25.png)\n\n### 📝 Real-time Editor\n\n![dashboard](/public/project-images/realtime-dashboard.png)\n![Real-time Editor](public/project-images/3.png)\n![Collaboration](public/project-images/13.png)\n\n### 👥 Collaboration\n\n![Collaboration](public/project-images/2.png)\n![Collaboration](public/project-images/15.png)\n![Collaboration](public/project-images/19.png)\n\n![Collaboration](public/project-images/10.png)\n![Collaboration](public/project-images/12.png)\n\n### 🎨 Dark Mode\n\n![Dark Mode](public/project-images/6.png)\n![Dark Mode](public/project-images/7.png)\n\n### 📁 Workspace Management\n\n![Workspace Management](public/project-images/16.png)\n![Collaboration](public/project-images/24.png)\n\n### 🔐 Authentication\n\n![Authentication](public/project-images/8.png)\n\n### ⚙️ Settings \u0026 Profile\n\n![Settings](public/project-images/9.png)\n\n### 📱 Mobile Responsive\n\n![Mobile](public/project-images/10.png)\n\n\u003c/div\u003e\n\n---\n\n## 🛠️ Tech Stack\n\n### Frontend\n\n- **[Next.js 15](https://nextjs.org/)** - React framework with App Router\n- **[TypeScript](https://www.typescriptlang.org/)** - Type safety and better DX\n- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework\n- **[shadcn/ui](https://ui.shadcn.com/)** - Beautiful UI components\n- **[Quill Editor](https://quilljs.com/)** - Rich text editor with real-time collaboration\n- **[Lucide React](https://lucide.dev/)** - Beautiful icons\n\n### Backend \u0026 Database\n\n- **[Supabase](https://supabase.com/)** - Backend as a service\n  - PostgreSQL database\n  - Real-time subscriptions\n  - Authentication\n  - Storage\n- **[PostgREST](https://postgrest.org/)** - RESTful API for PostgreSQL (via Supabase)\n\n### Real-time Features\n\n- **[Supabase Realtime](https://supabase.com/docs/guides/realtime)** - Real-time subscriptions\n- **[Quill Cursors](https://github.com/reedsy/quill-cursors)** - Collaborative cursors\n- **[WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)** - Real-time communication\n\n### Development \u0026 Deployment\n\n- **[pnpm](https://pnpm.io/)** - Fast, disk space efficient package manager\n- **[ESLint](https://eslint.org/)** - Code linting\n- **[GitHub Actions](https://github.com/features/actions)** - CI/CD pipeline\n- **[Vercel](https://vercel.com/)** - Deployment platform\n\n### Payment Integration\n\n- **[Stripe](https://stripe.com/)** - Payment processing\n- **[Webhooks](https://stripe.com/docs/webhooks)** - Payment event handling\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+ or modern package manager\n- Supabase account\n- Stripe account (for payments)\n\n### Quick Start\n\n1. **Clone the repository**\n\n```bash\ngit clone https://github.com/frckbrice/collaborative-platform.git\ncd collaborative-platform\n```\n\n2. **Install dependencies**\n\n```bash\npnpm install\n```\n\n3. **Set up environment variables**\n\n```bash\ncp env.example .env.local\n```\n\n4. **Configure your environment variables** in `.env.local`\n\n5. **Start the development server**\n\n```bash\npnpm dev\n```\n\n6. **Open** [http://localhost:3000](http://localhost:3000) in your browser\n\n---\n\n## 📦 Installation\n\n### Step 1: Environment Setup\n\nCreate a `.env.local` file with the following variables:\n\n```env\n# Supabase Configuration\nNEXT_PUBLIC_SUPABASE_URL=your_supabase_url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key\nSUPABASE_SERVICE_ROLE_KEY=your_service_role_key\n\n# Database\nNEXT_PUBLIC_DATABASE_URL=postgres://postgres:postgres@localhost:54322/postgres\n\n# Stripe Configuration (for payments)\nSTRIPE_SECRET_KEY=your_stripe_secret_key\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key\nSTRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret\n\n# JWT Secret (must match the one in docker-compose.yml)\nJWT_SECRET=your-super-secret-jwt-token-with-at-least-32-characters-long\n```\n\n### Step 2: Database Setup\n\n1. **Set up your Supabase project**\n\n2. **Run the database migrations**:\n\n```bash\nsupabase db reset\n```\n\n3. **Set up storage buckets and policies** as described in the setup documentation\n\n### Step 3: Start Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Start development server\npnpm dev\n\n# Run linting\npnpm lint\n\n# Run tests\npnpm test\n\n# Build for production\npnpm build\n```\n\n---\n\n## 🔧 Configuration\n\n### Supabase Setup\n\n1. Create a new Supabase project\n2. Enable the following services:\n   - Authentication\n   - Database\n   - Storage\n   - Realtime\n3. Configure authentication providers\n4. Set up storage buckets for file uploads\n\n### Stripe Setup\n\n1. Create a Stripe account\n2. Get your API keys from the dashboard\n3. Configure webhooks for payment events\n4. Set up subscription products\n\n### Local Development\n\nFor local development with Supabase:\n\n```bash\n# Install Supabase CLI\nnpm install -g supabase\n\n# Start local Supabase\nsupabase start\n\n# Reset database\nsupabase db reset\n```\n\n---\n\n## 🏗️ Project Structure\n\n```\nsrc/\n├── app/                    # Next.js 15 app router\n│   ├── (auth)/            # Authentication pages\n│   ├── (main)/            # Main application pages\n│   ├── (site)/            # Landing page\n│   └── api/               # API routes\n├── components/             # React components\n│   ├── features/          # Feature-specific components\n│   │   ├── auth/          # Authentication components\n│   │   ├── main/          # Main app components\n│   │   └── settings/      # Settings components\n│   ├── global-components/ # Shared components\n│   └── ui/               # UI components (shadcn/ui)\n├── lib/                   # Utilities and configurations\n│   ├── providers/         # React context providers\n│   ├── supabase/          # Supabase configuration\n│   └── stripe/            # Stripe configuration\n└── utils/                 # Helper functions\n```\n\n---\n\n## 🆕 Recent Updates\n\n### v2.0.0 - PostgREST Migration \u0026 Enhanced Collaboration\n\n#### 🔄 Database Layer Refactor\n\n- **Migrated from Drizzle ORM to PostgREST**: Improved performance and simplified database interactions\n- **Enhanced Query Optimization**: More efficient data fetching with PostgREST's built-in filtering and pagination\n- **Type Safety**: Maintained full TypeScript support throughout the migration\n\n#### 👥 Improved Collaborator System\n\n- **Complete Collaborator Visibility**: All workspace members (owners and invitees) can now see the full collaborator list\n- **Online Status Indicators**: Real-time green dots show who's currently active\n- **Avatar Fallbacks**: Proper avatar fallbacks for all collaborators\n- **Enhanced Tooltips**: Detailed collaborator information with online status\n\n#### 🎨 UI/UX Enhancements\n\n- **Breadcrumb Navigation**: Instant visibility of workspace/folder/file names\n- **Banner Inheritance**: Folders and files inherit workspace banners when not set\n- **Connection Status**: Real-time connection indicators\n- **Responsive Collaborator List**: Better mobile experience for collaboration features\n\n#### 🚀 Performance Optimizations\n\n- **Reduced Re-rendering**: Optimized React hooks and memoization\n- **Stable Realtime Connections**: Improved WebSocket connection management\n- **Memory Leak Prevention**: Proper cleanup of realtime subscriptions\n- **Concurrent Connection Limits**: Reduced Supabase realtime connection usage\n\n#### 🔧 Developer Experience\n\n- **Linting Improvements**: Fixed all ESLint warnings and errors\n- **Build Optimization**: Resolved TypeScript compilation issues\n- **Code Organization**: Better separation of concerns and cleaner architecture\n- **Error Handling**: Enhanced error boundaries and user feedback\n\n#### 🐛 Bug Fixes\n\n- **Redirect Loop Fix**: Resolved dashboard navigation issues\n- **Stripe Integration**: Fixed deprecated payment session properties\n- **Authentication Flow**: Improved server-side authentication handling\n- **File Management**: Better error handling for file operations\n\n---\n\n## 🔄 CI/CD Pipeline\n\nThe project includes comprehensive automated workflows for quality assurance and deployment:\n\n### 🔍 Code Quality \u0026 Security\n\n- **CodeRabbit AI**: Automated code reviews with AI-powered analysis\n  - Security vulnerability detection\n  - Performance optimization suggestions\n  - Best practices enforcement\n  - TypeScript and React-specific recommendations\n- **Snyk Security**: Continuous security monitoring for vulnerabilities\n  - Dependency vulnerability scanning\n  - Real-time security alerts\n  - Automated security updates\n\n### 🔧 CI Workflow (`.github/workflows/ci.yml`)\n\n- **Linting and Type Checking**: Ensures code quality with ESLint and TypeScript\n- **Unit Testing**: Comprehensive test suite with Vitest (28 tests covering main components)\n- **Building**: Production build validation\n- **Security Scanning**: Automated vulnerability checks\n- **Build Artifacts**: Uploads build files for deployment\n\n### 🚀 Deployment Workflow (`.github/workflows/deploy.yml`)\n\n- **Automatic Deployment**: Deploys to Vercel on push\n- **Environment Management**: Separate staging and production environments\n- **Branch-based Deployment**:\n  - `main` branch → Production\n  - `develop` branch → Preview\n\n### 🤖 CodeRabbit Integration\n\n- **Configuration**: `.coderabbit.yaml` - AI-powered code review settings\n- **Ignore Patterns**: `.coderabbit.ignore` - Files excluded from review\n- **CI Integration**: Integrated into existing CI workflow (`.github/workflows/ci.yml`)\n- **Automated PR Reviews**: AI-powered code analysis on pull requests\n- **Quality Gates**: Ensures code meets quality standards before merge\n- **Integration**: Seamless GitHub integration with status checks\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! This project is free for collaboration.\n\n### How to Contribute\n\n1. **Fork the repository**\n2. **Create a feature branch**: `git checkout -b feature/amazing-feature`\n3. **Make your changes**\n4. **Add tests if applicable**\n5. **Commit your changes**: `git commit -m 'Add amazing feature'`\n6. **Push to the branch**: `git push origin feature/amazing-feature`\n7. **Submit a pull request**\n\n### Development Guidelines\n\n- Follow the existing code style\n- Add tests for new features\n- Update documentation as needed\n- Ensure all CI checks pass\n- Use TypeScript for all new code\n- Follow the project's commit message conventions\n\n### Code of Conduct\n\n- Be respectful and inclusive\n- Help others learn and grow\n- Provide constructive feedback\n- Follow the project's coding standards\n\n---\n\n## 📚 Documentation\n\n- **[Troubleshooting Guide](./TROUBLESHOOTING.md)** - Common issues and solutions\n- **[Environment Setup](./env.example)** - Environment variables reference\n- **[Database Schema](./migrations/)** - Database migrations and schema\n- **[API Documentation](./src/app/api/)** - API endpoints documentation\n\n### Common Issues\n\n- **Supabase CLI Issues**: Configuration and setup problems\n- **Docker Container Problems**: Container conflicts and port issues\n- **Email Configuration**: Mailpit setup and SMTP configuration\n- **Realtime Collaboration**: Connection and presence tracking issues\n- **Authentication Issues**: User management and JWT problems\n- **File Upload Problems**: Profile pictures and storage issues\n\n---\n\n## 🚀 Deployment\n\n### Vercel (Recommended)\n\n1. Connect your GitHub repository to Vercel\n2. Configure environment variables in Vercel dashboard\n3. Deploy automatically on push to `main` branch\n\n### Manual Deployment\n\n```bash\n# Build the application\npnpm build\n\n# Start the production server\npnpm start\n```\n\n### Environment Variables for Production\n\nMake sure to set all required environment variables in your deployment platform:\n\n- `NEXT_PUBLIC_SUPABASE_URL`\n- `NEXT_PUBLIC_SUPABASE_ANON_KEY`\n- `SUPABASE_SERVICE_ROLE_KEY`\n- `STRIPE_SECRET_KEY`\n- `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`\n- `STRIPE_WEBHOOK_SECRET`\n- `JWT_SECRET`\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 🙏 Acknowledgments\n\n- **[Next.js](https://nextjs.org/)** - React framework\n- **[Supabase](https://supabase.com/)** - Backend as a service\n- **[Quill Editor](https://quilljs.com/)** - Rich text editor\n- **[shadcn/ui](https://ui.shadcn.com/)** - UI components\n- **[Stripe](https://stripe.com/)** - Payment processing\n- **[Tailwind CSS](https://tailwindcss.com/)** - CSS framework\n- **[PostgREST](https://postgrest.org/)** - RESTful API for PostgreSQL\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ for the open-source community**\n\n[![GitHub stars](https://img.shields.io/github/stars/frckbrice/collaborative-platform?style=social)](https://github.com/frckbrice/collaborative-platform)\n[![GitHub forks](https://img.shields.io/github/forks/frckbrice/collaborative-platform?style=social)](https://github.com/frckbrice/collaborative-platform)\n[![GitHub issues](https://img.shields.io/github/issues/frckbrice/collaborative-platform)](https://github.com/frckbrice/collaborative-platform/issues)\n[![GitHub pull requests](https://img.shields.io/github/issues-pr/frckbrice/collaborative-platform)](https://github.com/frckbrice/collaborative-platform/pulls)\n\n\u003c/div\u003e\n\u003c!-- Last updated: 2025-01-28 - Added CodeRabbit AI integration and comprehensive unit testing --\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrckbrice%2Fcollaborative-platform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrckbrice%2Fcollaborative-platform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrckbrice%2Fcollaborative-platform/lists"}