Bir berber randevusu alırken aslında birkaç şeyi bilmek istiyoruz: Kim müsait, istediğimiz işlem ne kadar sürecek ve ne kadar ödeyeceğiz? Salon tarafında ise aynı randevu; çalışma saatleri, molalar, izinler ve diğer müşterilerin programıyla birlikte düşünülmek zorunda. Berber Taskinnovation projesinde bu iki tarafı aynı uygulamada buluşturdum.
Müşterinin salonu tanıyıp randevu planlayabildiği bir web sitesi, berberin kendi gününü düzenlediği bir çalışma alanı ve yöneticinin salonu yönetebildiği bir panel geliştirdim. Birbirine bağlı bu ekranlarda yapılan işlemler veritabanında saklanıyor. Proje şu anda incelenebilir bir demo olarak yayında; gerçek bir salonun ticari kullanımını temsil etmiyor.
Randevu almak için hesap açmak gerekmiyor
Müşteri tarafındaki akışı berber seçimiyle başlattım. Ardından hizmet, tarih ve saat seçiliyor. Bu sırada seçilen işlemlerin toplam süresi ve tahmini ücreti ekranda kalıyor. Berbere göre hizmetin ücreti veya süresi değişebildiği için özet de bu seçime göre güncelleniyor. Böylece müşteri, randevuyu tamamlamadan önce neyi planladığını görebiliyor.
Uygun saatleri hesaplarken çalışma saatlerini, molaları ve izinleri birlikte ele aldım. Örneğin bir saatlik bakım için yarım saatlik boşluk yeterli değil. Ekranda o saatin neden seçilemediğini de gösteriyorum. Takvimde boş görünen her aralığı randevuya açmak, salonun günlük düzenini doğru yansıtmayacaktı.
Hizmet seçildikçe toplam süre ve tahmini ücret aynı ekranda güncelleniyor.
Randevu oluşturmak için üyelik gerekmiyor. Normal kullanımda müşteri, kendisine verilen takip koduyla randevusunu görüntüleyebiliyor; belirlenen süreler ve kurallar içinde iptal edebiliyor veya başka bir saate taşıyabiliyor. Berberin önerdiği alternatif saati de bu akıştan kabul edebiliyor. Canlı demoda ise seçim adımları incelenebiliyor, ancak randevu oluşturma ve değiştirme işlemleri kapalı.
Saat seçenekleri, seçilen hizmetin süresi ve berberin çalışma düzeniyle birlikte hesaplanıyor.
Berberin takvimi ile salonun yönetimi birbirine bağlı
Berberin çalışma alanında günlük randevularını görebilmesini, randevu durumlarını takip edebilmesini ve kendi çalışma düzenini yönetebilmesini sağladım. Çalışma saatleri, mola ve izin bilgileri müşteri tarafındaki müsaitliği de etkiliyor. Bu nedenle takvim, müşterinin gördüğü saatlerle aynı kurallar üzerinden çalışıyor.
Profil ve çalışma örnekleri de bu alanın bir parçası. Berber kendi profilini düzenleyebiliyor, desteklenen sosyal video bağlantılarını ve kapak görsellerini ekleyebiliyor. Bu çalışmalar salonun tanıtım sayfasında görülebiliyor. Burada video dosyası yüklemek yerine sosyal platformlardaki bağlantıları kullanıyorum.
Yönetici tarafında hizmetler, ekip ve personel hesapları bir araya geliyor. Bir hizmetin ücretini ve süresini berbere göre belirlemek, artık sunulmayan bir hizmeti arşivlemek veya personel hesabını yönetmek mümkün. Salonun ana sayfa metinleri, görselleri ve paylaşım bilgileri de panelden düzenlenebiliyor. İçerikteki her değişiklik için kod dosyası açılması gerekmiyor.
Hizmet kataloğu, müşterinin randevu alırken gördüğü seçeneklerin yönetildiği alan.
Yönetici ve berberin farklı yetkileri var. Bu ayrımı hem ekranlarda hem de işlemlerin kabul edildiği sunucu tarafında uyguladım. Örneğin bir seçeneğin menüde görünmemesi tek başına yeterli değil; o işlem istendiğinde hesabın yetkisi yeniden kontrol ediliyor.
Ekranda küçük görünen, arka planda önemli olan üç konu
Randevu akışında, normal kullanımın yanında aynı anda yapılan işlemleri ve sonradan değişen bilgileri de düşünmek gerekiyor. Üç örnek, projenin bu tarafını iyi anlatıyor:
İki kişi aynı saati seçerse ne olacak? İki müşterinin ekranında aynı saat müsait görünebilir. İlk randevu kaydedildikten sonra diğer isteğin aynı aralığa ikinci bir kayıt açmaması gerekiyor. Bunu uygulama kontrollerine ek olarak veritabanında da engelledim. Çakışan istek geldiğinde müşteriden başka bir saat seçmesi isteniyor.
Aynı istek yeniden gönderilirse ne olacak? Bağlantı sorunu yaşandığında kullanıcı işlemi tekrar deneyebilir. Randevu isteğini tanıyan bir anahtar kullanarak aynı isteğin yeniden gönderilmesinin ikinci bir randevu üretmesini önledim. Kullanıcının tekrar denemesi, salonun takviminde mükerrer bir kayda dönüşmüyor.
Hizmetin fiyatı sonradan değişirse ne olacak? Randevu oluşturulduğunda hizmetin o andaki adını, ücretini ve süresini kayda ekliyorum. Daha sonra katalog güncellendiğinde geçmiş randevunun bilgileri değişmiyor. Hizmet arşive alınsa bile önceki kayıtta hangi işlemin, hangi tutarla planlandığı korunuyor.
Bu kuralların arayüzden bağımsız olarak çalışması için sunucu ve veritabanı testleri de projede yer alıyor. Testlerin odağında randevu kuralları, yetkiler ve demo izinleri gibi uygulamanın davranışını belirleyen konular var.
Demoyu açık tutarken veriyi kontrol altında tutmak
Portfolyodan gelen bir ziyaretçinin uygulamanın yönetim tarafını da inceleyebilmesini istedim. Bunun için örnek personel hesaplarıyla giriş yapılabilen bir demo hazırladım. Ekranlar gezilebiliyor; veri ekleme, düzenleme, silme ve görsel yükleme işlemleri varsayılan olarak kilitli.
Gerektiğinde proje sahibi olarak demo personel hesaplarına 30 dakikalık işlem izni verebiliyorum. Bu süre sunucuda kontrol ediliyor ve bittiğinde yeni değişiklikler yeniden engelleniyor. Müşteriye açık rezervasyon işlemleri ise bu izinden bağımsız olarak kapalı kalıyor. Böylece yönetim akışını göstermek için verdiğim izin, müşteri tarafında randevu oluşturmaya açılmıyor.
Teknik tarafta neler kullandım?
Uygulamayı Next.js, React ve TypeScript ile geliştirdim. Verileri PostgreSQL üzerinde tutuyor, veri erişimini Drizzle ORM ile yönetiyorum. Arayüz etkileşimlerini, sunucudaki iş kurallarını ve veri işlemlerini ayrı sorumluluklarla düzenledim.
- Uygulama ve arayüz: Next.js, React, TypeScript, Tailwind CSS ve Radix UI.
- Veri: PostgreSQL, Neon ve Drizzle ORM.
- Giriş ve medya: Auth.js, Vercel Blob ve görsel doğrulama için Sharp.
- Yayın ve kontroller: Vercel, Jest, React Testing Library, PGlite ve Playwright ile tarayıcı kontrolleri.
Projede çevrim içi ödeme veya otomatik SMS ve e-posta bildirimi bulunmuyor. Mevcut kapsam; randevu planlama, personel takvimi, hizmet ve içerik yönetimi üzerine kurulu. Canlı demoda müşteri akışını gezebilir, personel girişindeki örnek hesaplarla yönetim ekranlarını inceleyebilirsin.