Hüseyin DOLHüseyin DOL

Elly CMS Mimarisi

Headless CMS admin panelinin mimari yapısı, entity ilişkileri, katman organizasyonu ve teknik tasarım dokümantasyonu.

Next.js 16
React 19
TypeScript 5.9
Tailwind CSS 4
1

Entity Hiyerarşisi

Veri modelleri arasındaki yapısal ilişkiler

Elly CMS'in temel veri modeli hiyerarşik bir yapıdadır. En üst düzey Page entity'si, içine Component alır. Her component tipine göre Banner, Widget veya Form içerebilir.

Entity Hierarchy Diagram

Page (Sayfa)

En üst düzey entity. title, slug, status, template, seoInfo alanları içerir.

Component

Sayfanın yapı taşları. 3 tipi var: BANNER, WIDGET, FORM.

Banner

Görsel içerik birimi. Desktop, tablet, mobile için ayrı image destekler.

Widget

2 tipi var: BANNER (banner listesi) ve POST (post listesi).

Post (Yazı)

İçerik yazısı. Rich text content, slug, SEO bilgileri içerir.

Form

Schema-driven form. JSON olarak fields, steps ve config saklar.

2

Composition Kuralları

Entity kompozisyon standartları

Composition Rules
Containerİçerebileceği Entity'lerAçıklama
PageComponent[]Bir sayfa N adet component içerir
Component (BANNER)Banner[]Banner tipindeki component direkt banner içerir
Component (WIDGET)Widget[]Widget tipindeki component widget içerir
Component (FORM)Form[]Form tipindeki component form içerir
3

Katman Mimarisi

Uygulama katmanları ve sorumluluklar

Layer Architecture

Route Layer

src/app/(baseLayout)/ altındaki CRUD sayfaları.

Layout Layer

BaseAdminLayout (Sidebar + Header) ve LayoutLess.

Component Layer

app/_components/ altında colocated UI parçaları.

Service Layer

app/_services/ altında her entity için CRUD servisleri.

Shared Infra

Zod şemaları, TypeScript tipleri, utility fonksiyonları.

External APIs

Backend REST API ve Google Gemini AI.

4

CRUD Sayfa Yapısı

Standartlaştırılmış sayfa desenleri

CRUD Pattern

Standart CRUD Rotaları

  • /entityListe (DataTable + Search)
  • /entity/newOluşturma (Form + Validation)
  • /entity/[id]/editDüzenleme (Prefill + Update)

Ortak Componentler

DataTable
SearchInput
DualListbox
ConfirmDialog
StatusBadge
ImageUpload
5

Kimlik Doğrulama Akışı

JWT ve Refresh Token mekanizması

Auth Flow

Login Akışı

Kullanıcı email + şifre gönderir. Server Action backend API'ye istek atar. Dönen token'lar httpOnly cookie'ye yazılır.

Token Refresh

Access token süresi dolunca Middleware fark eder. Refresh token ile yeni access token istenir ve cookie güncellenir.

Security Headers
Set-Cookie: token=...; HttpOnly; Secure
Authorization: Bearer [JWT]