🎯 Collaborative Markdown Editor

Gerçek zamanlı, çok kullanıcılı Markdown editörü - Google Docs benzeri deneyim, ancak Markdown formatında! 🎉

Collaborative Markdown Editor, Go tabanlı gelişmiş bir gerçek zamanlı markdown editörüdür. WebSocket teknolojisi ile çoklu kullanıcıların aynı dokümanı eş zamanlı olarak düzenlemesine olanak tanır.

📋 Repository Bilgileri

GitHub Repository: https://github.com/ATAGRSL/collaborative-markdown-editor
Demo: http://localhost:8080 (lokal çalıştırma sonrası)
Lisans: MIT License
Durum: Aktif Geliştirme

🚀 Özellikler

🎨 Çekirdek Özellikler

Gerçek Zamanlı Senkronizasyon ⚡: Bir kullanıcı yazdığında, değişiklikler anında diğer tüm kullanıcılara yansır
Oda Sistemi 🏠: Benzersiz URL'ler ile farklı yazı odaları oluşturabilirsiniz
Anlık Markdown Önizlemesi 👀: Solda Markdown metni, sağda HTML önizlemesi
WebSocket Tabanlı 🔌: Go'nun goroutine'leri ile verimli gerçek zamanlı iletişim
Responsive Tasarım 📱: Modern ve kullanıcı dostu arayüz

👥 Kullanıcı Yönetimi

Active Users Listesi 👥: Odaya katılan tüm kullanıcıları gerçek zamanlı görüntüleme
Renk Kodlaması 🎨: Her kullanıcı için benzersiz renkler ve avatar'lar
Otomatik Kullanıcı Adları 🔤: Rastgele oluşturulan kullanıcı adları
Gerçek Zamanlı Katılma/Çıkma 📈: Kullanıcıların giriş/çıkışlarını anlık takip

💻 Gelişmiş Editör Özellikleri

Markdown Syntax Highlighting 🌈: Kod blokları için syntax highlighting
Auto-save 💾: Yazılar otomatik olarak kaydedilir
Cursor Position Tracking 📍: Diğer kullanıcıların imleç konumlarını görme
Live Preview 🔄: Markdown'dan HTML'e anlık dönüşüm
Keyboard Shortcuts ⌨️: Markdown yazımı için klavye kısayolları

Kurulum ve Çalıştırma

💻 Gereksinimler

Go 1.21+ kurulu olmalı
Web tarayıcı (Chrome, Firefox, Safari, Edge)
Internet bağlantısı (CDN kütüphaneleri için)

🚀 Kurulum Adımları

Proje dizinine gidin:
```
cd collaborative-markdown-editor
```
Bağımlılıkları yükleyin:
```
go mod tidy
```
Server'ı başlatın:
```
go run cmd/server/main.go
```
Web tarayıcıda açın:
```
http://localhost:8080
```

🧪 Hızlı Test

Sunucu başladıktan sonra tarayıcıda http://localhost:8080 adresini açın ve:

✅ Ana sayfa yüklendi mi?
✅ "✨ Create New Room" butonu çalışıyor mu?
✅ Yeni oda oluşturulabiliyor mu?
✅ Markdown editörü çalışıyor mu?
✅ Active Users listesi görünüyor mu?

🎮 Demo Kullanım

1. İlk Kullanıcı - Oda Oluşturma

http://localhost:8080 adresini açın
"✨ Create New Room" butonuna tıklayın
URL'de /room/abc123 gibi bir oda ID'si göreceksiniz
Active Users listesinde kendinizi göreceksiniz

2. İkinci Kullanıcı - Odaya Katılma

Yeni bir tarayıcı sekmesi açın
http://localhost:8080 adresine gidin
Room ID kutusuna abc123 yazın
"Join Room" butonuna tıklayın
Her iki sekmedeki Active Users listesinde 2 kullanıcı göreceksiniz

3. Eş Zamanlı Düzenleme

Bir sekmede markdown yazın: # Merhaba Dünya
Diğer sekmedeki değişiklikleri anlık görün
Her iki sekmedeki preview panelini kontrol edin

📖 Kullanım

🏠 Oda Yönetimi

Yeni Oda Oluşturma

Ana sayfaya gidin (http://localhost:8080)
"✨ Create New Room" butonuna tıklayın
Otomatik olarak yeni bir odaya yönlendirileceksiniz
URL'de benzersiz oda ID'si görünecek

Mevcut Odaya Katılma

Ana sayfaya gidin
Room ID kutusuna katılmak istediğiniz oda ID'sini girin
"Join Room" butonuna tıklayın
Aynı odaya katılmış olacaksınız

✍️ Markdown Editörü Kullanımı

Temel Özellikler

Soldaki Panel: Markdown metni yazın
Sağdaki Panel: Anlık HTML önizlemesi
Gerçek Zamanlı: Tüm değişiklikler diğer kullanıcılara senkronize edilir

Kullanılabilir Markdown Özellikleri

# Başlık 1
## Başlık 2

**Kalın metin**
*İtalik metin*

- Liste öğesi 1
- Liste öğesi 2

[Bağlantı](https://example.com)

`inline kod`

```js
// Kod bloğu
console.log('Merhaba!');
```

> Alıntı metni

Klavye Kısayolları

Ctrl/Cmd + B: Kalın metin
Ctrl/Cmd + I: İtalik metin
Ctrl/Cmd + K: Bağlantı ekleme
Enter: Yeni satır

👥 Çoklu Kullanıcı Özellikleri

Active Users Listesi

Sağ panelde "👥 Active Users" bölümünde tüm aktif kullanıcıları görürsünüz
Her kullanıcı benzersiz bir renkle temsil edilir
Kullanıcı adları otomatik olarak oluşturulur
Gerçek zamanlı giriş/çıkış takibi

Eş Zamanlı Düzenleme

Birden fazla kullanıcı aynı anda yazabilir
Değişiklikler anında tüm kullanıcılara yansır
Cursor pozisyonları takip edilir
Çakışma durumunda otomatik çözümleme

🏗️ Proje Mimarisi

📂 Dosya Yapısı

collaborative-markdown-editor/
├── cmd/server/main.go          # Ana HTTP/WebSocket sunucusu
├── internal/
│   ├── client/client.go        # WebSocket client yönetimi
│   ├── hub/hub.go             # Oda ve kullanıcı hub'ı
│   ├── ot/
│   │   ├── manager.go         # Operational Transformation
│   │   └── operation.go       # OT operasyonları
│   └── user/user.go           # Kullanıcı yönetimi
├── go.mod                     # Go module tanımı
├── go.sum                     # Bağımlılık checksum'ları
└── README.md                  # Bu dosya

🏛️ Ana Bileşenler

Backend Altyapısı

Hub: Tüm odaları ve bu odalardaki client'ları yönetir
Client: Her WebSocket bağlantısını temsil eder
User Manager: Kullanıcı kayıt ve yönetimi
OT Manager: Operational Transformation ile çakışma çözümü
Goroutines: Her client için readPump ve writePump goroutineleri

Frontend Altyapısı

HTML5: Modern ve semantic HTML yapısı
CSS3: Responsive tasarım ve animasyonlar
JavaScript ES6+: Modern JavaScript özellikleri
WebSocket API: Gerçek zamanlı iletişim
Marked.js: Markdown parsing (CDN)

🔌 API Endpoints

Endpoint	Method	Açıklama
`GET /`	GET	Ana sayfa ve oda oluşturma arayüzü
`GET /room/{roomId}`	GET	Belirli bir odanın editör sayfası
WebSocket `/ws/{roomId}`	WebSocket	Gerçek zamanlı mesajlaşma endpoint'i

📊 Veri Akışı

Client Request → HTTP Server → Hub → Room → Clients
                      ↓
WebSocket Connection → Message Processing → OT Manager
                      ↓
User List Updates → Real-time Broadcast → All Clients

🔧 Geliştirme

🚀 Yeni Özellikler Eklemek

Backend Geliştirme

Hub'a yeni metodlar ekleyin (internal/hub/hub.go)
Client davranışını genişletin (internal/client/client.go)
HTTP endpoint'leri ekleyin (cmd/server/main.go)
Kullanıcı yönetimi özelliklerini geliştirin (internal/user/user.go)

Frontend Geliştirme

HTML template'lerini güncelleyin (main.go içindeki template'ler)
CSS stillerini genişletin
JavaScript işlevselliğini artırın
Yeni UI bileşenleri ekleyin

🧪 Test ve Debug

Çoklu Kullanıcı Testi

Çoklu tarayıcı sekmesi açarak gerçek zamanlı senkronizasyonu test edebilirsiniz:

İki farklı tarayıcı sekmesi açın
Aynı odaya katılın
Bir sekmede yazın ve diğer sekmedeki değişiklikleri gözlemleyin
Active Users listesinin doğru çalıştığını kontrol edin

Debugging İpuçları

# Server loglarını izleme
go run cmd/server/main.go

# Port kullanımını kontrol etme
lsof -i :8080

# WebSocket bağlantılarını izleme
# Tarayıcı DevTools → Network → WS tab

🛠️ Sorun Giderme

🚨 Sık Görülen Sorunlar

Port 8080 Kullanımda

# Hangi process kullanıyor?
lsof -i :8080

# Process'i durdur
kill -9 <PID>

# Alternatif port kullan
go run cmd/server/main.go # Port 8080'de çalışır

Bağımlılık Sorunları

# Bağımlılıkları yeniden yükle
go mod tidy

# Cache temizle
go clean -modcache

WebSocket Bağlantı Sorunları

Firewall ayarlarını kontrol edin
Tarayıcıda WebSocket desteğini kontrol edin
Server loglarında bağlantı hatalarını inceleyin

Markdown Parse Hataları

İnternet bağlantısını kontrol edin (CDN kütüphaneleri için)
Tarayıcı console'da JavaScript hatalarını kontrol edin
Marked.js versiyon uyumluluğunu kontrol edin

📞 Destek

Herhangi bir sorun yaşarsanız:

Server loglarını kontrol edin (go run cmd/server/main.go çıktısı)
Tarayıcı console'unda hataları kontrol edin (F12 → Console)
Network tab'ında WebSocket bağlantısını kontrol edin
Port çakışması olup olmadığını kontrol edin

📊 Proje İstatistikleri

📈 Kod Metrikleri

Toplam Go Dosyası: 6 dosya
Toplam Kod Satırı: ~2,000+ satır (backend + frontend)
Ana Paketler: client, hub, ot, user
WebSocket Endpoint'leri: 1 adet
HTTP Route'ları: 2 adet

🎯 Özellik Sayıları

Çekirdek Özellikler: 5 temel özellik
Kullanıcı Yönetimi: 4 kullanıcı özelliği
Editör Özellikleri: 5 editör özelliği
API Endpoint'leri: 3 endpoint
Markdown Özellikleri: 10+ syntax desteği

📊 Performans Metrikleri

Gerçek Zamanlı Bağlantı: WebSocket tabanlı
Eş Zamanlı Kullanıcı: Sınırsız (sistem kaynaklarına bağlı)
Oda Kapasitesi: Her oda için sınırsız kullanıcı
Yanıt Süresi: < 100ms (lokal)
Bellek Kullanımı: ~50MB (idle durumda)

🏗️ Teknik Altyapı

Backend: Go 1.21+ (net/http, goroutines)
WebSocket: Gorilla WebSocket
Frontend: HTML5, CSS3, JavaScript ES6+
Markdown Parser: Marked.js (CDN)
Database: In-memory storage

🏆 Katkıda Bulunma

🤝 Nasıl Katkıda Bulunabilirsiniz?

Fork edin: Bu repository'yi fork edin
Feature branch oluşturun:
```
git checkout -b feature/yeni-ozellik
```
Değişikliklerinizi yapın
Commit edin:
```
git commit -am 'Yeni özellik eklendi'
```
Push edin:
```
git push origin feature/yeni-ozellik
```
Pull Request oluşturun

🎯 İleri Düzey Geliştirme Önerileri

Özellik İyileştirmeleri

Kullanıcı kimlik doğrulama sistemi
Dosya kaydetme/yükleme sistemi
Markdown export (PDF, DOCX)
Tema değiştirme özelliği
Syntax highlighting iyileştirmesi

Performans İyileştirmeleri

Database entegrasyonu (SQLite/PostgreSQL)
Redis ile session yönetimi
CDN entegrasyonu
Load balancing desteği

Güvenlik İyileştirmeleri

Rate limiting
Input sanitization
XSS protection
CSRF protection

🏆 Lisans

Bu proje eğitim amaçlı oluşturulmuştur ve MIT lisansı altında lisanslanmıştır.

🙏 Teşekkürler

Bu projeyi kullanmanız ve ilgilenmeniz için teşekkür ederim! Proje geliştirme sürecinde kullandığım teknolojilere ve kaynaklara minnettarım:

🛠️ Kullanılan Teknolojiler

Go: Backend geliştirme ve concurrency
Gorilla WebSocket: WebSocket server implementation
Marked.js: Markdown parsing ve rendering
HTML5/CSS3: Modern web teknolojileri
JavaScript ES6+: Client-side functionality

📚 Kaynaklar

Go Documentation: Backend geliştirme rehberi
MDN Web Docs: Web API referansları
WebSocket RFC: Protokol spesifikasyonu
Markdown Guide: Syntax referansı

📅 Son Güncellemeler

v1.0.0 - İlk Yayın (Current)

✅ Gerçek zamanlı çok kullanıcılı markdown editörü
✅ WebSocket tabanlı iletişim sistemi
✅ Active Users listesi ile kullanıcı takibi
✅ Responsive tasarım
✅ Operational Transformation desteği
✅ Markdown live preview
✅ Oda tabanlı sistem

🎉 Collaborative Markdown Editor - Modern, gerçek zamanlı markdown editörü! 🚀

Herhangi bir sorun yaşarsanız veya önerileriniz varsa GitHub Issues açmaktan çekinmeyin!

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
cmd/server		cmd/server
internal		internal
README.md		README.md
go.mod		go.mod
go.sum		go.sum

ATAGRSL/collaborative-markdown-editor

Folders and files

Latest commit

History

Repository files navigation