Keyboard.gg: Figma'dan React'e Ön Yüz (Frontend) Uygulaması

Bu proje, karmaşık tasarım özelliklerinin yüksek doğrulukla yayına hazır bir web uygulamasına dönüştürülmesine odaklandı. Buradaki temel zorluk, cihaz eşleme için karmaşık etkileşimli mantığı uygularken %100 görsel doğruluğu korumaktı. React 19 kullanan uygulama, kullanıcılar donanımlarının görsel bir temsiliyle etkileşime girdikçe yüksek frekanslı durum güncellemelerini sorunsuz bir şekilde yönetiyor. Utility-first (önce yardımcı program) tarzı stil yönetimini sağlamak için Tailwind CSS 4 kullanıldı ve böylece arayüzün tüm ekran boyutlarında yüksek performanslı kalması sağlandı.

Görsel uygulamanın da ötesinde, proje canlı bir tuş yakalama sisteminin geliştirilmesini gerektiriyordu. Bu sistem, kullanıcıların cihaz düğmelerini gerçek zamanlı olarak yeniden eşlemelerine olanak tanıyor ve kullanıcı arayüzü içinde anında görsel geri bildirim sağlıyor. Kusursuz bir kullanıcı deneyimi sunmak için, özel React hook'ları ve Yerel Depolama (Local Storage) kullanılarak bir kalıcılık katmanı geliştirildi; böylece kullanıcılar bir arka uç hesabına ihtiyaç duymadan birden fazla yapılandırma profili kaydedip bunlar arasında geçiş yapabiliyor.

Uygulama detayları şunları içeriyordu:

• Farklı cihaz türlerinde yeniden kullanılmak üzere tasarlanmış modüler bileşen mimarisi.

• Gereksiz yeniden işlemeleri (re-render) önlemek için Context API'nin optimize edilmesi.

• Çevrimdışı erişim ve masaüstü benzeri kurulum için PWA (Aşamalı Web Uygulaması) özelliklerinin entegrasyonu.