Ana içeriğe geç

Projelere dön

01 / 04

EstateFlow

React, TypeScript, FastAPI ve Firebase ile geliştirilen tam yığın emlak platformu. İlan keşfi, filtreleme, harita üzerinde konum, detay sayfaları, favoriler, karşılaştırma ve rol tabanlı yönetim paneli içeriyor.

EstateFlow tanıtım görseli: solda şehir silueti üzerinde EstateFlow yazısı; sağda filtre paneli, ilan kartları ve konum işaretli harita görünümünü taşıyan dizüstü ekranı ile ilan detayını gösteren telefon.

Proje özeti

Durum
Tamamlandı
Rol
Frontend mimarisi, backend API tasarımı, Firebase entegrasyonu ve kullanıcı arayüzü
Teknolojiler
React · TypeScript · FastAPI · Firebase

Genel Bakış

İlan keşfinden yönetime uzanan bütünlüklü bir emlak deneyimi.

Bağlam
Emlak ilanlarını yalnızca listeleyen bir arayüz yerine; arama, karşılaştırma, konum üzerinden inceleme ve iletişim ihtiyaçlarını aynı akışta ele alan bir full-stack uygulama.
Hedef
Herkese açık keşif deneyimi ile korumalı içerik yönetimini tek bir veri ve API mimarisi üzerinde birleştirmek.
Norvane’in rolü
Frontend mimarisi, backend API tasarımı, Firebase entegrasyonu ve kullanıcı arayüzü

İhtiyaç

Emlak platformlarında kullanıcıların çok sayıda ilan, konum, fiyat ve özellik arasında hızlı karar verebilmesi gerekir. Aynı sistemin yönetim tarafında ise ilan bilgilerinin, görsellerin, durumların ve iletişim taleplerinin kontrollü biçimde yönetilmesi beklenir.

EstateFlow’un temel tasarım problemi, bu iki farklı ihtiyacı tek bir veri ve API mimarisi üzerinde birleştirirken kullanıcı arayüzünü sade ve okunabilir tutmaktı.

  1. Çok boyutlu aramaKonum, ilan türü, emlak türü, fiyat, oda sayısı ve sıralama seçeneklerini anlaşılır tek bir filtre sisteminde birleştirmek.
  2. Harita ve liste uyumuİlanları grid, liste ve harita görünümleri arasında bağlam kaybetmeden göstermek.
  3. İçerik yönetimiİlan oluşturma, düzenleme, görsel yükleme ve durum yönetimini yetkilendirilmiş bir panel üzerinden yürütmek.
  4. Frontend ve veri sınırıTarayıcının Firestore’a doğrudan yazması yerine veri işlemlerini doğrulanan bir backend akışından geçirmek.

Çözüm

EstateFlow’da frontend, ilan verisini doğrudan Firestore üzerinde değiştirmez. React ve TypeScript arayüzü Axios üzerinden FastAPI API’siyle haberleşir. FastAPI, veri doğrulama ve yetkilendirme sonrasında Firebase Admin SDK aracılığıyla Cloud Firestore işlemlerini yürütür.

Bu ayrım, veri erişim kurallarını yalnız tarayıcı tarafına bırakmak yerine backend katmanında doğrulanan bir uygulama mimarisi oluşturur.

  • Doğrulanan API sınırı

    Yazma işlemleri Pydantic doğrulaması ve token kontrolünden geçtikten sonra veri katmanına ulaşır.

  • Rol bazlı erişim

    Herkese açık okuma uçları ile korumalı yönetim uçları aynı API içinde ayrı yetki seviyelerinde tutulur.

  • Paylaşılabilir arama durumu

    Filtreler URL sorgu parametreleriyle uyumlu çalışır; bir arama sonucu paylaşılabilir ve tekrar ziyaret edilebilir kalır.

Veri akışı

  1. React + TypeScript
  2. Axios
  3. FastAPI
  4. Firebase Admin SDK
  5. Cloud Firestore

Kimlik doğrulama

  1. Firebase Authentication
  2. ID token → React arayüzü
  3. Bearer token → FastAPI
  4. Token doğrulama
  5. Rol bazlı API erişimi

Görsel yükleme

  1. Yönetim arayüzü
  2. Firebase Cloud Storage
  3. Dosya bağlantısı → FastAPI
  4. Firestore ilan kaydı
EstateFlow giriş ekranı: giriş yap ve kayıt ol sekmeleri, e-posta ve şifre alanları, ayrıca Google ile giriş seçeneği.
Korumalı yönetim işlemlerine erişim sağlayan kimlik doğrulama ekranı.

Özellikler

Farklı arama biçimlerine uyum sağlayan keşif sistemi.

EstateFlow’un ilan keşif deneyimi, kullanıcının tek bir görünüm biçimine bağlı kalmasını engeller. İlanlar grid, liste veya etkileşimli harita üzerinden incelenebilir.

Filtreleme sistemi; ilan türü, emlak türü, şehir, ilçe, fiyat aralığı, oda sayısı ve sıralama seçeneklerini destekler.

  • Gelişmiş ilan filtreleri
  • Grid, liste ve harita görünümleri
  • Leaflet tabanlı etkileşimli harita
  • Sıralama seçenekleri
  • Favori ve karşılaştırma kısayolları
  • Responsive listeleme deneyimi
EstateFlow ilan listeleme sayfası: solda sıralama, ilan tipi, emlak tipi, şehir, ilçe, fiyat ve oda sayısı filtreleri; sağda grid, liste ve harita geçişleriyle emlak kartları.
Filtre, sıralama ve farklı görünüm seçeneklerini bir araya getiren ilan keşif ekranı.

Karar için gerekli bilgileri tek detay akışında toplamak.

İlan detay sayfası, kullanıcıların temel mülk bilgilerini, görselleri, özellikleri ve konumu farklı sayfalara dağılmadan inceleyebilmesini sağlar.

Görsel galeri ve büyütme görünümü daha ayrıntılı medya incelemesi sunarken Leaflet tabanlı konum alanı ilanın coğrafi bağlamını görünür hâle getirir. İletişim formu ise kullanıcıyı ilanı inceleme aşamasından doğrudan talep oluşturma aşamasına taşır.

  • Detaylı mülk bilgileri ve özellikler
  • Görsel galerisi ve büyütme görünümü
  • Harita ve konum gösterimi
  • İletişim formu
  • Responsive detay yerleşimi
EstateFlow ilan detay sayfası: sayaçlı ve büyütme düğmeli görsel galerisi, küçük görseller, fiyat ve mülk özellikleri, yanında iletişim formu ile favori ve karşılaştırma düğmeleri.
Mülk bilgilerini ve görsel inceleme deneyimini bir araya getiren ilan detay sayfası.
EstateFlow ilan detay sayfasının alt bölümü: ilan tipi, alan, bina yaşı ve ısıtma gibi bilgileri listeleyen tablo, özellikler listesi ve fiyat işaretçisi taşıyan Leaflet haritası.
İlanın konumunu ve çevresel bağlamını gösteren Leaflet tabanlı harita alanı.

İlan ve iletişim taleplerini tek panelden yönetmek.

EstateFlow’un korumalı yönetim alanı, ilan verilerinin uygulama içinden yönetilmesini sağlar. Yetkili kullanıcılar yeni ilan oluşturabilir, mevcut ilanları düzenleyebilir, ilan durumunu değiştirebilir ve öne çıkan ilanları belirleyebilir.

Görsel yükleme süreci Firebase Cloud Storage üzerinden yürütülür; oluşturulan dosya bağlantısı ve medya bilgileri FastAPI aracılığıyla ilgili Firestore ilan kaydına eklenir. Panel aynı zamanda gelen iletişim taleplerinin görüntülenmesini ve durumlarının güncellenmesini destekler.

  • Korumalı yönetim paneli
  • İlan oluşturma ve düzenleme
  • İlan durumu ve taslak yönetimi
  • Öne çıkan ilan kontrolü
  • Firebase Storage görsel yükleme
  • Talep listesi ve durum yönetimi
  • Rol bazlı korumalı route’lar
EstateFlow yönetim paneli: sol kenarda menü, toplam ilan, aktif ilan, öne çıkan ilan ve yeni talep sayılarını gösteren özet kutuları, son ilanlar ve son talepler listeleri.
İlan, talep ve yönetim verilerini özetleyen korumalı yönetim paneli.
EstateFlow yönetim paneli ilan listesi: arama ve durum filtresi, ilan, fiyat, şehir, durum ve öne çıkan sütunlarını taşıyan tablo ile satır başına görüntüleme, düzenleme, yayından kaldırma ve silme işlemleri.
İlanların durumu, görünürlüğü ve yönetim aksiyonlarını bir araya getiren yönetim listesi.
EstateFlow yeni ilan ekleme formu: ilan başlığı, ilan tipi, emlak tipi, fiyat, para birimi, durum ve öne çıkarma alanlarını taşıyan temel bilgiler bölümü ile şehir, ilçe ve mahalle alanlarını taşıyan konum bölümü.
İlan bilgileri ve görsellerinin oluşturulup düzenlendiği yönetim formu.

Arayüz

EstateFlow ana sayfası: koyu zeminli tanıtım alanı, şehir ve ilan türüne göre filtrelenen arama kutusu, öne çıkan bir ilan kartı ve platform istatistikleri.
Emlak arama ve öne çıkan ilanları bir araya getiren ana keşif yüzeyi.
EstateFlow ana sayfasının alt bölümleri: ilan kartlarının devamı, harita ile keşif, piyasa analizi, güvenli platform ve destek başlıklarını taşıyan dört tanıtım kutusu ve turuncu zeminli bir çağrı alanı.
İlan kartlarının ardından gelen tanıtım bölümleri ve kapanış çağrı alanı.

Teknik Yapı

Arayüz, uygulama ve veri katmanları ayrı sorumluluklara bölünmüş; her katman kendi doğrulama ve yetkilendirme adımını taşır.

Arayüz
React · TypeScript · Vite · Tailwind CSS · React Router · Zustand · Axios
Harita
Leaflet · React Leaflet · OpenStreetMap
Uygulama
FastAPI · Python · Uvicorn · Pydantic
Veri ve bulut
Cloud Firestore · Firebase Authentication · Firebase Cloud Storage · Firebase Admin SDK

Sonuç

EstateFlow; kullanıcıya açık emlak keşif deneyimi, detaylı ilan sayfaları, harita tabanlı arama, iletişim akışı ve korumalı yönetim panelini tek bir full-stack mimaride bir araya getirir.

Proje, frontend bileşen mimarisiyle sınırlı kalmadan API tasarımı, kimlik doğrulama, rol bazlı erişim, veri yönetimi ve bulut depolama gibi uygulamanın temel katmanlarını birlikte ele alan kapsamlı bir portföy çalışmasıdır.

Mevcut kapsam ve sonraki geliştirme alanları

  • Favoriler ve karşılaştırma tercihleri mevcut sürümde tarayıcıdaki localStorage üzerinde saklanır.
  • Gerçek zamanlı sohbet kapsam dışıdır.
  • Ödeme veya abonelik sistemi bulunmaz.
  • Harita üzerinde alan çizerek arama henüz uygulanmamıştır.
  • Üretim kullanımı için rate limiting, ek spam koruması ve Firebase güvenlik kurallarının kapsamlı doğrulanması gerekir.
  • Büyük Firestore veri kümelerinde indeksleme ve sayfalama optimizasyonları gerekebilir.

İlgili içgörüler

Sonraki proje

Voltora Elektronik

Elektronik bileşenler için React, TypeScript ve Tailwind CSS ile kurulmuş e-ticaret arayüzü. Ürün keşfi, filtreleme, favoriler, sepet ve hesap ekranlarını mock veriyle çalışan kapsamlı bir frontend sistemi olarak kapsıyor.

Projeyi İncele

Benzer bir dijital ürün üzerinde mi çalışıyorsunuz?

İhtiyacı, mevcut durumu ve hedeflerinizi paylaşın. Uygun başlangıç noktasını birlikte değerlendirelim.

Projenizi Anlatın