✨ InkFlow

Collaborative Writing, Reimagined

Real-time collaborative text editor powered by CRDT technology

---

✨ Features

• 🚀 Real-time Collaboration - See changes instantly as your team types
• 👥 User Presence - Visual indicators showing who's online and editing
• 🎨 Rich Text Editing - Formatting with headings, lists, code blocks, and more
• 🔄 Conflict-free Sync - CRDT technology ensures seamless merging
• 💾 Auto-save - Never lose your work
• 🎯 Cursor Tracking - See exactly where collaborators are typing
• 📱 Responsive Design - Works on desktop, tablet, and mobile
• ⚡ Lightning Fast - Sub-50ms latency with WebSocket

---

🛠️ Tech Stack

Frontend: React 18 • TypeScript • Vite • Tailwind CSS • Framer Motion • Remirror • Yjs

Backend: Django 4.1 • Django Channels • Redis • Daphne • WebSockets

---

🚀 Quick Start

Prerequisites

• Python 3.8+
• Node.js 16+
• Redis (or Docker)

Installation

1. Clone the repository

git clone https://github.com/yourusername/inkflow.git
cd inkflow

2. Backend Setup

cd app-server

# Create and activate virtual environment
python -m venv env
source env/bin/activate  # On Windows: env\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Run migrations
python manage.py migrate

# Start Redis (with Docker)
docker run -p 6379:6379 -d redis:7-alpine

# Run server
python manage.py runserver

3. Frontend Setup

cd app

# Install dependencies
npm install

# Start development server
npm run dev

4. Open your browser

Visit http://localhost:5173

---

🐳 Docker

Quick start with Docker:

docker-compose up -d

---

📁 Project Structure

inkflow/
├── app/                    # Frontend (React + TypeScript)
│   ├── src/
│   │   ├── components/     # UI components
│   │   ├── hooks/          # Custom hooks
│   │   └── App.tsx         # Main app
│   └── package.json
│
├── app-server/             # Backend (Django)
│   ├── core/               # Django settings
│   ├── editor/             # Main app
│   │   └── socket/         # WebSocket consumers
│   └── requirements.txt
│
└── docker-compose.yml

---

🎨 Design Philosophy

InkFlow combines modern design principles with powerful technology:

• Glassmorphism - Frosted glass effects with backdrop blur
• Smooth Animations - Framer Motion for delightful interactions
• Gradient System - Beautiful purple/blue gradients throughout
• User Experience - Intuitive interface requiring no tutorial

Inspired by: Linear, Vercel, Notion, Stripe

---

🏗️ How It Works

InkFlow uses Yjs, a CRDT (Conflict-free Replicated Data Type) library, for real-time collaboration:

1. User types in editor
2. Yjs captures change as CRDT operation
3. Operation sent via WebSocket to Django Channels
4. Redis broadcasts to all connected clients
5. Clients apply changes automatically - zero conflicts!

Browser ←→ WebSocket ←→ Django Channels ←→ Redis ←→ Other Browsers

---

🗺️ Roadmap

Completed ✅

• Real-time collaborative editing
• User presence indicators
• Rich text formatting
• Modern UI with animations

Planned 🚀

• Multiple document rooms
• User authentication
• Document persistence & history
• Export to Markdown/PDF
• Offline mode with sync
• Mobile apps (iOS/Android)

---

🤝 Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

🙏 Acknowledgments

• Yjs - CRDT implementation
• Remirror - Rich text editor framework
• Django Channels - WebSocket support
• Tailwind CSS - Styling framework
• Framer Motion - Animation library

---

Built with ❤️ by Abdullah

[⭐ Star on GitHub]