Ana SayfaHakkımdaHizmetlerÜrünlerReferanslarBlog
İletişim
Language:TR|EN
Blog'a Dön
Web Geliştirme

Web Gerek'i Nasıl Geliştirdim: Türkiye'nin Yerel İşletmeleri İçin Kodsuz Platform

Bir freelance web geliştiricisi olarak yerel işletmelerin web sitesi ihtiyacını çözmek için kendi SaaS platformumu nasıl kurdum. Teknik kararlar, kullanılan teknolojiler ve öğrenilen dersler.

Efe Gerek1 Nisan 20267 dk okuma
Web Gerek kodsuz web sitesi oluşturucu platformu

Freelance web geliştirici olarak İstanbul'da çalışırken bir kalıp fark ettim: berberler, diş klinikleri, restoranlar, güzellik salonları — hepsi web sitesi istiyordu ama çoğu bütçeyi veya zamanı ayıramıyordu. Wix veya Squarespace gibi platformları deneyenler ise Türkçe arayüz eksikliğinden, karmaşık editörlerden ve dolar bazlı fiyatlardan şikayetçiydi.

Bu problemi çözmek için Web Gerek'i geliştirdim — Türkiye'deki yerel işletmelere özel, kodsuz bir web sitesi platformu.

Problem: Yerel İşletmelerin Web Sitesi Açmazı

Müşterilerimle yaptığım görüşmelerde aynı şeyleri duyuyordum. Kadıköy'deki bir berber "Ben saç kesiyorum, web sitesiyle uğraşamam" dedi. Sultanahmet'teki bir restoran sahibi Wix'te hesap açıp iki saat uğraştıktan sonra vazgeçmişti. Bir diş kliniği sahibi ise freelancer'a ödeyecek bütçesi olmadığını söyledi.

Ortak noktalar şunlardı: Türkçe içerik hazırlama zorluğu, teknik bilgi gerektiren kurulum süreçleri ve aylık maliyetlerin TL bazında yüksek kalması. Bir berber web sitesi için aylık 30-40 dolar ödemek istemiyordu — haklıydı da.

Freelance işlerimde her müşteri için sıfırdan site kuruyordum. Aynı Next.js boilerplate'i, aynı iletişim formu, aynı Google Maps entegrasyonu. Her projede tekrar eden bu iş beni düşündürdü: bu süreci otomatikleştiremez miyim?

İlk Karar: Teknoloji Seçimi

Kendi freelance projelerimde zaten Next.js ve Tailwind CSS kullanıyordum. Hotel Perula ve Günaydın Dental Clinic gibi müşteri sitelerini bu stack ile geliştirmiştim. Performansından ve SEO uyumluluğundan emindim.

Platform için de aynı teknolojileri temel aldım:

Next.js — hem platform arayüzü hem de kullanıcı sitelerinin template engine'i için. Server-side rendering sayesinde Google'ın siteleri kolayca indexlemesini sağlıyor.

Supabase — veritabanı, authentication yerine Clerk kullandım ama tüm kullanıcı verileri, site içerikleri, randevu sistemi ve analitik verileri Supabase'de tutuluyor. PostgreSQL'in güvenilirliği ve Supabase'in gerçek zamanlı özellikleri iyi bir kombinasyon.

Cloudflare — statik dosya hosting için R2, özel alan adı yönetimi için Cloudflare for SaaS, ve edge computing için Workers. Kullanıcıların sitelerinin Türkiye'den hızlı açılması kritikti.

Clerk — kullanıcı kimlik doğrulama. Türkçe lokalizasyonu desteklemesi ve Google ile giriş seçeneği sunması önemliydi.

Freemius — ödeme altyapısı. Türkiye'den global ödeme kabul etmek karmaşık bir konu ve Freemius bu sorunu çözüyor.

Şablon Sistemi: 47 Sektörel Preset

Platformun temelinde şablon sistemi var. Kullanıcı kayıt olduğunda önce sektörünü seçiyor — berber, restoran, diş kliniği, güzellik salonu, elektrikçi, avukat ve daha fazlası. Ardından 15 farklı şablondan birini seçiyor.

Asıl fark şablonun kendisinde değil, preset sisteminde. "Berber" seçtiğinizde hizmetler otomatik olarak "Saç Kesimi", "Sakal Şekillendirme", "Cilt Bakımı" olarak geliyor. Fiyatlar, açıklamalar, çalışma saatleri — hepsi o sektöre uygun hazır içerikle doluyor. Kullanıcı sadece kendi bilgilerini değiştiriyor.

Bu yaklaşımın arkasındaki düşünce basit: bir berber "hero section" veya "call to action" gibi kavramlarla ilgilenmek istemiyor. Tanıdık bir dilde, kendi sektörüne ait içeriklerle karşılaşmak istiyor.

Şu anda 47 sektörel preset var. Her biri için Cloudflare R2'de barındırılan hero arka plan görselleri, sektöre özel hizmet listesi ve örnek fiyatlandırma içeriyor.

QR Menü: Restoranlar İçin Özel Çözüm

Geliştirme sürecinde restoranlardan gelen talepleri ayrı bir özellik olarak ele aldım. QR menü sistemi 5 farklı tasarım sunuyor: klasik, luxury, swiss, newspaper ve retro.

Her tasarım farklı bir restoran tipine hitap ediyor. Fine dining mekanları için zarif koyu tonlar, kafeler için nostaljik gazete tarzı, aile restoranları için sıcak retro renkler. Menüye fotoğraf ekleme, kategorilere ayırma, diyet etiketleri (vegan, glutensiz) ve tek tıkla QR kod indirme gibi özellikler var.

Bir restoran sahibi için en önemli şey menüyü anında güncelleyebilmek. Fiyat değişikliği 30 saniye içinde yansıyor — baskıya gönderme, bekleme, eski fiyat sorunu yok.

Randevu Sistemi ve Analitik

Yerel işletmelerin en çok ihtiyaç duyduğu iki özellik randevu alma ve ziyaretçi takibi. Her ikisini de Pro planın parçası olarak geliştirdim.

Randevu sistemi Supabase üzerinde bir book_slot RPC fonksiyonu ile çalışıyor. İşletme sahibi çalışma saatlerini ve sürelerini belirliyor, müşteri uygun saati seçip randevu alıyor. Basit, çalışan bir sistem — Google Calendar entegrasyonu gibi karmaşık özellikler yerine küçük işletmelerin gerçekten kullanacağı bir yapı.

Analitik modülü sayfa görüntüleme, benzersiz ziyaretçi ve referans kaynaklarını takip ediyor. Google Analytics kadar detaylı değil ama zaten hedef kitle için yeterli. Bir berber "Bu ay kaç kişi sitemi ziyaret etmiş?" sorusuna cevap alabiliyor — daha fazlasına ihtiyacı yok.

Özel Alan Adı: Cloudflare for SaaS

Teknik açıdan en zorlu kısım özel alan adı desteğiydi. Kullanıcılar varsayılan olarak isletmem.webgerek.com gibi bir alt alan adı alıyor. Pro planda ise kendi alan adlarını bağlayabiliyorlar.

Bunu Cloudflare for SaaS altyapısıyla çözdüm. Kullanıcı alan adını girdiğinde sistem otomatik olarak DNS doğrulaması yapıyor, SSL sertifikası oluşturuyor ve siteyi yeni adrese yönlendiriyor. Domain Connect protokolünü de entegre ettim — destekleyen domain sağlayıcılarında (GoDaddy, Namecheap gibi) DNS ayarları tek tıkla yapılabiliyor. Domain Connect'in resmi repository'sine kabul edildik.

Bu süreç normal şartlarda bir web geliştiricinin saatlerini alacak bir iş. Platformda birkaç dakikaya indirgedik.

Editör Deneyimi: Basitlik Her Şeyden Önemli

Platformun editörü bir web tasarım aracı değil — bilinçli olarak. Sol panelde form alanları var: işletme adı, telefon, adres, hizmetler, fiyatlar, çalışma saatleri. Sağ panelde canlı önizleme. Kullanıcı sol tarafta bir alanı değiştirdiğinde sağ tarafta anında görüyor.

Başlangıçta drag-and-drop bir editör düşündüm ama hedef kitleyi tanıyınca vazgeçtim. Bir berber blokları sürükleyip bırakmak istemiyor — telefon numarasını girip bitirmek istiyor. Karmaşıklık değil basitlik kazanıyor.

Blog editörü de aynı felsefede. Dinamik paragraf ekleme, sürükle-bırak ile sıralama ve canlı önizleme var. Menü editöründe ise sol tarafta kategori sidebar'ı, sağ tarafta ürün listesi. Her iki overlay editör de tam ekran çalışıyor ve mobilde de kullanılabilir.

Test ve Kalite: 80+ Otomatik Test

Bir SaaS platformunda güvenilirlik kritik. Kullanıcı sitesini yayınladığında her şeyin çalıştığından emin olmalı. Bu yüzden kapsamlı bir test suite'i kurdum.

Şu anda 80'den fazla otomatik test var: şablon tamamlanma testleri her şablonun tüm gerekli bileşenleri içerdiğini doğruluyor, deploy guard testleri yayınlama öncesi sorunları yakalıyor, QR menü tasarım testleri her menü temasının doğru çalıştığını kontrol ediyor ve HTML sanitasyon testleri güvenlik açıklarını tarıyor.

Blog ve menü validasyon dosyalarında 63'ten fazla güvenlik testi var. Her yeni şablon eklediğimde tüm testlerden geçmesi gerekiyor — bu sayede "yeni şablon eski şablonları bozdu" gibi sorunlar yaşanmıyor.

Çoklu Dil Desteği ve i18n

Platformun tüm arayüzü Türkçe ve İngilizce olarak kullanılabiliyor. Bu sadece kullanıcı arayüzüyle sınırlı değil — API hata mesajları, e-posta bildirimleri ve editör ipuçları da iki dilde çalışıyor.

i18n altyapısını beş aşamada tamamladım. Arayüz tarafında t() fonksiyonu, API tarafında msg() fonksiyonu kullanılıyor. Her metin parçası çeviri dosyalarından geliyor, hardcoded Türkçe metin yok.

Bu önemli çünkü İstanbul'daki birçok işletmenin yabancı müşterisi var. Bir Sultanahmet restoranı Türkçe ve İngilizce menü sunmak istiyor. QR menü sisteminde yapay zeka destekli tek tıkla çeviri özelliği bu ihtiyacı karşılıyor.

Fiyatlandırma Stratejisi

Fiyatlandırmayı üç katmanlı yaptım:

Ücretsiz plan 1 web sitesi, tüm şablonlar ve QR menü içeriyor. Amacı kullanıcının platformu denemesi ve sonucu görmesi. Pro plan aylık 6.99 dolar ile 2 web sitesi, analitik, randevu sistemi, blog, galeri ve özel alan adı desteği sunuyor. Pro+ ise aylık 12.99 dolar ile 15 web sitesine kadar izin veriyor — ajanslar ve çoklu lokasyonlu işletmeler için.

Dolar bazlı fiyatlandırma bilinçli bir tercihti. Türkiye'de TL'nin dalgalanması nedeniyle TL bazlı fiyat sürekli güncelleme gerektirecekti. Freemius üzerinden global ödeme kabul ediyoruz.

Şu Anki Durum ve Sonraki Adımlar

Şu anda platformda 15 web sitesi şablonu, 5 QR menü tasarımı ve 47 sektörel preset bulunuyor. Tüm özellikler — analitik, özel alan adı, randevu sistemi, blog, galeri, çalışma saatleri, fiyat listesi, WhatsApp entegrasyonu, Google Haritalar — production'da çalışıyor.

Sıradaki büyük özellik bir değerlendirme ve puanlama sistemi. Müşterilerin site üzerinden yorum bırakabileceği, memnun müşterilerin Google ve TripAdvisor'a yönlendirileceği, memnun olmayanların ise özel geri bildirim göndereceği bir yapı.

Bu projeyi geliştirirken en çok öğrendiğim şey şu oldu: teknik mükemmellik ile kullanıcı ihtiyacı arasında her zaman bir denge kurmak gerekiyor. Bir berber CRUD operasyonlarıyla ilgilenmiyor — "hizmetlerimi nasıl değiştiririm?" sorusuna basit bir cevap istiyor. Platform geliştirirken her kararı bu perspektiften aldım.

Freelance web geliştirme hakkında daha fazla bilgi için hizmetler sayfama, tamamladığım projeler için referanslar sayfama göz atabilirsiniz.


Web Gerek'i denemek isterseniz webgerek.com adresinden ücretsiz bir hesap oluşturabilirsiniz. Sorularınız için bana iletişim sayfasından ulaşabilirsiniz.

SaaSNo-CodeNext.jsSupabaseCloudflareWeb GerekStartup