🚀 Real-Time Collaborative Platform

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

---

📖 Table of Contents

• ✨ Features
• 🖼️ Screenshots
• 🛠️ Tech Stack](#️-tech-stack)
• 🚀 Getting Started
• 📦 Installation
• 🔧 Configuration
• 🏗️ Project Structure
• 🔄 CI/CD Pipeline
• 🤝 Contributing
• 📚 Documentation
• 📄 License

---

✨ Features

🎯 Core Functionality

• Real-time Collaboration: Multiple users can edit documents simultaneously with live cursors and presence tracking
• 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
• Banner Upload: Add custom banners to workspaces, folders, and files
• 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

🔧 Developer Experience

• TypeScript: Full TypeScript support for type safety
• ESLint: Code quality and consistency
• CI/CD Pipeline: Automated testing, building, and deployment
• Comprehensive Documentation: Detailed setup and troubleshooting guides

---

🖼️ Screenshots

📝 Real-time Editor

👥 Collaboration

🎨 Dark Mode

📁 Workspace Management

🔐 Authentication

⚙️ Settings & Profile

📱 Mobile Responsive

---

🛠️ Tech Stack

Frontend

• [Next.js 15https://nextjs.org/) - 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
• Drizzle ORM - Type-safe database queries

Real-time Features

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

Development & Deployment

• Yarn - 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 18rn 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

yarn install

3. Set up environment variables

cp env.example .env.local

4. Configure your environment variables in .env.local

5. Start the development server

yarn dev

6 Open [http://localhost:3000](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:54322postgres

# 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-32racters-long

Step2: Database Setup1 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
yarn install

# Start development server
yarn dev

# Run linting
yarn lint

# Run tests
yarn test

# Build for production
yarn build

---

🔧 Configuration

Supabase Setup

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

Stripe Setup

1e 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.js15app 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

---

🔄 CI/CD Pipeline

The project includes automated CI/CD workflows:

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

• Linting and Type Checking: Ensures code quality
• Testing: Runs test suite
• Building: Builds the application
• Security Scanning: Checks for vulnerabilities
• Build Artifacts: Uploads build files

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

---

🤝 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 changes4ests if applicable**
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature 7mit 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
yarn build

# Start the production server
yarn 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
• Drizzle ORM - Database ORM

---