IQV React Dashboard

IQVizyon web uygulamaları için React tabanlı dashboard başlangıç projesidir. Arayüz, IQV Design System bileşenleri ve Fluent UI ikonları kullanılarak oluşturulmuştur.

Production ortamında uygulama, multi-stage Docker image içinde Nginx ile statik SPA olarak servis edilir.

Project Overview

Tek paketlik bir React + Vite uygulamasıdır. Kaynak kod repository kökündedir; geliştirme ve production build aynı dizinden yönetilir.

Features

• IQV Design System (@iqvizyonui/react-components)
• Fluent UI icons (@fluentui/react-icons)
• React Router tabanlı single-page application routing
• Responsive dashboard layout
• Açılır/kapanır sidebar
• Light/Dark tema desteği
• Redux tabanlı oturum durumu
• redux-persist ile oturum bilgisinin saklanması
• Axios HTTP altyapısı (ReqRes demo API)
• Code splitting ve lazy loading
• Progressive Web App desteği
• ESLint ve Prettier
• Docker + Nginx production runtime

Login Credentials

Dashboard giriş bilgileri statik olarak tanımlanmıştır.

• Kullanıcı adı: iqvdashboard
• Şifre: 2018

Giriş işlemi için harici bir authentication servisi veya ReqRes API anahtarı gerekmez.

Bu bilgiler dashboard starter/demo erişimi içindir. Gerçek uygulamalarda authentication yapısı uygulamanın güvenlik gereksinimlerine göre değiştirilmelidir.

Prerequisites

• Node.js 20+ (Docker builder ile uyumlu)
• pnpm 12.5.1 (packageManager alanı — Corepack ile etkinleştirin; pnpm-workspace.yaml içinde allowBuilds ile esbuild onaylı)
• Docker ve Docker Compose (production container çalıştırmak için)

Local Development

git clone https://github.com/iqvizyon-development/iqv-react-dashboard.git
cd iqv-react-dashboard
corepack enable
pnpm install
pnpm run dev

Tarayıcı: http://localhost:5173

Environment Variables

Vite yalnızca VITE_ önekli değişkenleri client bundle'a enjekte eder. Tüm VITE_* değerleri build-time'dır — container runtime'da değiştirmek bundle'ı güncellemez; yeni değerler için image'ı yeniden build edin.

Variable	Required	Notes
VITE_REQRES_API_KEY	No	Opsiyonel ReqRes demo API x-api-key. Login kullanmaz. Boş bırakılabilir.
VITE_DEMO_MODE	No	Legacy — kod tarafından okunmaz; .env.example içinde not edilmiştir.

VITE_* değerleri tarayıcı bundle'ına girer; gerçek sunucu sırrı (server secret) olarak kullanılmamalıdır.

Yerel geliştirme için .env.example dosyasını .env olarak kopyalayabilirsiniz.

Production Build

Node ile doğrudan build:

corepack enable
pnpm install --frozen-lockfile
pnpm run build

Çıktı: dist/

Önizleme:

pnpm run preview

Docker

Multi-stage image: Node + pnpm (build) → nginx:alpine (runtime, port 80).

Build arg (opsiyonel):

docker build \
  --build-arg VITE_REQRES_API_KEY= \
  -t iqv-react-dashboard:latest .

Docker Compose

Generic compose — herhangi bir standart Docker host'ta:

docker compose up -d --build

Ortam değişkenleri (opsiyonel):

Variable	Default	Purpose
HOST_PORT	8080	Host → container 80 eşlemesi
IMAGE_NAME	iqv-react-dashboard	Image adı
IMAGE_TAG	latest	Image etiketi
RESTART_POLICY	unless-stopped	Compose restart
VITE_REQRES_API_KEY	(empty)	Build-time Vite arg

Örnek health check (varsayılan host port):

curl http://localhost:8080/health

Production sunucusu, repoya özel domain/IP yazmadan kendi docker-compose.production.yml override dosyasında şunları tanımlayabilir: external Docker network, sabit container name, host port, image tag, restart policy. Ana docker-compose.yml harici reverse proxy veya external network varsaymaz.

Health Check

Container içinde Nginx:

GET /health → 200 OK

Docker image HEALTHCHECK bu endpoint'i kullanır (http://127.0.0.1/health).

Reverse Proxy Integration

Container yalnızca HTTP port 80 üzerinden SPA sunar. TLS, hostname ve upstream yönlendirme Caddy, Traefik, Nginx Proxy Manager, Apache, Cloudflare Tunnel vb. deployment katmanının sorumluluğundadır; repository buna özel yapılandırma içermez.

Tipik akış: reverse proxy → http://<host>:<HOST_PORT>/ (veya internal Docker network üzerinden app:80).

Project Structure

iqv-react-dashboard/
├── src/
├── public/
├── config.ts
├── Dockerfile
├── docker-compose.yml
├── nginx.conf
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── vite.config.ts
└── ...

Scripts

Command	Description
pnpm run dev	Vite development server
pnpm run build	TypeScript + production build
pnpm run preview	Local preview of dist/
pnpm run lint	ESLint
pnpm run prettier	Prettier check

Configuration

Uygulama adı, tema, meta bilgileri ve PWA: config.ts.

Progressive Web App

PWA config.ts → enablePWA ile açılıp kapatılabilir. Production'da sw.js, registerSW.js ve manifest.webmanifest Nginx tarafında kısa cache ile servis edilir.

Update / Deployment

Basit manuel deployment örneği (exact-SHA/CD olmayan ortamlar için):

git pull
docker compose build
docker compose up -d

Eski dangling image'lar için sunucu politikasına göre docker image prune kullanılabilir.

Security Notes

• Statik login starter/demo amaçlıdır; production güvenlik modeli değildir.
• VITE_* değerleri client bundle'ında görünür olabilir.
• Nginx minimum header'lar: X-Content-Type-Options, Referrer-Policy. CSP bu aşamada zorunlu değildir; sıkı CSP ayrı hardening konusu olarak değerlendirilmelidir (inline script/style riski).
• X-Frame-Options eklenmemiştir; iframe gereksinimi varsa reverse proxy veya ayrı hardening ile ele alınmalıdır.

Authentication Note

Giriş doğrulaması frontend içinde statiktir. Gerçek IQV uygulamalarında resmi authentication/authorization altyapısına bağlanılmalıdır.

License

MIT