Community Platform.
Yaratıcı bir topluluk için geliştirdiğim; public tanıtım sitesi, çok adımlı üyelik başvurusu, role-based authentication, başvuru yönetimi, proje CMS'i ve BlockNote tabanlı yayın sistemini tek bir Next.js uygulamasında birleştiren full-stack community platformu.
Full-stack Web Application · 2025–2026
- 01 · Rol
- Full-stack development · Product architecture · UI/UX implementation
- 02 · Platform
- Responsive Full-stack Web
- 03 · Dönem
- 2025–2026
- 04 · Durum
- Full-stack Web Application · 2025–2026
Proje bağlamı
Community Platform, yaratıcı teknoloji ve sosyal etki odaklı kurgusal bir kolektif için geliştirdiğim full-stack web uygulamasıdır. Proje yalnızca bir landing page değil; public showcase, çok adımlı community application akışı, authentication, role-based authorization, admin workspace, applicant management, proje yönetimi ve Studio Journal yayın sistemini tek bir ürün altında birleştirir. Public tarafta ziyaretçiler kolektifi, çalışma alanlarını, yayınlanmış projeleri ve journal içeriklerini görüntüleyebilir ve topluluğa katılmak için başvuru yapabilir. Yönetim tarafında ise yalnızca admin rolündeki kullanıcıların erişebildiği Studio OS üzerinden başvurular, projeler, yayınlar ve profil/session ayarları yönetilir.
Temel problem
Bu projedeki temel zorluk, görsel olarak güçlü bir creative-community landing page ile gerçek veri ve yetkilendirme kullanan bir yönetim sistemini aynı Next.js mimarisi içerisinde tutarlı biçimde birleştirmekti. Public içeriklerin database'den beslenmesi, admin tarafından yayınlanan proje ve journal kayıtlarının doğrudan public siteye yansıması, üyelik başvurularının detaylı biçimde toplanması ve protected route'ların yalnızca yetkili kullanıcılara açılması gerekiyordu. Bunun yanında rich-text içeriklerin JSON olarak saklanması, mobil/desktop için farklı interaction pattern'lerinin oluşturulması ve motion-heavy tasarımın performans ile dengelenmesi projenin önemli teknik ve ürün kararları arasındaydı.
Geliştirdiklerim
- 01
Next.js App Router, React ve TypeScript ile public site ve protected admin workspace'i aynı full-stack uygulama içerisinde geliştirdim.
- 02
Prisma ORM ve PostgreSQL kullanarak User, Session, Account, Verification, Announcement ve Work modellerinden oluşan veri katmanını tasarladım.
- 03
Better Auth'ı Prisma adapter ile entegre ederek email/password authentication, database-backed sessions ve ek kullanıcı profil alanlarını yapılandırdım.
- 04
Public başvuruların otomatik olarak `user` rolüyle oluşturulduğu ve `admin` rolünün client input üzerinden değiştirilemediği role-based access modelini geliştirdim.
- 05
Admin login, protected layout, server actions ve API endpoint seviyelerinde tekrar doğrulama yaparak yönetim alanlarını server-side authorization ile korudum.
- 06
İsim, doğum yılı, telefon, e-posta, parola, meslek, eğitim alanı, yetenekler, motivasyon ve şehir bilgilerinin toplandığı çok adımlı community application akışını geliştirdim.
- 07
React Hook Form ve Zod kullanarak form doğrulama, şifre kuralları, telefon formatlama ve kullanıcı girdilerinin normalize edilmesini gerçekleştirdim.
- 08
TanStack Table ile applicant yönetim ekranında arama, sorting, pagination, column visibility, fullscreen görünüm ve şehir/rol/meslek/eğitim alanı filtreleri geliştirdim.
- 09
Admin panelinden proje ekleme, düzenleme ve silme işlemlerinin yapılabildiği Project CMS'i geliştirdim; yayınlanan içeriklerin public Selected Work alanında otomatik görüntülenmesini sağladım.
- 10
BlockNote rich-text editor kullanarak adminlerin görsel, başlık ve block-based içeriklerle Studio Journal yazıları oluşturabildiği CMS akışını geliştirdim.
- 11
BlockNote document verisini JSON olarak PostgreSQL'de saklayıp public journal sayfalarında read-only editor renderer ile tekrar oluşturdum.
- 12
Journal kayıtları için dinamik title, description, Open Graph, Twitter Card, published/updated time ve article metadata oluşturan SEO sistemini geliştirdim.
- 13
Database'de base64 olarak tutulan journal cover görsellerini dinamik API route üzerinden binary image response'a dönüştürerek social preview sisteminde kullanılabilir hale getirdim.
- 14
Journal detaylarında scroll progress indicator, scroll-to-top, author bilgisi ve Web Share API ile Twitter/X, LinkedIn, WhatsApp, e-posta ve copy-link paylaşım seçenekleri geliştirdim.
- 15
Framer Motion ile landing section girişleri, stagger animasyonları, mobile navigation, multi-step form transitions, cards, dialogs ve mikro etkileşimleri geliştirdim.
- 16
Lenis ile public landing page üzerinde smooth scrolling deneyimi oluşturdum.
- 17
Tailwind CSS 4, shadcn/ui ve Radix UI primitives kullanarak responsive ve tekrar kullanılabilir bir design system oluşturdum.
- 18
Desktop'ta Dialog, mobilde Drawer kullanan responsive settings ve sharing deneyimleri geliştirdim.
- 19
Zustand ile global settings modal state'ini yöneterek sidebar, profile ve settings akışlarını birbirinden bağımsız componentler arasında senkronize ettim.
- 20
Admin profil düzenleme, profil fotoğrafı güncelleme ve bütün cihazlardaki aktif session kayıtlarını sonlandırma özelliklerini geliştirdim.
- 21
Public landing page'in server tarafında projects ve journal kayıtlarını PostgreSQL'den çekmesini ve database boş olduğunda demo içeriklerle anlamlı bir fallback deneyimi sunmasını sağladım.
Teknik yaklaşım
Uygulama Next.js App Router, React ve TypeScript üzerinde geliştirilmiştir. Public landing page server tarafında Better Auth session bilgisini, yayınlanmış project kayıtlarını ve Studio Journal içeriklerini Prisma üzerinden PostgreSQL'den alır ve client-side motion componentlerine aktarır. Veri katmanında Prisma ORM ve PostgreSQL kullanılır; production bağlantısı Neon uyumlu DATABASE_URL üzerinden yapılandırılmıştır. Authentication Better Auth'ın Prisma adapter'ı ile çalışır ve email/password girişleri, session kayıtları ve kullanıcı hesap verileri database üzerinde tutulur. Public application flow üzerinden oluşturulan hesaplar varsayılan olarak `user` rolüne sahip olur; Studio OS yalnızca `admin` rolündeki session'lara açıktır. Authorization yalnızca UI seviyesinde değil, protected layout, server actions ve API route'larda da tekrar doğrulanır. Projects ve announcements için CRUD işlemleri Next.js server actions üzerinden gerçekleştirilir ve mutation sonrası `revalidatePath` kullanılarak public içerik güncellenir. Studio Journal içerikleri BlockNote editor document'i olarak JSON formatında saklanır ve public article sayfalarında read-only BlockNote renderer ile görüntülenir. Journal sayfalarında dynamic Next.js metadata, Open Graph ve Twitter Card verileri kayıt bazında üretilir. UI katmanında Tailwind CSS 4, shadcn/ui ve Radix primitives; animasyonlarda Framer Motion, smooth scrolling için Lenis, form yönetiminde React Hook Form + Zod, applicant data grid için TanStack Table ve küçük global UI state'leri için Zustand kullanılır.
Sistem yapısı
- 01
Framework
Next.js · React · TypeScript - 02
Database
PostgreSQL · Neon · Prisma - 03
Authentication
Better Auth · Database Sessions - 04
Authorization
Applicant/User · Admin - 05
CMS
Projects · Studio Journal · BlockNote - 06
Forms
React Hook Form · Zod - 07
Data Grid
TanStack Table - 08
UI
Tailwind CSS · shadcn/ui · Radix UI - 09
Motion
Framer Motion · Lenis - 10
State
Zustand - 11
Deployment
Vercel
Mevcut durum
Proje çalışan bir full-stack community platformu olarak public showcase, membership application, admin-only Studio OS, applicant management, project CMS ve Studio Journal modüllerini içeriyor. Admin tarafından oluşturulan projects ve journal içerikleri database üzerinden public siteye yansıyor. Role-based sistemde public başvurular `user`/Applicant rolüyle oluşturulurken yönetim alanları `admin` rolüyle korunuyor. Kod tabanında `editor` için bazı UI hazırlıkları ve User modelinde `status` alanı bulunmasına rağmen ayrı bir editor authorization katmanı veya tam Accept/Reject başvuru workflow'u henüz uygulanmış değil.