Supabase ve React kullanarak modern, hızlı ve güvenli bir full-stack web uygulamasının nasıl geliştirileceğini, mimari yaklaşımları, veri modelini, auth sistemini ve geliştiricilerin sık yaptığı hataları adım adım anlatan kapsamlı bir 2025 rehberi.
Mehmet Karataş
Yazar
Bak şimdi, otur anlatayım. Web geliştirme dünyasında ciddi bir devrim oluyor ve sen bunu kaçırmamalısın.
Hatırlıyor musun, bi proje başlatmak istediğinde başına neler geliyordu? Vallaha saçlarını yolurdun:
Önce backend kurdun mu?
Node.js server yazdın
Express kurup route'ları ayarladın
Veritabanını kurdun (MySQL, PostgreSQL falan)
Kimlik doğrulama sistemini sıfırdan yazdın (JWT, refresh token, hash'leme derken kafayı yerdin)
Dosya yükleme sistemi kurdun
API güvenliğini sağladın
Sunucuyu deploy ettin
Yani işin ucunda tek bir "Merhaba Dünya" yazana kadar 2 hafta geçiyordu.
Peki şimdi?
Şimdi hepimiz şunu istiyoruz: "Yahu ben direkt kodlamaya başlamak istiyorum. Backend falan uğraştırmasın beni."
İşte tam bu noktada devreye React + Supabase ikilisi giriyor.
Kanka bak, Supabase'i şöyle düşün: Firebase'in açık kaynak kodlu, daha güçlü ve Postgres kullanan versiyonu. Ama sadece bu değil.
Supabase sana ne veriyor?
Postgres Veritabanı - Ama hazır, ayarlanmış, production-ready
Auth Sistemi - Google, GitHub, email/password... ne istersen
Storage - Resimleri, dosyaları at, URL'ini al
Realtime - Canlı veri akışı (chat uygulaması yapacaksan müthiş)
Row Level Security (RLS) - Veritabanı seviyesinde güvenlik (bunu anlattığımda kafan yanacak)
Edge Functions - Serverless fonksiyonlar
Dashboard - Her şeyi görebileceğin bir panel
Yani sen artık backend yazmıyorsun, direkt kullanıyorsun. Sistemi kurdun mu, 5 dakikada API'n hazır.
React zaten biliyorsun, bileşen bazlı çalışıyor. Her şey bir component. Şimdi düşün ki backend de hazır durumda. Ne yapıyorsun?
Component'ini yazıyorsun
Supabase'den veriyi çekiyorsun (3 satır kod)
Ekrana basıyorsun
Bitti. Backend yok, API route'u yok, middleware yok. Sadece sen ve React.
Örnek vereyim:
Eskiden bir kullanıcı girişi yapmak için:
Backend'de /login endpoint'i yazardın
Password hash'lerdin
JWT oluşturururdun
Token'ı döndürürdün
Frontend'de token'ı saklardın
Şimdi:
await supabase.auth.signIn({ email, password })
3 satır. Cidden 3 satır. Kafayı yersin.
Tamam teorik kısmı anladık. Şimdi gerçek hayatta nasıl kullanacağız bunu?
Ben sana şöyle bir örnek vereyim: Kendi portfolio siteni yapıyorsun diyelim. Blog yazıları paylaşacaksın, projelerini göstereceksin.
Burası senin vitrindin işte:
Ana Sayfa - Kim olduğunu anlat
Blog - Yazılarını göster
Projeler - Portfolyonu sergile
İletişim - İnsanlar sana ulaşsın
Burada önemli olan ne biliyor musun? Hız. Kullanıcı geldi mi, sayfan 1 saniyede açılmalı. SEO için de önemli bu.
İşte asıl sihir burada. Burası senin blog yazılarını oluşturacağın, düzenleyeceğin yer.
Düşün ki sen her yeni blog yazısı için veritabanına manuel girmiyor, bir arayüzden yapıyorsun:
✍️ Başlık yaz
📝 İçeriği oluştur (rich text editor falan)
🖼️ Kapak görseli yükle
🔖 Etiketler ekle
⚙️ Taslak/yayında durumunu ayarla
Admin panelde olmazsa olmazlar:
Giriş Kontrolü - Sadece sen girebilirsin (Supabase Auth ile halledersin)
Yetkilendirme - Admin rolü kontrolü
CRUD İşlemleri - Create, Read, Update, Delete
Dosya Yükleme - Supabase Storage kullanırsın
Bu kısmı doğru kurduğun zaman, içerik üretimi tam bir zevk oluyor.
Şimdi veritabanını düşünelim. Blog tablon nasıl olmalı?
blogs tablosu:
- id (otomatik)
- title (başlık)
- slug (URL için: "benim-ilk-blogum")
- summary (kısa özet)
- content (tam içerik)
- cover_image (kapak görseli URL'i)
- status (taslak/yayında)
- created_at (oluşturulma tarihi)
- updated_at (güncellenme tarihi)
- author_id (kim yazdı)
Bu yapı tüm modern bloglarda standart. Sen de bunu kullan.
Şimdi en çılgın kısmına geldik. Bak dikkat et, bu çok önemli.
Row Level Security (RLS) diyor Supabase. Ne demek bu?
Normalde veritabanında bir güvenlik kuralı yazmak için backend'de kod yazardın: "Eğer kullanıcı admin ise, bunu yapabilir" falan filan.
Supabase'de direkt veritabanı seviyesinde diyorsun ki:
"Bu tabloya sadece giriş yapmış kullanıcılar erişsin"
"Bu satırı sadece onu oluşturan kullanıcı silebilsin"
"Admin rolündeki kullanıcılar her şeyi görebilsin"
Yani backend yazmadan, SQL seviyesinde güvenlik kuralları yazıyorsun.
Örnek bir RLS kuralı:
CREATE POLICY "Herkes yayındaki blogları görebilir"
ON blogs FOR SELECT
TO authenticated
USING (status = 'published');
Bu ne demek? "Giriş yapmış herkes, sadece 'published' statüsündeki blogları görebilir" demek.
Backend kod yazmadın, ama güvenliğin var. Kafayı yersin.
Eskiden bir görsel yüklemek için ne yapıyordun?
Multer kurardın
Sunucuya yüklerdin
Boyutlandırırdın belki
Bir yere kayıt ederdin
URL'ini oluşturururdun
Şimdi:
const { data } = await supabase.storage
.from('blog-covers')
.upload('gorsel.jpg', dosya)
Hepsi bu. URL'ini direkt alırsın, kullanırsın. 30 saniye.
Bazen sadece CRUD yetmiyor. Mesela:
Bir blog yazısını AI ile özetlemek istiyorsun
Yorum yapıldığında bildirim göndermek istiyorsun
Bir webhook'u handle etmek istiyorsun
Üçüncü parti API'yle konuşmak istiyorsun
İşte Edge Functions tam bunu yapıyor. Serverless fonksiyonlar yazıyorsun, Supabase onları çalıştırıyor.
Tamam, hepsini öğrendik. Şimdi sıfırdan başlıyoruz:
1. Planla
Ne yapacağını çiz kağıda
Hangi sayfalar olacak?
Hangi özellikler olacak?
2. React Projeni Oluştur
npm create vite@latest my-blog -- --template react
3. Supabase Projesini Oluştur
supabase.com'a git
Yeni proje oluştur
Database şifresini kaydet
4. Auth'u Kur
Supabase client'ı kur
Giriş sayfası yap
Auth context'i oluştur
5. Admin Paneli Yap
Protected route'lar kur
CRUD formları yaz
Dosya yükleme ekle
6. Public Sayfaları Yap
Ana sayfa
Blog listesi
Blog detay
Projeler
7. RLS Kurallarını Yaz
Hangi tablo için hangi kural?
Test et
8. Deploy Et
Frontend: Vercel veya Netlify
Backend: Zaten Supabase'de hazır
Kanka sonuç olarak:
Zaman = Para
Backend kurmak 2 hafta sürüyordu → Artık 2 saat
Modern Mimari
Eski usul REST API → Modern, realtime, güvenli
Öğrenme Eğrisi
Backend + Frontend + DevOps → Sadece frontend
Maliyet
Sunucu kirala + yönet → Supabase'in ücretsiz planı bile yetiyor
Ölçeklenebilirlik
Sunucu kapasitesi endişesi → Supabase hallediyor
Bak, ben sana gerçekleri söylüyorum. 2025'te web geliştirme yaparken Supabase + React kullanmıyorsan, kendine zorluk çıkarıyorsun demektir.
Bu ikili:
⚡ Hızlı
🔒 Güvenli
💰 Ekonomik
🚀 Ölçeklenebilir
🧠 Modern
Sen artık backend yazma derdine düşme. Frontend'e odaklan, harika arayüzler yap, kullanıcı deneyimi üzerine düşün. Backend'i Supabase hallediyor zaten.
Başla, dene, hata yap, öğren. Sonra bana teşekkür edersin 😉
Not: Bu rehberi okuduysan ve hâlâ soru işaretin varsa, yaz bana. Beraber hallederiz. Kod yazmak için varız! 🤘
Yorumlar (0)
Henüz yorum yapılmamış. İlk yorumu sen yap!
Yorum Yap