Skip to content

README.md

Latest commit

 

History

History
122 lines (89 loc) · 2.79 KB

README.md

File metadata and controls

122 lines (89 loc) · 2.79 KB

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