01 · Multi-App Monorepo
Tek bir web sitesi değil, uluslararası bir içerik ve büyüme platformu.
3pmetrics'in kurumsal web deneyimini; çoklu uygulama mimarisi, on dilde içerik yönetimi, localized URL yapısı, teknik SEO, CMS preview ve form–API entegrasyonlarıyla ölçeklenebilir bir monorepo sistemi olarak geliştirdim.
- Role
- Frontend Architecture & Development
- System
- pnpm Workspace · Turborepo · Multi-App Monorepo
- Scope
- International Web · Content · SEO · Lead Integration
Event calculator
CO₂ Impact
Content draft
Sustainability platform
Measure, manage and report sustainability impact.
International brand site with localized content, SEO and conversion flows.
Birden fazla uygulama · ortak web ekosistemi
4
Monorepo uygulaması
10
Desteklenen locale
27
Public route
250
Locale bazlı MDX içerik dosyası
126
Farklı localized slug
02 · Project Overview
On dil, birden fazla uygulama ve tek bir tutarlı web deneyimi.
3pmetrics web ekosistemi; kurumsal web sitesi, bağımsız dijital uygulamalar, içerik yönetim uygulaması ve ortak frontend paketlerini aynı geliştirme sistemi altında birleştiriyor. Amaç yalnızca marka sayfaları oluşturmak değil; farklı dillerde içerik yayınlayabilen, arama motorlarında doğru biçimde indekslenen, kullanıcı taleplerini backend servis sınırına taşıyan ve yeni uygulamalar eklendikçe büyüyebilen ortak bir web platformu kurmaktı.
01
International URL Architecture
Aynı içeriği dile ve arama davranışına uygun URL’lerle yayınlamak.
02
Content at Scale
On dilde yüzlerce MDX dosyasını metadata ve preview ilişkileriyle yönetmek.
03
Form & API Integration
Web formlarından backend servis sınırına güvenilir entegrasyon kurmak.
03 · Monorepo Architecture
Farklı uygulamalar, ortak bir mühendislik sistemi.
Bu yapı runtime’da Module Federation ile birleşen microfrontend mimarisi değil. Teknik olarak doğru tanım, bağımsız uygulamaları ortak paketler ve geliştirme araçlarıyla yöneten multi-app monorepo yaklaşımıdır.
3PMETRICS WEB ECOSYSTEM
├── Corporate Web
│ └── Brand · Content · SEO · Conversion
├── EventCO2
│ └── Independent product experience
├── EcoPilot
│ └── Independent product experience
└── Web CMS
└── Content management · Preview
SHARED PACKAGES
├── UI
├── TypeScript Config
├── ESLint Config
└── Tailwind Config04 · International Architecture
Çeviri değil, gerçekten yerelleştirilmiş web mimarisi.
Locale seçimi; navigation, URL, içerik, metadata, canonical, hreflang ve sitemap üretimiyle birlikte merkezi bir sistem içinde yönetiliyor. Varsayılan Türkçe içerik gereksiz locale prefix’i olmadan sunulurken diğer diller locale segmentleri üzerinden ayrılıyor.
01
Request
02
Locale resolution
03
Localized route
04
Translated content
05
Canonical + hreflang
06
Localized sitemap
05 · Localized SEO
Her dil için doğru içerik, doğru URL ve doğru arama sinyali.
Tek bir kaynak slug’ı bütün dillere zorla uygulamak yerine localized slug yaklaşımı kullanıldı. Merkezi metadata yardımcılarıyla title, description, canonical, hreflang ve x-default ilişkileri ortak sistemde yönetiliyor.
- Page-level metadata
- Localized canonical URL
- hreflang alternates
- x-default ilişkisi
- Localized sitemap
- Blog detail metadata
- Kontrollü noindex sayfaları
- Open Graph ve paylaşım metadata’ları
06 · Content Pipeline
On dilde 250 locale bazlı MDX içerik dosyasını yöneten yayın hattı.
Blog içerikleri locale bazlı MDX klasörlerinde yönetiliyor. CMS preview köprüsü sayesinde içerik editörleri yayın öncesi gerçek sayfa görünümünü görebiliyor; kod tabanlı içerik modeliyle editoryal doğrulama aynı sistemde birleşiyor.
Locale directory
content/blogs/ ├── tr/ │ └── article.mdx ├── en/ │ └── article.mdx ├── de/ │ └── article.mdx └── ...
MDX frontmatter
--- title: "..." description: "..." slug: "localized-slug" locale: "tr" --- # Body content
title · description · slug · locale
Blog · TR
Örnek makale başlığı
Localized slug, metadata ve içerik birlikte render edilir.
CMS Preview ready
07 · Form & API Integration
Bir CTA’dan backend servisine uzanan kontrollü form deneyimi.
İletişim, demo ve içerik aboneliği gibi dönüşüm noktalarında form durumunu componentlerden ayırarak Zustand store ve service katmanlarında yönettim. Validation, loading, success ve error davranışlarını ortaklaştırırken form verilerini merkezi API client üzerinden ilgili backend servisine aktardım.
Form Interface
Kullanıcı girdisi ve erişilebilir form deneyimi
Client State
Zustand ile form ve gönderim durumları
Validation
Gönderim öncesi veri kontrolü
API Client
Merkezi ve yeniden kullanılabilir request katmanı
Backend Boundary
Doğrulanmış verinin ilgili servise aktarılması
01
Website Form
02
Client State
03
Validation
04
API Client
05
Backend Service
Related System · Backend Case Study
Monthly Agenda Email Service
Footer’daki aylık gündem aboneliğinin doğrulanması, kalıcı kaydı ve asenkron e-posta teslimatı için geliştirdiğim backend sistemi.
08 · Delivery Architecture
Statik hız, kontrollü yayın, çoklu ortam.
İçerik sayfalarında CDN avantajı için statik üretim ağırlıklı bir strateji uygulanırken CMS preview gibi güncel veri gerektiren rotalar dinamik davranıyor. Azure Static Web Apps üzerinde test ve production ortamları ayrıştırılarak uygulama bazlı deployment düzeni korunuyor.
| Application | Test | Production |
|---|---|---|
| Corporate Web | ✓ | ✓ |
| EventCO2 | ✓ | ✓ |
| EcoPilot | ✓ | — |
| Web CMS | Preview | Controlled |
09 · Engineering Decisions
İçerik, SEO ve ürün ihtiyaçlarını aynı mimaride buluşturan kararlar.
01
Multi-App Monorepo
Farklı uygulamaların kendi sınırlarını korurken ortak frontend standartlarını paylaşabilmesi için pnpm workspace ve Turborepo kullanıldı.
02
Locale-Aware Routing
Dil seçimi içerikten bağımsız bir UI tercihi olarak değil; URL, metadata, navigation ve sitemap bağlamının parçası olarak ele alındı.
03
Localized Slugs
İçerik dosyası kimliği ile kullanıcının gördüğü URL ayrılarak her dilde arama davranışına uygun URL üretimi mümkün hale getirildi.
04
MDX + CMS Preview
Version-controlled içerik modeli korunurken editörlerin yayın öncesi gerçek görünümü inceleyebilmesi için preview köprüsü oluşturuldu.
05
Form Logic Separation
Form state ve API davranışları store/service katmanlarına taşınarak UI bileşenlerinin sorumluluğu sadeleştirildi.
06
Hybrid Rendering
İçerik sayfalarında performans ve crawlability için statik üretim; preview gibi ihtiyaçlarda dinamik rendering tercih edildi.
10 · Outcome
Kurumsal web sitesinden sürdürülebilir bir yayın ve uygulama sistemine.
Ortaya çıkan yapı, kurumsal web sitesinden öte; uluslararası içerik operasyonunu, teknik SEO’yu, dijital uygulamaları ve form–API entegrasyonlarını aynı mühendislik sistemi içinde yöneten sürdürülebilir bir platforma dönüştü. Platform aktif olarak geliştirilmeye devam ediyor.
Ownership özeti
- Next.js frontend mimarisi
- Multi-app monorepo organizasyonu
- Çoklu dil ve localized navigation
- Localized slug ve SEO metadata sistemi
- MDX içerik pipeline’ı
- CMS preview entegrasyonu
- Form ve API entegrasyonları
- Shared configuration ve UI standartları
- Azure Static Web Apps deployment süreçleri