Kitap Takası — UI Mockuplar

SCRUM-14 · Ana Sayfa & BottomNavigationBar  |  SCRUM-15 · İçerik Sayfaları & Etkileşimli Alanlar · 30 Mayıs 2026

Kimlik Doğrulama Ekranları
Giriş Yap
Login.jsx
9:41📶 🔋
GirişKayıt Ol
🔐
Hesabına Giriş Yap
Kullanıcı adı
Şifre ••••••
Giriş Yap
Hesabın yok mu? Kayıt Ol
⚠️ Hatalı kullanıcı adı veya şifre durumunda hata mesajı gösterilir.
1
Form validasyon — boş alan bırakılamaz
2
Başarısız girişte inline hata mesajı
Kayıt Ol
Register.jsx
9:41📶 🔋
GirişKayıt Ol
Yeni Hesap Oluştur
Kullanıcı adı
Şifre
E-posta
Telefon
Adres
Kayıt Ol
Zaten hesabın var mı? Giriş Yap
3
5 zorunlu alan — tümü NN (not null)
4
Şifre bcrypt (salt 12) ile hashlenip saklanır
Ana Sayfa (Giriş Sonrası)
Root.jsx
9:41📶 🔋
Ana Sayfa Kitaplarım Çıkış
📖

Kitaplarını Takas Et!

Binlerce kitap, sıfır para.
İkinci el kitabını listele, başkasının
kitabını iste.

24
Kitap
12
Kullanıcı
8
Takas
Kitap Ara →
Kitaplığıma Ekle
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
5
BottomNavigationBar — 4 sekme (SCRUM-14)
6
Aktif sekme koyu + üst çizgi ile işaretlenir
7
İstatistik kartları dinamik API verisi
Kitaplarım Sayfası — FAB ile Kitap Ekleme (SCRUM-15)
Kitaplarım (Liste)
MyPage.jsx
9:41📶 🔋
Kitaplığım
📘
Suç ve Ceza
Fyodor Dostoyevski
Sıfır Gibi
🗑
📗
Kürk Mantolu Madonna
Sabahattin Ali
İyi
🗑
📙
1984
George Orwell
Orta
🗑
+
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
1
Her satırda durum rozeti (Sıfır Gibi / İyi / Orta)
2
🗑 butonu → DELETE /api/deleteOldBook
3
FAB (+) → Bottom Sheet açılır (SCRUM-15)
Kitap Ekle — Bottom Sheet
FAB → Modal Sheet (SCRUM-15)
9:41📶 🔋
📘
Suç ve Ceza
Dostoyevski
📗
Kürk Mantolu Madonna
S. Ali
📖 Kitap Ekle
Başlık *
Yazar *
ISBN (isteğe bağlı)
Kitap Durumu
Sıfır Gibi
İyi
Orta
İptal
Ekle ✓
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
4
Bottom Sheet — drag handle + backdrop karartma
5
Durum chip seçici (tek seçim)
6
POST /api/addManualBook çağrısı
Kitap Eklendi — Snackbar
Başarı bildirimi (SCRUM-15)
9:41📶 🔋
Kitaplığım
📘
Suç ve Ceza
Dostoyevski
Sıfır Gibi
🗑
📗
Yeni Kitap ✓
Sabahattin Ali
İyi
🗑
+
✅ Kitap başarıyla eklendi!
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
7
Snackbar — 3 sn sonra otomatik kapanır
8
Yeni eklenen kart yeşil border ile vurgulanır
Kitap Arama Sayfası (SCRUM-15)
Kitap Ara (Boş)
Search.jsx
9:41📶 🔋
Kitap başlığı ara...
🔍
📭
Başlık girerek toplulukta mevcut kitapları bulabilirsiniz.
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
1
Boş durum illüstrasyonu ve yardım metni
Arama Sonuçları
Search.jsx — sonuç listesi
9:41📶 🔋
1984
🔍
3 sonuç bulundu
📕
1984
George Orwell  ·  Sıfır Gibi
👤 ahmet_k
İste
📗
1984 (İngilizce)
George Orwell  ·  İyi
👤 zeynep_b
İste
📘
1984 Yorumu
Çeşitli  ·  Orta
👤 can_y
İste
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
2
Regex tabanlı başlık arama
3
"İste" → POST /api/requestBook çağrısı
4
Kendi kitapların listeye gelmez (filtre)
Gezinti Çekmecesi (Drawer)
Hamburger → Drawer (SCRUM-15)
9:41📶 🔋
Kitap başlığı ara...
A
ahmet_kullanici
ahmet@example.com
🏠Ana Sayfa
📚Kitaplarım
🔍Kitap Ara
🔄Takas İsteklerim
🚪Çıkış Yap
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
5
Drawer — soldan sürgü, backdrop tıklanınca kapanır
6
Kullanıcı adı + e-posta header'da gösterilir
7
Aktif sayfa maviye boyalı drawer öğesi
Takas İstekleri Sayfası (SCRUM-15)
Gelen İstekler
Exchange.jsx — incomingRequests
9:41📶 🔋
Gelen (2)
Giden (1)
Suç ve Ceza
İsteyen: zeynep_b  ·  zeynep@example.com
✓ Kabul Et
✕ Reddet
Kürk Mantolu Madonna
İsteyen: can_y  ·  can@example.com
✓ Kabul Et
✕ Reddet
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
1
Tab bar — Gelen / Giden sekme geçişi
2
"Kabul Et" → POST /api/acceptRequest
Giden İstekler
Exchange.jsx — outgoingRequests
9:41📶 🔋
Gelen (2)
Giden (1)
1984
Sahip: ahmet_k  ·  ahmet@example.com
⏳ Onay Bekleniyor
📦 Kargola
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
3
Durum rozeti — Onay Bekleniyor / Kabul Edildi
4
"Kargola" → POST /api/shipped
Kargo Onay Diyaloğu
Shipped confirm modal (SCRUM-15)
9:41📶 🔋
1984
ahmet_k
📦
Kargo Gönderildi mi?
Bu işlem geri alınamaz. Kitabı karşı tarafa gönderdiğinizi onaylıyor musunuz?
İptal
Evet, Gönderdim
🏠
Ana Sayfa
📚
Kitaplarım
🔍
Ara
🔄
Takas
5
Center dialog — yıkıcı işlem öncesi onay
6
Onaydan sonra takas tamamlandı durumuna geçer
Bileşen — Ekran Haritası
App.jsx loggedIn · userId state Nav.jsx Root.jsx Login.jsx Register.jsx MyPage.jsx Search.jsx Exchange.jsx NotFound.jsx MyBookRow.jsx SearchBookRow.jsx ExchangeRow.jsx BottomNavigationBar (SCRUM-14) Ana Sayfa · Kitaplarım · Ara · Takas Drawer + FAB + Bottom Sheet (SCRUM-15) Hamburger → Drawer · + → Sheet · Shipped → Dialog

Kitap Takası v2.1  ·  SCRUM-14 & SCRUM-15  ·  UI Wireframe Mockuplar  ·  30 Mayıs 2026