Markdown Colab

A real-time collaborative Markdown editor that allows multiple users to edit documents simultaneously.

Features

• 📝 Real-time collaborative editing
• 🔄 Live Markdown preview with split-screen view
• 👥 User presence with customizable names and colors
• 🎨 Persistent user preferences per document
• 🔗 Shareable document URLs
• 💾 Automatic content synchronization
• 🎯 Clean, minimalist UI with Tailwind CSS

Tech Stack

• Frontend:

  • Next.js 15 with TypeScript
  • Tailwind CSS for styling
  • Zustand for state management
  • SocketIO client for real-time communication
  • react-markdown for Markdown rendering

• Backend:

  • Node.js with Express
  • TypeScript
  • SocketIO for WebSocket communication
  • MongoDB with Mongoose

Getting Started

Prerequisites

• Node.js 18 or higher
• pnpm package manager
• MongoDB instance

Installation

1. Clone the repository:

   git clone https://github.com/nikosevag/markdown-colab.git
   cd markdown-colab

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   Create .env files in both apps/web and apps/server:

   apps/web/.env:

   NEXT_PUBLIC_SOCKET_URL=http://localhost:5000
   

   apps/server/.env:

   PORT=5000
   MONGODB_URI=your_mongodb_connection_string
   FRONTEND_URL=http://localhost:3000
   

4. Start the development servers:

   # Start both frontend and backend in development mode
   pnpm dev

Project Structure

markdown-colab/
├── apps/
│   ├── web/          # Frontend Next.js application
│   │   ├── src/
│   │   │   ├── components/  # React components
│   │   │   ├── store/       # Zustand stores
│   │   │   └── lib/        # Utilities and helpers
│   │   └── ...
│   └── server/       # Backend Express application
│       ├── src/
│       │   ├── models/     # MongoDB models
│       │   └── index.ts    # Server entry point
│       └── ...
├── packages/
│   └── shared/       # Shared types and utilities
└── package.json      # Root package.json for workspace

Features in Detail

Real-time Collaboration

• Multiple users can edit the same document simultaneously
• Changes are instantly synchronized across all connected clients
• User presence indicators show who's currently viewing

User Experience

• Split-screen view with live Markdown preview
• Customizable user identities with names and colors
• Persistent user preferences per document
• Clean, responsive interface

Document Management

• Automatic content synchronization
• Real-time preview of Markdown formatting
• Shareable URLs for easy document access

License

MIT