Projelere dön

01 · Featured Project

3pmetrics
Sustainability Platform

Sürdürülebilirlik verisini çalışan, ölçeklenebilir ürün sistemlerine dönüştürmek.

Role
Frontend Architecture & Product Development
Status
Active Development
Stack
React 19 · TypeScript · TanStack Query · Zustand · RHF · Zod · SignalR · .NET
Canlı Ürün
app.demo · analytics

Workspace · Demo Company A

Emissions Overview

2025Scope 1–3

Total tCO₂e

12,480

Sites

14

Pending

04

Emissions by category

Calculation status

Recalculating…68%

Live via SignalR · demo stream

EntityScopetCO₂eStatus
North Plant12,140Ready
Logistics Unit34,860Review
Office HQ2980Ready

Anonimleştirilmiş ürün arayüzü · demo veriler

02 · Project Overview

Bir dashboard değil, ürün ekosistemi.

3pmetrics, şirketlerin sürdürülebilirlik ve kurumsal veri süreçlerini dijital ortamda yönetmesini sağlayan çok modüllü bir ürün platformudur. Platform; veri toplama ve onay süreçlerinden emisyon hesaplamalarına, sürdürülebilirlik performansından dashboard ve raporlama akışlarına kadar farklı iş alanlarını ortak bir kullanıcı deneyiminde bir araya getirir. Bu çalışma, bağımsız ekranlardan oluşan bir dashboard değil; farklı iş domain’lerinin, kullanıcı rollerinin, backend servislerinin ve operasyonel süreçlerin aynı ürün çatısı altında yönetildiği uzun soluklu bir ürün mühendisliği çalışmasıdır.

Çoklu Domain

Modüler frontend mimarisi

Ortak Altyapı

Paylaşılan veri, erişim ve hata yönetimi

Aktif Geliştirme

Sürekli büyüyen kurumsal platform

Problem

Farklı sürdürülebilirlik süreçlerinin ve veri akışlarının tek üründe yönetilebilir hale getirilmesi.

Responsibility

Frontend mimarisi, state ownership, API tüketimi, auth, hata yönetimi ve realtime akışların tasarımı.

Solution

Tek shell altında domain bazlı ayrışan, ortak altyapı kullanan modüler frontend ürün sistemi.

03 · Product Ecosystem

Tek shell, birden fazla ürün alanı

Capability

Identity & Access

Kimlik, oturum ve erişim yönetimi

Capability

Company & Workspace

Şirket, çalışma alanı ve kullanıcı bağlamı

Capability

Data Management

Veri toplama, cevap ve onay süreçleri

Capability

Analytics & Reporting

Hesaplama, dashboard ve raporlama

Capability

Sustainability Workflows

Değerlendirme ve sürdürülebilirlik süreçleri

Capability

Real-time Operations

Canlı hesaplama ve durum takibi

04 · Product in Action

Karmaşık sürdürülebilirlik süreçleri, anlaşılır ürün deneyimleri.

01 · Data Management

Kurumsal verinin toplandığı ve doğrulandığı merkez.

Kategori ve alt kategori yapılarını, kullanıcı cevaplarını, bekleyen onayları ve raporlama süreçlerini tek bir veri yönetimi deneyiminde birleştirdim.

  • Pending approvals
  • Replies table
  • Filtreleme ve pagination
  • URL state
  • Excel / CSV / PDF export
data · replies

Replies

Status: PendingPage 1 / 24
CategorySiteOwnerStatus
Energy usePlant NordA. DemirPending
WasteSite BetaM. KayaApproved
TravelHQ DemoE. YılmazPending
WaterUnit 4S. ArslanRejected
URL filtersExport CSVPDF report

02 · Analytics & Reporting

Veri girişinden hesaplama sonucuna uzanan kontrollü akış.

Çok adımlı dashboard oluşturma, mapping güncelleme, hesaplama durumu ve sonuç raporlamasını aynı ürün akışı içerisinde geliştirdim.

  • Dashboard wizard
  • Mapping ekranı
  • Hesaplama durumu
  • SignalR güncellemesi
  • Dashboard ve export
analytics · wizard
Setup
Mapping
Calculate
Report

Mapping

Diesel · Scope 1
Electricity · Scope 2
Freight · Scope 3

Live job

Calculating inventory

SignalR · processing batch 12/16

03 · Identity & Access

Kullanıcı, şirket ve ürün erişiminin ortak merkezi.

Authentication, workspace seçimi, şirket bağlamı, lisans ve modül erişimlerini platform genelinde tutarlı biçimde yöneten erişim deneyimini geliştirdim.

  • Login / authentication
  • Workspace / company selection
  • Module selection
  • License-based navigation
  • Protected routes
access · workspace

Select workspace

Demo Company A

Data · Analytics

Active

Demo Company B

Workflows

Limited

Partner Org

Reporting · Access

Active

Trial Tenant

Identity only

Trial

05 · Platform Architecture

Tek shell. Birden fazla domain. Ortak mühendislik sistemi.

Farklı kurumsal iş akışlarını bağımsız domain sınırlarında geliştirirken, authentication, veri yönetimi, hata davranışları ve kullanıcı bağlamını ortak frontend katmanları üzerinden yöneten modüler bir platform mimarisi oluşturdum.

Domain Boundaries

Her iş alanı için ayrıştırılmış route, service, hook ve component sınırları.

Shared Infrastructure

Authentication, API, state, i18n ve hata yönetimi için ortak sistemler.

Consistent Experience

Farklı iş akışları arasında korunan tutarlı kullanıcı ve ürün deneyimi.

06 · State Architecture

Her state’in farklı bir sorumluluğu var

01 · Server StateTanStack QueryCache · Invalidation · Refetch
02 · Workflow StateZustandCross-screen process state
03 · URL StateReact RouterFilters · Pagination · History
04 · Form StateReact Hook Form + ZodValidation · Wizard · Errors
05 · Real-time StateSignalRLive calculation tracking
06 · Auth StateContext + Protected RoutesSession · Roles · Access

07 · Backend-driven Product Flows

Frontend ve backend’in birlikte yönettiği ürün akışları.

Kullanıcıya sunulan aksiyonları yalnızca frontend içerisinde hard-code etmek yerine API sözleşmeleri, HATEOAS bağlantıları ve ürünün güncel durumuyla birlikte ele aldım. Cookie tabanlı authentication, lisans kontrolleri ve SignalR bağlantılarıyla güvenli, duruma duyarlı ve gerçek zamanlı deneyimler geliştirdim.

HATEOAS

Backend tarafından belirlenen geçerli aksiyonlar

SignalR

Uzun süren hesaplamaların gerçek zamanlı takibi

Authentication

Cookie tabanlı güvenli oturum yönetimi

Access Control

Şirket, workspace, lisans ve modül bazlı erişim

08 · Delivery Pipeline

Kontrollü delivery.

fig. 12 · delivery-pipeline.svg

controlled release

Feature branch’ten production’a kontrollü ilerleyen release modeli.

  1. 01Feature Branch
  2. 02Pull Request
  3. 03AI Review
  4. 04Branch Preview
  5. 05Team Lead Review
  6. 06Main Merge
  7. 07Test / Staging
  8. 08Production

09 · Ownership & Outcome

Ürün etkisi ve teknik sahiplik.

Product impactKarmaşık sürdürülebilirlik süreçlerini sade, izlenebilir ve operasyonel ürün deneyimlerine dönüştürmek
ArchitectureDomain sınırları, ortak altyapı ve büyümeye hazır frontend sistemi
IntegrationAPI sözleşmeleri, HATEOAS, SignalR ve authentication akışları
DeliveryFeature branch’ten production’a kontrollü release modeli

3pmetrics benim için yalnızca kapsamlı bir frontend projesi değil; ürün ihtiyaçlarıyla teknik kararların sürekli birlikte değerlendirildiği gerçek bir mühendislik sistemi. Aktif geliştirme devam ettikçe platformun frontend mimarisini büyütmeye, karmaşık iş süreçlerini sadeleştirmeye ve yeni iş alanlarını ortak teknik sistem içinde ölçeklendirmeye devam ediyorum.