Güzellik Salonu Zincirleri için Yönetim Platformu
Randevudan satışa, personelden müşteri takibine kadar bir salon zincirinin günlük operasyonunu tek bir platforma taşıyan B2B SaaS.
- Rol
- Frontend Developer (tek)
- Stack
- Next.js · TypeScript · MobX · Tailwind CSS
Bir sektörün dijital boşluğu
Güzellik salonları yıllardır büyük ölçüde Excel, kağıt randevu defteri ve birbirine bağlanmayan ayrı yazılımlarla yönetiliyor. Tek bir salon için bu işe yarayabilir; ama Türkiye'nin en büyük zincirlerinden birinin onlarca şubesini yönetmesi söz konusu olunca, bu yaklaşım kısa sürede tıkanıyor.
Müşterimiz tam da bu sorunu yaşıyordu: birden fazla şubede randevular ayrı sistemlerde tutuluyor, müşteri geçmişi şubeler arası taşınmıyor, personel vardiyaları ayrı, satış ve stok raporları manuel toplanıyordu. Bu dağınıklığı tek bir platformda toplayacak bir ürün geliştirildi - biz de projeye, ürünün canlıya çıkmasına yakın bir dönemde dahil olduk.
“Devraldığımız bir code base'i bitirmek değil, sahiplenip launch'a hazırlamak.”
Yaklaşımımız
Projeye, geliştirmesi aylardır devam eden bir frontend'i devralarak girdik. İlk hafta sadece koda baktık: hangi modül nerede, hangi karar neden alınmış, hangi yerler temizliğe muhtaç. Plan yapmadan kod yazmak özellikle bu büyüklükte bir projede çok hızlı yanlış yerlere savrulmamıza yol açabilirdi.
İki paralel iş çıkardık: yeni özellik geliştirmek ve mevcut kodu sürdürülebilir hale getirmek. Bunları sırayla değil, iç içe yürüttük - yeni modüle başlamadan önce o modülün dosyalarını temizledik, sonra üzerine inşa ettik.
Teknik Kararlar
4500+ satırlık modül dosyalarını parçalamak
Devraldığımız code base, modül başına tek büyük dosya prensibiyle yazılmıştı. Bir randevu modülünün UI'ı, business logic'i, API çağrıları ve state yönetimi 4500 satırı geçen tek bir dosyada toplanıyordu. Önceki developer component-based yaklaşımın "her zaman doğru olmadığı" görüşündeydi; ama bu büyüklükte tek dev olarak ilerlemek için bu yapı sürdürülebilir değildi. Her modülü üç katmana ayırdık: yeniden kullanılabilir component'ler, custom hooks içinde toplanan logic, ve MobX store'lar. Bu sayede randevu modülündeki tarih seçici, müşteri kartı, durum etiketi gibi parçalar; satış, personel ve CRM modüllerinde aynen tekrar kullanılabilir hale geldi.
MobX üzerinden API entegrasyonu
Projenin başında alınan kararlardan biri MobX'in state management olarak seçilmesiydi - biz devraldığımızda bu yapı oturmuştu. API çağrılarını da bu yapıyla uyumlu olarak doğrudan store'lar üzerinden yönettik. Backend lead ile sürekli iletişimde kalarak gerekli endpoint'leri ve method'ları beraber tasarladık; frontend tarafındaki bağlantı katmanını biz kurduk.
Karma form mimarisi
Salon yönetiminin formları birbirinden çok farklı: randevu oluşturma karmaşık (zaman çakışması, personel müsaitliği, paket seçimi), müşteri kaydı orta seviye, hızlı bir not eklemek çok basit. Hepsini tek bir kütüphaneye sıkıştırmak yerine ihtiyaca göre ayırdık: karmaşık formlar için React Hook Form'un validation ve performans avantajından faydalandık; basit formlarda MobX/useState ile manuel tuttuğumuzda hem kod daha okunaklı oldu hem de gereksiz bir bağımlılık eklemekten kaçındık.
Çok seviyeli yetki yönetimi
Bir salon zincirinde kullanıcı rolleri katmanlı: merkez yöneticisi, şube müdürü, kasiyer, terapist, resepsiyonist gibi roller var. Her birinin görebileceği sayfa, dokunabileceği müşteri verisi ve yapabileceği işlem farklı. Bunu hem route hem component seviyesinde kurduk: bir rolün hiç giremediği sayfa route guard'da takılırken, girebildiği ama yetkisi sınırlı olduğu sayfalarda butonlar/alanlar component bazlı gizleniyor. İkili koruma sayesinde "yanlış kişi yanlış yere giremez" garantisi tek bir noktaya bağımlı kalmadı.
Arayüzden
Sonuç & Etki
Çalışmamız tamamlandığında ürün canlıya çıkmaya hazır haldeydi. Deployment sürecini backend lead devraldı; ürün ilk müşterisi olarak Türkiye'nin en büyük güzellik salonu zincirlerinden birinde kullanılmaya başlandı.
Devraldığımız frontend, projenin sonunda yeni özelliklerin günler içinde eklenebildiği, ortak component'lerin modüller arası paylaşıldığı ve performans olarak kullanıcı deneyimini bozmayan bir yapıya kavuştu.
Benzer bir projeniz mi var?
Karmaşık bir B2B uygulaması geliştirmek veya mevcut bir code base'i toparlamak için yardıma ihtiyacınız varsa konuşalım.
Teklif Alın