FRONTEND - PROJE

Workly - Kurumsal İK & Görev Yönetim Platformu

Workly - Kurumsal İK & Görev Yönetim Platformu

Kategori

Frontend

Teknoloji Sayısı

10 Teknoloji

Proje Türü

Web Geliştirme

📝 Proje Açıklaması

Mikro frontend mimarisi ile geliştirilmiş enterprise-level İK yönetimi ve görev takip platformu. Next.js 15, Vue 3 ve Angular 17 ile 6 ayrı uygulama olarak geliştirilmiş, Turborepo monorepo yapısı kullanılarak organize edilmiş. Her modül bağımsız olarak deploy edilebilen, ölçeklenebilir ve güvenli bir yapı. Iframe tabanlı entegrasyon ile modüller arası izole ve güvenli çalışma ortamı. Shared packages (@workly/shared-ui, @workly/shared-utils, @workly/shared-types, @workly/event-bus) ile kod tekrarı önlenmiş ve tutarlılık sağlanmış. Landing, Auth, Shell, Task Manager, Announcements ve HR Management modülleri tamamen işlevsel ve Vercel'de canlı.

Kullanılan Teknolojiler

Next.js 15Vue 3Angular 17TypeScriptTailwind CSSTurborepopnpm WorkspacesVitePiniaVercel

Özellikler

  • 🏗️ Mikro Frontend Mimarisi - Her modül bağımsız geliştirme, deploy ve ölçekleme
  • 🔒 Iframe Tabanlı Entegrasyon - Güvenli, izole modül çalışma ortamı
  • 📦 Monorepo Yönetimi - Turborepo ile hızlandırılmış pnpm workspaces
  • 🎨 Ortak Bileşen Kütüphanesi - Tüm modüllerde tutarlı UI/UX (@workly/shared-ui)
  • 🌐 Çoklu Framework - Next.js, Vue ve Angular sorunsuz entegrasyon
  • 🏠 Landing Page - Modern, responsive pazarlama sitesi (Next.js 15)
  • 🔐 Authentication - Kullanıcı giriş/kayıt sistemi (Vue 3 + Vite + Pinia)
  • 🏢 Shell Dashboard - Merkezi kontrol paneli ve navigasyon (Next.js 15)
  • ✅ Task Manager - Kanban board ile görev yönetimi (Next.js 15)
  • 📢 Announcements - SSG ile duyuru sistemi (Next.js 15)
  • 👥 HR Management - İnsan kaynakları modülü (Angular 17)
  • 📊 Performance Module - Performans takibi (Planlanan)
  • 🎯 Event Bus - Modüller arası iletişim sistemi
  • 💾 Shared Types - TypeScript tip güvenliği tüm uygulamalarda
  • 🛠️ Shared Utils - Ortak yardımcı fonksiyonlar (date, validation, format)
  • ⚡ Turbo Build - Artımlı build sistemi ile hızlı derlemeler
  • 🚀 Vercel Deployment - 6 ayrı production deployment
  • 📱 Responsive Design - Tüm modüllerde mobile-first tasarım
  • 🎨 Tailwind CSS - Utility-first CSS framework
  • 🔄 CI/CD - Otomatik deployment pipeline

Mimari Yapı

Monorepo

pnpm Workspaces - Verimli dependency yönetimiTurborepo - Paralel build ve cache optimizasyonuShared Config - ESLint, TypeScript, Prettier konfigürasyonlarıRoot Scripts - Tüm uygulamaları tek komutla yönetme

Öne Çıkan Noktalar

Enterprise-level mikro frontend mimarisi
6 bağımsız, canlı uygulama
Next.js, Vue ve Angular entegrasyonu
Turborepo monorepo yapısı
Shared packages ecosystem
Iframe tabanlı güvenli entegrasyon
Production-ready Vercel deployment
Ölçeklenebilir ve modüler yapı

Modüller

landing

Modern pazarlama ve tanıtım sitesi

  • Hero section ile çağrı-aksiyon
  • Özellik vitrinleri
  • Müşteri referansları
  • SEO optimizasyonu
  • Responsive tasarım

auth

Kullanıcı kimlik doğrulama modülü

  • Kullanıcı girişi ve kaydı
  • Şifre kurtarma
  • LocalStorage oturum yönetimi
  • Vue Router navigasyon
  • Pinia state management

shell

Ana kontrol paneli ve navigasyon merkezi

  • Merkezi dashboard
  • KPI'lar ve istatistikler
  • Son aktivite akışı
  • Modül navigasyonu
  • Iframe entegrasyon yöneticisi

taskManager

Görev ve proje yönetimi

  • Kanban board (Yapılacak, Devam Eden, İnceleme, Tamamlandı)
  • Öncelik seviyeleri
  • Proje kategorilendirme
  • Görev arama ve filtreleme
  • Bitiş tarihi takibi

announcements

Şirket duyuruları ve haberler

  • Static Site Generation (SSG)
  • SEO optimize edilmiş sayfalar
  • Sabitlenmiş duyurular
  • Kategori filtreleme
  • Görüntüleme takibi

hrManagement

İnsan kaynakları yönetimi

  • Çalışan dizini
  • İzin talep sistemi
  • Devamsızlık takibi
  • Departman organizasyonu
  • Angular 17 modern yapı

Teknik Kararlar

  • ⚙️ Mikro Frontend seçimi - Bağımsız geliştirme ve deploy için
  • ⚙️ Turborepo kullanımı - Build hızı ve cache optimizasyonu
  • ⚙️ Çoklu framework - Her modül için en uygun teknoloji seçimi
  • ⚙️ Iframe entegrasyon - Güvenlik ve izolasyon önceliği
  • ⚙️ Shared packages - Kod tekrarını önleme ve tutarlılık
  • ⚙️ SSG kullanımı - Duyurular için SEO ve performans
  • ⚙️ LocalStorage auth - MVP için basit oturum yönetimi
  • ⚙️ Event Bus pattern - Gevşek bağlı modül iletişimi

Gelecek Planları

🚀 Module Federation implementasyonu
🚀 Gerçek backend API entegrasyonu
🚀 WebSocket ile gerçek zamanlı özellikler
🚀 Kullanıcı yetkilendirme sistemi
🚀 Performance Raporları modülü
🚀 Dark mode desteği
🚀 Çoklu dil (i18n) desteği
🚀 PWA özellikleri
🚀 E-posta bildirimleri
🚀 PDF export işlevselliği

Proje Metrikleri

applications

6 Mikro Frontend

frameworks

3 Framework (Next.js, Vue, Angular)

sharedPackages

4 Shared Package

deployment

6 Production Deployment

codebase

Monorepo with pnpm + Turborepo