Rudder Cloud
Karmaşık sistemler. Net bir kontrol deneyimi.
Rudder Cloud Management Panel · Ekip ve açık kaynak katkı projesi
Aktif geliştirme
GitHub’da kaynak kodÇözdüğüm problem.
Rudder Cloud, kendi sunucularını yöneten geliştiriciler ve ekipler için konteyner yönetimi, bulut yedeklemeleri, canlı terminal ve sistem güncellemelerini ortak bir çalışma alanında topluyor. Arayüz, grafik performansı ve bağlantı yaşam döngüsü üzerinde çalıştım.
Sunucu yönetiminde farklı araçlar arasında geçiş yapmak, siteleri, konteynerleri ve yedeklemeleri takip etmeyi zorlaştırıyor. Benim çalıştığım tarafta yoğun grafik içeren karşılama deneyimiyle canlı terminali arayüze gereksiz yük bindirmeden bir arada tutmak gerekiyordu.
Animasyon çizimini React state akışından ayırdım, tekrar eden grafik hesaplarını önbelleğe aldım ve terminalin görünürlüğünü bağlantı yaşam döngüsünden bağımsız ele aldım. Güncelleme adımlarını yönetici için takip edilebilir bir sürece dönüştürdüm.
- Next.js
- React 19
- TypeScript
- Tailwind CSS 4
- Canvas 2D
- xterm.js
- WebSocket
- Node.js
- Prisma
- SQLite / PostgreSQL
- Docker Engine API
- Linux systemd
Benim katkılarım.
Canvas karşılama sahnesi
Gemi, su halkaları ve atmosferik girdaplardan oluşan hareketli bir giriş sahnesi geliştirdim. Otomatik başlayan ve kontrollü süzülen hareketlerle panelin görsel kimliğini destekledim.
Grafik ve varlık optimizasyonu
Animasyonu React yeniden render döngüsünden ayırdım. Tekrarlanan gradyanları önceden üretilen offscreen sprite’larla değiştirdim; gemi görselini yaklaşık 1,6 MB’tan 180 KB’a indirerek dosya boyutunu yaklaşık %89 azalttım.
Retina ve HiDPI uyumu
Canvas koordinatlarını mantıksal CSS pikselleriyle eşleştirerek farklı piksel yoğunluklarında tutarlı boyut ve netlik sağladım.
Panel içinden sistem güncelleme
Sürüm kontrolü ve yönetici yetkisine bağlı güncelleme akışını geliştirdim. Kod alma, bağımlılıklar, veritabanı migration’ları, derleme ve servis yeniden başlatma adımlarını arayüzden izlenebilir hâle getirdim.
Canlı terminal, tipografi ve dil
Terminal küçültüldüğünde bileşeni kaldırmayarak WebSocket oturumunun korunmasını sağladım. Canlı önizlemeli yazı tipi seçici ve Türkçe–İngilizce arayüz akışları üzerinde çalıştım.
Ürünün içinden.
Uygulamadan ekran görüntüleri. Ayrıntıları görmek için büyütebilirsin.
Kararların arkasında.
Bağımsız çizim döngüsü
Yüksek frekanslı animasyonu React state yönetiminden ayırdım.
Tekrar kullanılabilir grafikler
Her karede hesap yapmak yerine offscreen Canvas sprite önbelleği kullandım.
Görünürlük ve bağlantı ayrımı
Terminalin gizlenmesini bağlantının kapanmasından bağımsız ele aldım.
İzlenebilir güncelleme
Sistem güncellemesini rol kontrolü ve adım günlükleriyle takip edilebilir tuttum.
Rudder’ı terminalden tanı.
Komutlarla ürünü, katkılarımı ve teknolojilerini keşfet.
Paneli, mimarisini ve projedeki katkılarımı keşfet.
Komutlar için help yaz veya aşağıdaki bir kısayolu seç.
Bu konsol proje bilgilerini yerel olarak sunar. Bir sunucuya bağlanmaz.
Komutu Enter ile çalıştırabilir, yukarı/aşağı ok tuşlarıyla komut geçmişini gezebilirsin.
Bu projeden kalan.
Akıcı bir animasyon kadar, bağlantısını koruyan bir terminal ve adımları anlaşılabilen bir güncelleme süreci de kullanıcı deneyiminin parçası.
Müze Soygunu: Gece Vardiyası
Sıradaki çalışma
