A modern, real-time collaboration platform that provides an infinite canvas workspace for teams to organize and share project resources.

Project collaboration often suffers from fragmented resources—files in Google Drive, links in Slack, notes scattered across apps. Collaborate solves this by offering a unified canvas where everything lives together.

Think of it as a visual workspace where you can:

• Upload and organize files spatially on an infinite canvas
• Connect related items with visual lines
• Add notes and links as persistent cards
• See teammates working in real-time
• Ask an AI assistant about your project context

A pan-and-zoom workspace where you can place files, notes, and links anywhere. Drag cards around to organize your project visually—great for mind mapping, research organization, or just keeping related assets together.

See who's online and where they're looking. Colored cursors and presence indicators show team activity across the canvas, making collaboration feel live.

Upload any file type with drag-and-drop. Files appear as cards on the canvas with live previews for images and documents. Click to preview, download, or manage.

Draw connection lines between any two cards to show relationships. Perfect for linking research to notes, connecting related files, or creating simple diagrams.

An integrated AI chat panel (powered by Google Gemini) that understands your project context. Ask questions, get suggestions, or brainstorm—the AI sees your files and project structure.

• Invite Links: Generate shareable links with expiration and usage limits
• Join Requests: Approve or deny membership requests
• Member Roles: Owner/member permission levels
• Project Settings: Configure visibility, descriptions, and collaborative settings

• Framework: Next.js 16 (App Router, Server Components)
• Language: TypeScript
• Styling: Tailwind CSS 4
• Animation: Framer Motion, GSAP
• UI Components: Radix UI, Lucide Icons, Tabler Icons
• State: React Context
• Auth: Firebase Authentication

• Framework: Fastify 5
• Language: TypeScript (ESM)
• Database: Supabase (PostgreSQL)
• Storage: Cloudflare R2 (S3-compatible)
• Auth: Firebase Admin SDK
• AI: Google Generative AI (Gemini)
• Validation: Zod schemas
• Security: Rate limiting, Helmet, CORS

collaborate/
├── frontend/              # Next.js application
│   ├── src/
│   │   ├── app/           # Pages and layouts
│   │   ├── components/    # React components
│   │   ├── hooks/         # Custom React hooks
│   │   └── lib/           # Utilities and API client
│   └── public/            # Static assets
│
├── backend/               # Fastify API server
│   ├── src/
│   │   ├── routes/        # API endpoints
│   │   ├── middleware/    # Auth, rate limiting, security
│   │   ├── lib/           # Database, storage, AI clients
│   │   ├── schemas/       # Zod validation schemas
│   │   └── config/        # Environment and constants
│   └── dist/              # Compiled output
│
└── design-doc.md          # Design system documentation

• Node.js 20+
• A Supabase project
• A Firebase project
• A Cloudflare R2 bucket
• (Optional) Google Gemini API key for AI features

cd backend
npm install

Create a .env file with the required environment variables:

# Server
PORT=3001
NODE_ENV=development
FRONTEND_URL=http://localhost:3000

# Supabase
SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_KEY=your_service_key

# Firebase Admin
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_CLIENT_EMAIL=your_client_email
FIREBASE_PRIVATE_KEY=your_private_key

# Cloudflare R2
R2_ACCOUNT_ID=your_account_id
R2_ACCESS_KEY_ID=your_access_key
R2_SECRET_ACCESS_KEY=your_secret_key
R2_BUCKET_NAME=your_bucket_name
R2_PUBLIC_URL=your_public_url

# Google AI (optional)
GEMINI_API_KEY=your_gemini_key

Start the development server:

npm run dev

The API will be available at http://localhost:3001.

cd frontend
npm install

Create a .env.local file:

NEXT_PUBLIC_API_URL=http://localhost:3001
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Start the development server:

npm run dev

The app will be available at http://localhost:3000.

• Authentication: Firebase ID tokens verified on every request
• Authorization: Project membership checks for all operations
• Rate Limiting: Configurable per-route limits
• CORS: Strict origin validation
• Headers: Security headers via Helmet
• Input Validation: All inputs validated with Zod schemas
• SQL: Parameterized queries via Supabase client

The application follows a refined, elegant aesthetic documented in design-doc.md. Key principles:

• Typography: Playfair Display for marketing, Inter for app UI
• Colors: Charcoal primary, coral accents, soft ivory backgrounds
• Motion: Subtle, smooth animations (0.3-0.6s transitions)
• Layout: Generous spacing, floating glassmorphic elements

MIT License - see LICENSE for details.

Built with ❤️ for better collaboration.