BAU Ortaköy Aparts Web Sitesi

Zorluk

Apartın odaları, olanakları ve konumu farklı platformlarda dağınık anlatılıyordu. İstanbul'a gelen öğrenci ve misafirin BAU yerleşkelerine yakınlığı görüp doğrudan rezervasyon talebi bırakabileceği bir site yoktu.

Çözüm

Sıcak ve şehirli bir tonla, tam sayfa renk geçişleri ve alttan yükselen reveal'larla iki dilli bir site tasarladık. Oda detayları, Leaflet tabanlı kampüs haritası, adım adım rezervasyon formu, galeri ve blog; içerik ve görseller PostgreSQL'de, panelden yönetiliyor. Ziyaret ölçümü kendi sunucuda, üçüncü taraf betik olmadan.

Neler yaptık

• Vimeo video banner: Loop, oynatıcı arayüzü olmadan; yalnızca ses düğmesi ve 640-1600 px arası poster görselleri.
• Oda türleri ve olanaklar: Dört oda türü, yatak ve kapasite bilgisi, oda galerisi; on beş tesis olanağı ikonlu liste halinde.
• BAU kampüs haritası ve çevre rehberi: Güney ve Kuzey yerleşkeleri ile Diş Hastanesi'ne mesafe; Ortaköy Camii, Çırağan Sarayı, Zorlu Center gibi çevre noktaları haritada.
• Rezervasyon talebi: Tarih aralığı, misafir sayısı ve KVKK onayı; şema tabanlı doğrulama ve e-posta bildirimi.
• Galeri, blog ve S.S.S.: Videolar, odalar, genel ve çevre sekmeleri; YouTube video kartları; SEO odaklı yazılar.
• Yönetim paneli ve analitik: Odalar, galeri, blog, S.S.S. ve ayarlar; ziyaret ölçümü IP saklanmadan kendi sunucuda.

Süreç

• PRD ve tasarım sistemi: Renk, tipografi, hareket dili ve sayfa spesifikasyonlarının tek dokümanda netleştirilmesi.
• Ön yüz: React, TypeScript ve Tailwind ile iki dilli sayfalar; Lenis ve GSAP ile scroll deneyimi.
• Panel ve API: Çerçevesiz Node sunucu, PostgreSQL, HMAC imzalı oturum, görsel yükleme ve blog editörü.
• Yayın: Sunucuda üretilen SEO etiketleri, sitemap ve llms.txt; Coolify üzerinde dağıtım.

Sonuçlar

• 6 Oda türü (panelden yönetilir)
• 3 BAU yerleşkesi (haritada mesafeyle)
• TR · EN İki dil (otomatik parite testi)

Teknolojiler

• React
• TypeScript
• Tailwind CSS
• GSAP
• Lenis
• Leaflet
• i18next
• Node
• PostgreSQL

Bağlantılar

Web sitesi