frontendVaka Analizi & Mimari İnceleme
Aurora Design System & UI Kit
Erişilebilir, Tip Güvenli ve Temalanabilir Modern React Bileşen Kütüphanesi
Aurora UI Dokümantasyon ve Etkileşimli Playground Arayüzü1 / 2
45k+
Aylık NPM İndirmesi
12 KB (gzipped)
Paket Boyutu
100/100
Erişilebilirlik Skoru
Proje Özeti & Vizyon
Aurora, birden çok ürün ekibinin aynı tasarım dili ve sıfır erişilebilirlik hatasıyla hızla arayüz geliştirmesi için tasarlanmış kurumsal bir UI kütüphanesidir.
Karşılaşılan Problem & Zorluklar
Farklı projelerde stillerin çakışmadan kolayca temalanabilmesi, tam klavye erişilebilirliği ve minimal paket boyutu sağlanması gerekiyordu.
Uygulanan Çözüm
Headless Radix UI mimarisi üzerine Tailwind CSS varyantları (CVA) entegre edildi. Tree-shaking desteğiyle paket boyutu %60 küçültüldü.
Sistem ve Yazılım Mimarisi
Monorepo (Turborepo), Storybook ile izole bileşen testi, Vitest & Playwright ile otomatik UI regresyon testleri.
Kullanılan Teknolojiler & Kütüphaneler:
React 18TypeScriptTailwind CSSStorybookRadix UINPM Package
Temel Özellikler & Fonksiyonlar
40+ erişilebilir, responsive ve tema destekli bileşen
Otomatik karanlık/aydınlık mod algılama ve CSS değişkenleri
Storybook ile interaktif dokümantasyon ve canlı kod editörü
Tam TypeScript desteği ve prop ipuçları