Supabase + React ile Modern Web Geliştirme 🚀

Ya Arkadaşım, 2025'te Artık Böyle Yapıyoruz

Bak şimdi, otur anlatayım. Web geliştirme dünyasında ciddi bir devrim oluyor ve sen bunu kaçırmamalısın.

Eskiden Nasıldı, Şimdi Nasıl? 🤔

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.

Supabase Nedir, Niye Bu Kadar Seviliyor? 💚

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?

1. Postgres Veritabanı - Ama hazır, ayarlanmış, production-ready

2. Auth Sistemi - Google, GitHub, email/password... ne istersen

3. Storage - Resimleri, dosyaları at, URL'ini al

4. Realtime - Canlı veri akışı (chat uygulaması yapacaksan müthiş)

5. Row Level Security (RLS) - Veritabanı seviyesinde güvenlik (bunu anlattığımda kafan yanacak)

6. Edge Functions - Serverless fonksiyonlar

7. 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 Neden Bu Kadar İyi Uyuyor? ⚛️

React zaten biliyorsun, bileşen bazlı çalışıyor. Her şey bir component. Şimdi düşün ki backend de hazır durumda. Ne yapıyorsun?

1. Component'ini yazıyorsun

2. Supabase'den veriyi çekiyorsun (3 satır kod)

3. 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.

Gerçek Bir Proje Nasıl Kurulur? 🏗️

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.

1. Public Taraf (Herkesin Göreceği Kısım) 🌍

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.

2. Admin Panel (Senin Kontrol Merkezin) 🔐

İş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:

1. Giriş Kontrolü - Sadece sen girebilirsin (Supabase Auth ile halledersin)

2. Yetkilendirme - Admin rolü kontrolü

3. CRUD İşlemleri - Create, Read, Update, Delete

4. Dosya Yükleme - Supabase Storage kullanırsın

Bu kısmı doğru kurduğun zaman, içerik üretimi tam bir zevk oluyor.

3. Supabase Backend (Görünmeyen Kahraman) ⚙️

Ş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.

RLS: Güvenliğin Gizli Kahramanı 🛡️

Ş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.

Storage: Görsel İşlerini Halledelim 🖼️

Eskiden bir görsel yüklemek için ne yapıyordun?

1. Multer kurardın

2. Sunucuya yüklerdin

3. Boyutlandırırdın belki

4. Bir yere kayıt ederdin

5. 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.

Edge Functions: Süper Güçler 🦸‍♂️

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.

2025'te Bir Proje Nasıl Kurulur? Adım Adım 🗺️

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

Neden 2025'in En İyi Tercihi? 🎯

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

Son Söz 💬

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! 🤘