Berkan Türkoğlu
Projeler
Müşteri projesi · React · AWS

Pegasos

Veteriner hastanesi web sitesi · üç şube

Siteyi aç ↗Repositorydurum: yayında · müşteri projesi

Problem

Üç şubeli bir veteriner hastanesinin sitesini yaptım. Müşterinin en önemli isteği şuydu: doktor kadrosunu, blog yazılarını, hasta yorumlarını ve Google puanını her seferinde bana haber vermek zorunda kalmadan kendileri güncelleyebilsinler. Sitenin Google'da üst sıralarda çıkması da gerekiyordu, ama tarayıcıda render edilen bir SPA bunu tek başına sağlayamıyor. Bir de randevu formu üzerinden kişisel veri toplanıyor; bu Türkiye'de KVKK kapsamında yasal sorumluluk demek.

Teknik detaylar

İçeriğin sahibi gerçekten müşteri

Sitede değişebilecek her şey için Sanity'de beş şema kurdum: ekip üyeleri, blog yazıları, hasta yorumları, genel puan ve Instagram akışı. Site bu içerikleri CDN üzerinden, token gerektirmeden okuyor. Sanity'nin image hotspot özelliğini CSS object-position'a bağladım; böylece hastane çalışanı bir doktorun fotoğrafında yüzün olduğu yeri işaretlediğinde, fotoğraf sitedeki farklı boyutların hepsinde doğru kadrajda kalıyor.

Arama motorlarının okuyabildiği SPA

Build bittikten sonra çalışan bir Puppeteer adımı sitedeki bütün sayfaları tek tek geziyor: sabit sayfalar, üç şube, her doktor ve her blog yazısı. Gezdiği her sayfanın render edilmiş HTML'ini diske yazıyor. Böylece Google'ın botu boş bir div yerine içeriği dolu bir sayfa görüyor, ziyaretçi ise sayfa yüklendikten sonra normal SPA deneyimini yaşamaya devam ediyor. URL'ler de query string'e gömülü id'ler değil, Türkçe ve okunabilir adresler.

İletişim formu için sunucu tutmadım

Randevu ve iletişim formları API Gateway üzerinden bir Python Lambda'ya gidiyor, Lambda da SES ile mail gönderiyor. Ortada sürekli ayakta tutulacak, güncellemesi takip edilecek bir sunucu yok. Maliyet de sitenin gerçekten aldığı günlük birkaç form kadar.

Teknoloji
Front end
React 19 · React Router · Sass · Swiper · Leaflet
CMS
Sanity · GROQ · Portable Text
Serverless
AWS API Gateway · Lambda (Python) · SES · DynamoDB
SEO
Puppeteer prerender · Türkçe route slug'ları
Araçlar
Pillow · pillow-heif · rawpy — HEIC/RAW → WebP
Rolüm

Projenin tek geliştiricisiydim: front end, CMS modellemesi, serverless backend ve SEO pipeline'ı.

Site

Ana sayfa — hero slider, arama motorları için prerender ediliyor
API Gateway ve Lambda üzerinden ilerleyen randevu formu
Hizmetler ve Google puanı — ikisini de müşteri Sanity'den güncelliyor
Doktor profilleri; kadraj müşterinin CMS'te işaretlediği hotspot'a göre ayarlanıyor