Barber Appointment System.
Müşteri, berber ve salon sahibi için farklı deneyimler sunan; randevu, personel, hizmet, takvim ve bildirim süreçlerini tek sistemde birleştiren üretim ortamındaki salon yönetim platformu.
Yayında · Google Play
- 01 · Rol
- Frontend & mobile development · API integration · Backend collaboration
- 02 · Platform
- Responsive Web · Android
- 03 · Dönem
- Üretimde
- 04 · Durum
- Yayında · Google Play
Proje bağlamı
Barber Appointment System, bir berber salonunun müşteri rezervasyonlarını ve günlük operasyonlarını tek platformda yönetmek için geliştirilen web ve Android uygulamasıdır. Sistem; müşteri, berber ve salon sahibi için birbirinden farklı arayüz ve yetkiler sunarken ayrıca sistem yönetimi için ayrı bir Admin rolü içerir. Müşteriler hizmet ve personel seçerek uygun saatlerden randevu oluşturabilir, mevcut randevularını takip edebilir, hizmetleri, çalışanları, duyuruları ve salon galerisini görüntüleyebilir. Berber ve salon sahibi tarafında ise randevu takvimi, çalışanlar, müşteriler, hizmetler, bloke saatler, çalışma takvimi, duyurular, galeri ve salon bilgileri gibi operasyonel araçlar bulunur. Proje iki kişilik bir ekip tarafından geliştirildi; frontend ve mobil uygulama tarafını ben üstlendim, backend ağırlıklı olarak ekip arkadaşım tarafından geliştirildi ve ihtiyaç duyulan bazı backend çalışmalarına da katkı sağladım.
Temel problem
Frontend tarafındaki temel zorluk, aynı ürünü üç farklı operasyonel rol için anlaşılır ve tutarlı tutarken her rolün tamamen farklı ihtiyaçlarını karşılayan bir bilgi mimarisi oluşturmaktı. Müşterinin birkaç adımda hızlıca randevu oluşturabilmesi gerekirken berberin günlük takvimini ve müşterilerini yönetebilmesi, salon sahibinin ise çalışanlardan hizmetlere ve çalışma takvimine kadar daha geniş bir yönetim alanına erişebilmesi gerekiyordu. Bunun yanında aynı Next.js kod tabanının masaüstünde responsive bir web uygulaması, mobilde ise native davranışlara sahip Android uygulaması olarak çalışması gerekiyordu.
Geliştirdiklerim
- 01
Next.js ve TypeScript tabanlı frontend uygulamasını uçtan uca geliştirdim ve responsive kullanıcı deneyimini oluşturdum.
- 02
Customer, Barber ve Owner rollerine özel sayfa yapıları, navigasyon sistemleri ve role-based erişim akışlarını geliştirdim.
- 03
Müşteri tarafında hizmet seçimi, uygun personel ve tarih/saat seçimi, randevu notu, rezervasyon oluşturma, başarı durumu, geçmiş randevular ve randevu iptali gibi uçtan uca akışları geliştirdim.
- 04
Berber ve salon sahibi için randevu takvimi, günlük randevu detayları, müşteri yönetimi, çalışan yönetimi, hizmet yönetimi, bloke saatler, çalışma takvimi ve salon bilgileri arayüzlerini geliştirdim.
- 05
Duyuru oluşturma ve düzenleme, zengin metin editörü, salon galerisi ve yönetim ekranlarını uygulamanın role-based yapısına entegre ettim.
- 06
Frontend ile ASP.NET Core REST API arasındaki entegrasyon katmanını oluşturarak authentication, kullanıcı, hizmet, personel, takvim, randevu, galeri ve duyuru akışlarını bağladım.
- 07
SMS doğrulama gerektiren kayıt ve telefon doğrulama akışlarını frontend üzerinde geliştirdim ve backend doğrulama servisleriyle entegre ettim.
- 08
Firebase Cloud Messaging ve Capacitor Push Notifications entegrasyonunu frontend/mobile tarafında uygulayarak cihaz token yönetimi, uygulama içi bildirim gösterimi ve bildirime dokunulduğunda ilgili ekrana yönlendirme davranışlarını geliştirdim.
- 09
Next.js web uygulamasını Capacitor kullanarak Android uygulamasına dönüştürdüm; splash screen, status bar, Android geri tuşu, native navigation ve cihaz davranışlarını mobil deneyime uyarladım.
- 10
Backend geliştiricisiyle birlikte API sözleşmeleri ve uygulama akışları üzerinde çalıştım; ihtiyaç duyulan bazı backend geliştirmelerine ve entegrasyon problemlerinin çözümüne katkı sağladım.
Teknik yaklaşım
Frontend, Next.js App Router, React, TypeScript ve Tailwind CSS üzerine kuruldu. Authentication sonrasında kullanıcı rolü hem middleware seviyesinde hem de server-side route guard'larıyla kontrol edilerek Customer, Barber, Owner ve Admin alanları birbirinden ayrılıyor. Customer deneyimi mobil öncelikli bir bottom navigation kullanırken Barber ve Owner deneyimi ekran boyutuna göre sidebar ve mobil bottom navigation arasında uyarlanıyor. Randevu oluşturma akışı hizmet seçiminden başlıyor; seçilen hizmetlere uygun çalışanlar, salonun kapalı günleri ve uygun zamanlar API üzerinden alınarak kullanıcı adım adım rezervasyona yönlendiriliyor. ASP.NET Core backend; Domain, Application, Infrastructure ve API katmanlarından oluşan mimariyle PostgreSQL ve Entity Framework Core üzerinde çalışıyor. Authentication JWT ile yönetilirken SMS doğrulama, Firebase push notifications ve Hangfire background job'ları bildirim ve hatırlatma süreçlerinde kullanılıyor. Web uygulaması aynı kod tabanından Capacitor aracılığıyla Android'e taşındı ve native push, cihaz bilgisi, splash screen ve mobil navigasyon davranışları uygulamaya entegre edildi.
Sistem yapısı
- 01
Frontend
Next.js · React · TypeScript · Tailwind CSS - 02
Roles
Customer · Barber · Owner · Admin - 03
Mobile
Capacitor · Android - 04
Backend
ASP.NET Core · Layered Architecture - 05
Data
PostgreSQL · Entity Framework Core - 06
Messaging
SMS · Firebase Cloud Messaging - 07
Background Jobs
Hangfire
Mevcut durum
Platform üretim ortamında aktif olarak kullanılıyor ve Android uygulaması Google Play üzerinden sunuluyor. Müşteri tarafında rezervasyon oluşturma ve takip akışları; berber ve salon sahibi tarafında ise randevu, personel, hizmet, müşteri, takvim, duyuru ve galeri yönetimi aynı sistem içerisinde çalışıyor. Randevu oluşturma ve iptal gibi önemli olaylarda SMS ve push bildirimleri kullanılıyor; randevu saatinin değiştirilmesi gibi işlemlerde ilgili kullanıcı otomatik olarak bilgilendiriliyor. Hangfire ile zamanlanmış arka plan görevleri yürütülürken aynı Next.js frontend hem responsive web deneyimini hem de Capacitor tabanlı Android uygulamasını besliyor.