Porje dökümanları oluşturuldu

This commit is contained in:
2025-11-27 09:27:06 +03:00
parent f6b73dacd2
commit 945c0e7a76
7 changed files with 1637 additions and 33 deletions

1
.serena/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/cache

View File

@@ -0,0 +1,120 @@
# Wisecolt-CI Proje Genel Bilgileri
## Proje Tanımı
Wisecolt-CI, modern web teknolojileriyle geliştirilmiş tam teşekküllü bir CI/CD (Sürekli Entegrasyon/Sürekli Dağıtım) platformudur. Proje, repository otomasyonu ve test süreçlerini yönetmek için tasarlanmıştır.
## Teknoloji Yığını
### Backend
- **Platform**: Node.js + TypeScript
- **Framework**: Express.js
- **Veritabanı**: MongoDB
- **Gerçek Zamanlı**: Socket.io
- **Kimlik Doğrulama**: JWT (JSON Web Token)
- **Process Yönetimi**: Child Process (git, npm komutları)
- **Geliştirme Araçları**: tsx (hot-reload)
### Frontend
- **Platform**: React 18 + TypeScript
- **Build Tool**: Vite
- **Stil**: Tailwind CSS
- **UI Bileşenleri**: shadcn/ui
- **Rotalama**: React Router DOM
- **HTTP Client**: Axios
- **Font Awesome**: Font Awesome SVG Icons
- **Toast Bildirimleri**: Sonner
- **İkonlar**: Lucide React
### DevOps
- **Konteynerizasyon**: Docker + Docker Compose
- **Hot Reload**: Geliştirme anında kod değişiklikleri
- **Environment**: .env konfigürasyon yönetimi
## Proje Yapısı
```
wisecolt-ci/
├── backend/
│ ├── src/
│ │ ├── config/env.ts # Konfigürasyon yönetimi
│ │ ├── middleware/authMiddleware.ts # JWT kimlik doğrulama
│ │ ├── models/job.ts # MongoDB Job modeli
│ │ ├── routes/
│ │ │ ├── auth.ts # Giriş/kimlik endpoint'leri
│ │ │ └── jobs.ts # Job yönetim endpoint'leri
│ │ ├── services/jobService.ts # Job süreç yönetimi
│ │ └── index.ts # Express sunucu ana dosyası
│ ├── package.json
│ ├── tsconfig.json
│ ├── Dockerfile
│ └── .env
├── frontend/
│ ├── src/
│ │ ├── api/
│ │ │ └── client.ts # API istemci ayarları
│ │ ├── components/
│ │ │ ├── ui/ # shadcn/ui bileşenleri
│ │ │ ├── ProtectedRoute.tsx # Korumalı rotalar
│ │ │ ├── DashboardLayout.tsx # Ana kontrol paneli
│ │ │ └── ThemeToggle.tsx # Tema değiştirme
│ │ ├── pages/ # Sayfa bileşenleri
│ │ │ ├── LoginPage.tsx # Giriş sayfası
│ │ │ ├── HomePage.tsx # Ana sayfa
│ │ │ ├── JobsPage.tsx # Job listesi
│ │ │ └── JobDetailPage.tsx # Job detayı
│ │ ├── providers/ # React Context Provider'lar
│ │ │ ├── auth-provider.tsx # Kimlik yönetimi
│ │ │ ├── socket-provider.tsx # Socket.io bağlantısı
│ │ │ ├── live-provider.tsx # Gerçek zamanlı güncellemeler
│ │ │ └── theme-provider.tsx # Tema yönetimi
│ │ ├── lib/utils.ts # Yardımcı fonksiyonlar
│ │ ├── App.tsx # Ana uygulama bileşeni
│ │ └── main.tsx # Giriş noktası
│ ├── package.json
│ ├── vite.config.ts
│ ├── tailwind.config.js
│ └── Dockerfile
├── docker-compose.yml
└── README.md
```
## Temel Özellikler
### Authentication Sistemi
- JWT tabanlı kimlik doğrulama
- .env dosyasında yönetilen admin bilgileri
- Korumalı rotalar için middleware
- localStorage tabanlı token saklama
### Job Yönetim Sistemi
- Repository URL ve test komutu tanımımlama
- Zaman tabanlı otomatik çalıştırma (dakika/saat/gün)
- Real-time durum güncellemeleri
- Job log akışı
- Test sonuçlarını kayıt ve izleme
### Real-time İletişim
- Socket.io tabanlı gerçek zamanlı iletişim
- Job durum güncellemeleri
- Sayaç yayınınlaması
- Canlı log akışı
### UI/UX Özellikler
- Modern React tabanlı arayüz
- shadcn/ui bileşen kütüphanesi
- Tailwind CSS ile responsive tasarım
- Dark/Light tema desteği
- Toast bildirim sistemi
## Port Yapılandırması
- Frontend: http://localhost:5173
- Backend API: http://localhost:4000
- MongoDB: localhost:27017
## Environment Değişkenleri
- PORT: Backend sunucu portu (4000)
- MONGO_URI: MongoDB bağlantı adresi
- ADMIN_USERNAME: Admin kullanıcı adı
- ADMIN_PASSWORD: Admin şifresi
- JWT_SECRET: JWT imzalama anahtarı
- CLIENT_ORIGIN: Frontend adresi (CORS için)

84
.serena/project.yml Normal file
View File

@@ -0,0 +1,84 @@
# list of languages for which language servers are started; choose from:
# al bash clojure cpp csharp csharp_omnisharp
# dart elixir elm erlang fortran go
# haskell java julia kotlin lua markdown
# nix perl php python python_jedi r
# rego ruby ruby_solargraph rust scala swift
# terraform typescript typescript_vts yaml zig
# Note:
# - For C, use cpp
# - For JavaScript, use typescript
# Special requirements:
# - csharp: Requires the presence of a .sln file in the project folder.
# When using multiple languages, the first language server that supports a given file will be used for that file.
# The first language is the default language and the respective language server will be used as a fallback.
# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
languages:
- typescript
# the encoding used by text files in the project
# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
encoding: "utf-8"
# whether to use the project's gitignore file to ignore files
# Added on 2025-04-07
ignore_all_files_in_gitignore: true
# list of additional paths to ignore
# same syntax as gitignore, so you can use * and **
# Was previously called `ignored_dirs`, please update your config if you are using that.
# Added (renamed) on 2025-04-07
ignored_paths: []
# whether the project is in read-only mode
# If set to true, all editing tools will be disabled and attempts to use them will result in an error
# Added on 2025-04-18
read_only: false
# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
# Below is the complete list of tools for convenience.
# To make sure you have the latest list of tools, and to view their descriptions,
# execute `uv run scripts/print_tool_overview.py`.
#
# * `activate_project`: Activates a project by name.
# * `check_onboarding_performed`: Checks whether project onboarding was already performed.
# * `create_text_file`: Creates/overwrites a file in the project directory.
# * `delete_lines`: Deletes a range of lines within a file.
# * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
# * `execute_shell_command`: Executes a shell command.
# * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
# * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
# * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
# * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
# * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
# * `initial_instructions`: Gets the initial instructions for the current project.
# Should only be used in settings where the system prompt cannot be set,
# e.g. in clients you have no control over, like Claude Desktop.
# * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
# * `insert_at_line`: Inserts content at a given line in a file.
# * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
# * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
# * `list_memories`: Lists memories in Serena's project-specific memory store.
# * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
# * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
# * `read_file`: Reads a file within the project directory.
# * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
# * `remove_project`: Removes a project from the Serena configuration.
# * `replace_lines`: Replaces a range of lines within a file with new content.
# * `replace_symbol_body`: Replaces the full definition of a symbol.
# * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
# * `search_for_pattern`: Performs a search for a pattern in the project.
# * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
# * `switch_modes`: Activates modes by providing a list of their names
# * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
# * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
# * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
# * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
excluded_tools: []
# initial prompt for the project. It will always be given to the LLM upon activating the project
# (contrary to the memories, which are loaded on demand).
initial_prompt: ""
project_name: "Wisecolt-CI"
included_optional_tools: []

426
README.md
View File

@@ -1,39 +1,411 @@
# WisecoltCI Monorepo Starter
# Wisecolt-CI 🚀
Minimal, üretime hazır bir full-stack başlangıç kiti. React (Vite, TypeScript, shadcn/ui, Tailwind), Express + Socket.io (TypeScript), MongoDB ve Docker Compose ile dev ortamında hot-reload destekler.
**Modern CI/CD Platformu - Repository otomasyonu ve test süreçleri için tasarlanmış tam teşekküllü web uygulaması**
## Gereksinimler
- Docker ve Docker Compose
![Wisecolt-CI Logo](https://img.shields.io/badge/Wisecolt--CI-blue?style=flat-square) ![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=flat-square) ![React](https://img.shields.io/badge/React-61DAFB?style=flat-square) ![Node.js](https://img.shields.io/badge/Node.js-339933?style=flat-square) ![MongoDB](https://img.shields.io/badge/MongoDB-47A248?style=flat-square)
## Kurulum
1. Ortam dosyalarını oluşturun:
```bash
cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env
## 📋 İçindekiler
- [✨ Özellikler](#-zellikler)
- [🛠 Teknoloji Yığını](#-teknoloji-yığını)
- [📁 Proje Yapısı](#-proje-yapısı)
- [🚀 Kurulum](#-kurulum)
- [🎯 Kullanım](#-kullanım)
- [📚 Dökümantasyon](#-dokümantasyon)
- [🧪 Geliştirme](#-geliştirme)
## ✨ Özellikler
### 🔐 Güvenli Kimlik Yönetimi
- **JWT Tabanlı Authentication**: Modern ve güvenli token tabanlı kimlik doğrulama
- **Korumalı Endpoint'ler**: JWT middleware ile korunan API endpoint'leri
- **Environment Security**: Hassas bilgilerin güvenli .env dosyasında saklanması
### 📊 Job Yönetim Sistemi
- **Repository Otomasyonu**: Otomatik git clone/pull işlemleri
- **Zaman Tabanlı Çalıştırma**: Dakika/saat/gün bazında otomatik test çalıştırma
- **Real-time Durum Güncellemesi**: Socket.io ile anlık durum takibi
- **Test Sonuçları**: Başarılı/başarısız sonuçların kaydedilmesi
- **Log Akışı**: Gerçek zamanlı test loglarının izlenmesi
### ⚡ Gerçek Zamanlı İletişim
- **WebSocket Bağlantısı**: Socket.io ile sürekli iletişim
- **Sayaç Yayınınlaması**: Global sayaç ve işlemler
- **Canlı Güncellemeler**: Job durumlarının anlık bildirilmesi
- **Ping/Pong**: Bağlantı kontrolü
### 🎨 Modern Arayüz
- **React 18**: Modern bileşen tabanlı UI kütüphanesi
- **TypeScript**: Tip güvenli geliştirme deneyimi
- **Responsive Design**: Mobil uyumlu tasarım
- **Tema Desteği**: Dark/Light moda geçiş imkanı
- **Toast Bildirimleri**: Kullanıcı bildirim sistemi
## 🛠 Teknoloji Yığını
### Backend Stack
```yaml
Platform: Node.js 18+
Framework: Express.js
Language: TypeScript
Database: MongoDB
Authentication: JWT
Real-time: Socket.io
Process Manager: Child Process
ODM: Mongoose
Dev Tools: tsx (hot-reload)
```
İstediğiniz admin bilgilerini `.env` dosyalarına girin.
2. Servisleri başlatın:
### Frontend Stack
```yaml
Platform: React 18
Language: TypeScript
Build Tool: Vite
UI Library: shadcn/ui
Styling: Tailwind CSS
HTTP Client: Axios
Routing: React Router DOM
Icons: Lucide React + Font Awesome
Notifications: Sonner
```
### DevOps
```yaml
Containerization: Docker
Orchestration: Docker Compose
Hot Reload: Backend (tsx) + Frontend (Vite)
Environment: .env configuration
Development: Bind mounts for live reload
```
## 📁 Proje Yapısı
```
wisecolt-ci/
├── 📁 docs/ # 📚 Dökümantasyonlar
│ ├── PROJE_DOKUMANTASYONU.md # Detaylı proje dokümantasyonu
│ └── TEKNIK_ANALIZ_RAPORU.md # Teknoloji analizi ve öneriler
├── 📁 backend/ # ⚙️ Backend uygulaması
│ ├── src/
│ │ ├── 📁 config/ # Konfigürasyon yönetimi
│ │ │ └── env.ts
│ │ ├── 📁 middleware/ # Express middleware'leri
│ │ │ └── authMiddleware.ts
│ │ ├── 📁 models/ # MongoDB modelleri
│ │ │ └── job.ts
│ │ ├── 📁 routes/ # API route'ları
│ │ │ ├── auth.ts
│ │ │ └── jobs.ts
│ │ ├── 📁 services/ # İş mantığı katmanı
│ │ │ └── jobService.ts
│ │ └── 📄 index.ts # Ana sunucu dosyası
│ ├── 📄 package.json
│ ├── 📄 tsconfig.json
│ ├── 🐳 Dockerfile
│ └── 📝 .env.example
├── 📁 frontend/ # 🎨 Frontend uygulaması
│ ├── src/
│ │ ├── 📁 api/ # API client katmanı
│ │ │ └── client.ts
│ │ ├── 📁 components/ # UI bileşenleri
│ │ │ ├── 📁 ui/ # shadcn/ui bileşenleri
│ │ │ │ ├── button.tsx
│ │ │ │ ├── card.tsx
│ │ │ │ ├── input.tsx
│ │ │ │ ├── select.tsx
│ │ │ │ └── ...
│ │ │ ├── ProtectedRoute.tsx
│ │ │ ├── DashboardLayout.tsx
│ │ │ └── ThemeToggle.tsx
│ │ ├── 📁 pages/ # Sayfa bileşenleri
│ │ │ ├── HomePage.tsx
│ │ │ ├── JobsPage.tsx
│ │ │ └── JobDetailPage.tsx
│ │ ├── 📁 providers/ # React Context Provider'lar
│ │ │ ├── auth-provider.tsx
│ │ │ ├── socket-provider.tsx
│ │ │ ├── live-provider.tsx
│ │ │ └── theme-provider.tsx
│ │ ├── 📄 App.tsx # Ana uygulama bileşeni
│ │ └── 📄 main.tsx # Giriş noktası
│ ├── 📄 package.json
│ ├── 📄 vite.config.ts
│ ├── 🎨 tailwind.config.js
│ ├── 🐳 Dockerfile
│ └── 📝 .env.example
├── 🐳 docker-compose.yml # 🐳 Konteyner orkestrasyonu
├── 📄 README.md # 📋 Proje ana sayfası
├── 📄 .gitignore # Git ignore kuralları
└── 📝 .env.example # Ortam değişkenleri örneği
```
## 🚀 Kurulum
### Gereksinimler
- **Docker** ve **Docker Compose**
- **Git** (repository klonlama için)
### 1. Repository Klonlama
```bash
git clone https://github.com/kullanici/wisecolt-ci.git
cd wisecolt-ci
```
### 2. Ortam Değişkenlerini Ayarlama
```bash
# Backend konfigürasyonu
cp backend/.env.example backend/.env
# Frontend konfigürasyonu
cp frontend/.env.example frontend/.env
# Admin bilgilerini güvenli şekilde girin
# backend/.env dosyasını düzenleyin
```
### 3. Servisleri Başlatma
```bash
# Tüm servisleri build edip başlatma
docker compose up --build
# Arka planda çalıştırma
docker compose up -d --build
```
### 4. Uygulamaya Erişim
- **Frontend**: http://localhost:5173
- **Backend API**: http://localhost:4000
- **MongoDB**: mongodb://localhost:27017
- **Health Check**: http://localhost:4000/health
## 🎯 Kullanım
### Giriş İşlemi
1. Tarayıcıda http://localhost:5173 adresine gidin
2. Varsayılan giriş bilgileri:
- **Kullanıcı Adı**: `admin`
- **Şifre**: `supersecret`
3. Giriş yap butonuna tıklayın
### Job Yönetimi
#### Yeni Job Oluşturma
1. **Dashboard** menüsünden **Jobs** sayfasına gidin
2. **Yeni Job** butonuna tıklayın
3. Job bilgilerini girin:
- **Job Adı**: Tanımlayıcı bir isim
- **Repository URL**: GitHub repository adresi
- **Test Komutu**: Çalıştırılacak komut (örn: `npm test`)
- **Kontrol Aralığı**: Test sıklığı (dakika/saat/gün)
- **Kontrol Değeri**: Sayısal değer
4. Kaydet butonuna tıklayın
#### Job İzleme
- **Jobs Listesi**: Tüm job'ların durumunu gösterir
- **Real-time Durum**: Socket.io ile anlık güncellemeler
- **Log Akışı**: Test çıktılarını canlı izleme
- **Manuel Çalıştırma**: Job'u anında tetikleme
### Authentication
#### Token Yönetimi
- **Otomatik Login**: Başarılı girişte JWT token oluşturulur
- **Token Saklama**: localStorage'da güvenli saklama
- **Otomatik Yenileme**: Sayfa yenilemede token kontrolü
- **Korumalı Yönlendirme**: Token olmadığında login sayfası
## 📚 Dökümantasyon
### 📄 Detaylı Dökümantasyonlar
- **[PROJE_DOKUMANTASYONU.md](docs/PROJE_DOKUMANTASYONU.md)** - Kapsamlı proje dokümantasyonu
- **[TEKNIK_ANALIZ_RAPORU.md](docs/TEKNIK_ANALIZ_RAPORU.md)** - Teknoloji analizi ve öneriler
### 📖 API Referansı
- **Authentication API'leri**: `/auth/login`, `/auth/me`
- **Job Yönetim API'leri**: CRUD operasyonları, manuel çalıştırma
- **WebSocket Olayları**: Real-time iletişim ve durum güncellemeleri
- **Endpoint Detayları**: Her endpoint için istek/yanıt formatları
### 🏗 Mimari Dokümantasyonu
- **Backend Mimarisi**: Express.js + TypeScript + MongoDB
- **Frontend Mimarisi**: React 18 + Vite + shadcn/ui
- **Socket.io İletişimi**: WebSocket olayları ve yönetimi
- **Veritabanı Tasarımı**: MongoDB schema ve indeksleme
## 🧪 Geliştirme
### Geliştirme Ortamı Kurulumu
```bash
# Repository klonlama
git clone https://github.com/kullanici/wisecolt-ci.git
cd wisecolt-ci
# Backend bağımlılıkları
cd backend
npm install
# Frontend bağımlılıkları
cd ../frontend
npm install
# Servisleri başlatma
docker compose up --build
```
3. Uygulamaya erişin:
- Frontend: http://localhost:5173
- Backend API: http://localhost:4000
- MongoDB: localhost:27017
### Hot Reload Özellikleri
- **Backend**: `tsx watch src/index.ts` - TypeScript derlemesi ve sunucu yeniden başlatma
- **Frontend**: Vite dev server - Hızlı modül değişiklikleri ve tarayıcı yenilemesi
- **Docker Bind Mounts**: Kod değişikliklerinin konteynerde anlık yansıması
## Giriş Bilgisi
`.env` dosyasındaki değerleri kullanın (varsayılanlar):
- Kullanıcı adı: `admin`
- Şifre: `supersecret`
### API Geliştirme
```typescript
// Yeni route ekleme
import { Router } from 'express';
import { authMiddleware } from '../middleware/authMiddleware';
## Özellikler
- **Auth**: `/auth/login` ile .env'deki kimlik bilgilerini kontrol eder, JWT döner; `/auth/me` korumalı.
- **Socket.io**: Login sonrası frontend token ile bağlanır, basit `ping/pong` olayı mevcut.
- **Tema**: shadcn/ui teması, Tailwind sınıf stratejisi, localStorage kalıcılığı.
- **Hot Reload**: Backend `tsx watch`, Frontend Vite dev server.
const router = Router();
router.use(authMiddleware);
## Notlar
- Frontend API adresi `frontend/.env` içindeki `VITE_API_URL` ile ayarlanır.
- Docker bind mount sayesinde kod değişiklikleri konteynerde otomatik yansır.
router.get('/endpoint', (req, res) => {
res.json({ message: 'API çalışıyor' });
});
export default router;
```
### Frontend Geliştirme
```typescript
// Yeni bileşen oluşturma
import React from 'react';
const YeniBilesen = () => {
return (
<div className="p-4">
<h1>Yeni Bileşen</h1>
<p>Bileşen içeriği</p>
</div>
);
};
export default YeniBilesen;
```
### Test Çalıştırma
```bash
# Backend testleri
cd backend
npm test
# Frontend testleri
cd frontend
npm test
```
### Kod Standartları
- **TypeScript**: Strict typing ve interface kullanımı
- **ESLint**: Kod kalite kontrolü
- **Prettier**: Kod formatlama
- **Git Hooks**: Pre-commit validation'ları
## 🔧 Konfigürasyon
### Environment Değişkenleri
```bash
# Backend (.env)
PORT=4000 # Backend sunucu portu
MONGO_URI=mongodb://mongo:27017/wisecoltci # MongoDB bağlantı adresi
ADMIN_USERNAME=admin # Admin kullanıcı adı
ADMIN_PASSWORD=supersecret # Admin şifresi
JWT_SECRET=gizli-jwt-anahtari # JWT imzalama anahtarı
CLIENT_ORIGIN=http://localhost:5173 # Frontend adresi (CORS için)
# Frontend (.env)
VITE_API_URL=http://localhost:4000 # Backend API adresi
```
### Port Yapılandırması
| Servis | Port | Açıklama |
|--------|------|------------|
| Frontend | 5173 | Vite dev server |
| Backend | 4000 | Express API sunucusu |
| MongoDB | 27017 | Veritabanı servisi |
## 🚨 Hata Ayıklama
### Common Issues
1. **Port Çakışması**: Portların kullanımda olup olmadığını kontrol edin
2. **MongoDB Bağlantı Hatası**: Docker servisinin çalıştığından emin olun
3. **CORS Hatası**: CLIENT_ORIGIN ayarını kontrol edin
4. **JWT Hatası**: Token süresi dolmuş olabilir
### Log Kontrolü
```bash
# Docker konteyner logları
docker compose logs backend
docker compose logs frontend
docker compose logs mongo
# Real-time loglar
# Browser developer tools > Console
# Socket.io events için network tab
```
### Performans Optimizasyonu
- **Database İndeksleme**: Sık sorgulanan alanlar için indeksler
- **Frontend Bundle**: Vite build optimizasyonu
- **Caching**: MongoDB ve Redis cache stratejileri
- **Code Splitting**: Lazy loading implementasyonu
## 📈 Vizyon ve Yol Haritası
### Mevcut Durum (v1.0)
- ✅ Temel CI/CD platformu
- ✅ Real-time job yönetimi
- ✅ Modern web arayüzü
- ✅ Konteyner orkestrasyonu
### Gelecek Planlar
- 🔄 **Multi-branch Support**: Farklı branch'ler için job yönetimi
- 🔔 **Bildirim Sistemi**: E-posta ve Slack bildirimleri
- 📊 **Dashboard İstatistikleri**: Performans ve kullanım metrikleri
- 🛡️ **Güvenlik İyileştirmeleri**: 2FA ve rate limiting
- 🌐 **Multi-cloud Support**: AWS, GCP, Azure entegrasyonu
- 📝 **Custom Test Commands**: Esnek test komutu yapılandırması
### E-post Listesi
- 📊 **Dashboard İstatistikleri**: Job performans grafikleri
- 🔔 **Bildirim Kanalları**: Slack, Discord, Teams entegrasyonu
- 🔄 **Pipeline Integration**: GitHub Actions, GitLab CI entegrasyonu
- 🏗️ **Template System**: Hazır proje şablonları
- 🌐 **Cloud Provider Filtreleri**: AWS CodeDeploy, Vercel, Netlify
## 🤝 Katkı ve Destek
### Katkıda Bulunma
1. **Repository'i Forklayın**: GitHub'da fork oluşturun
2. **Feature Branch**: `feature/ozellik-adi` formatında branch oluşturun
3. **Pull Request**: Değişiklikleri ana branch'e gönderin
4. **Test**: Tüm testlerin geçtiğinden emin olun
5. **Dokümantasyon**: Değişiklikleri belgelendirin
### Hata Bildirimi
- **GitHub Issues**: [github.com/proje/issues](https://github.com/proje/issues)
- **Feature İstekleri**: [github.com/proje/discussions](https://github.com/proje/discussions)
- **Soru ve Yardım**: Discord veya GitHub Discussions
### Lisans
Bu proje MIT lisansı altında dağıtılmaktadır. Detaylı bilgi için [LICENSE](LICENSE) dosyasını inceleyin.
---
## 🌟 Teşekkürler
Bu projeye katkı sağlayan tüm geliştiricilere ve açık kaynak kütüphanelerine teşekkür ederiz. Özelliklele:
- **React Team** - Modern UI kütüphanesi için
- **Vite Team** - Hızlı build tool için
- **shadcn/ui** - Modern bileşen kütüphanesi için
- **MongoDB Team** - Esnek veritabanı için
- **Socket.io** - Gerçek zamanlı iletişim için
**Wisecolt-CI** - **Repository otomasyonu, basitleştirilmiş! 🚀**

View File

@@ -1,5 +1,3 @@
version: "3.9"
services:
mongo:
image: mongo:7

View File

@@ -0,0 +1,559 @@
# Wisecolt-CI Proje Dökümantasyonu
## 📋 İçindekiler
- [Proje Genel Bakış](#-proje-genel-bakış)
- [Backend Dökümantasyonu](#-backend-dökümantasyonu)
- [Frontend Dökümantasyonu](#-frontend-dökümantasyonu)
- [API Referansı](#-api-referansı)
- [Kurulum](#-kurulum)
- [Kullanım](#-kullanım)
- [Geliştirme](#-geliştirme)
## 🎯 Proje Genel Bakış
Wisecolt-CI, modern web teknolojileriyle geliştirilmiş tam teşekküllü bir CI/CD (Sürekli Entegrasyon/Sürekli Dağıtım) platformudur. Proje, repository otomasyonu ve test süreçlerini yönetmek için tasarlanmıştır.
### ✨ Temel Özellikler
- **🔐 Kimlik Doğrulama**: JWT tabanlı güvenli kimlik yönetimi
- **📊 Job Yönetimi**: Repository'lar için otomatik test süreçleri
- **⚡ Gerçek Zamanlı**: Socket.io ile canlı durum güncellemeleri
- **🎨 Modern UI**: React + shadcn/ui ile responsive arayüz
- **🌙 Tema Desteği**: Dark/Light moda geçiş imkanı
- **🐳 Konteynerizasyon**: Docker ile tam izole geliştirme ortamı
### 🛠 Teknoloji Yığını
#### Backend
- **Node.js** + **TypeScript** - Güçlü sunucu tarafı geliştirme
- **Express.js** - Minimal ve esnek web framework'ü
- **MongoDB** - NoSQL veritabanı
- **Socket.io** - Gerçek zamanlı çift yönlü iletişim
- **JWT** - Güvenli kimlik doğrulama
- **Mongoose** - MongoDB modelleme ve validasyon
#### Frontend
- **React 18** - Modern bileşen tabanlı UI kütüphanesi
- **TypeScript** - Tip güvenli geliştirme
- **Vite** - Hızlı build tool ve geliştirme sunucusu
- **Tailwind CSS** - Utility-first CSS framework'ü
- **shadcn/ui** - Modern React UI bileşen kütüphanesi
- **React Router** - Client tarafı rotalama
- **Axios** - HTTP istemci kütüphanesi
#### DevOps
- **Docker** + **Docker Compose** - Konteyner orkestrasyon
- **Hot Reload** - Geliştirme anında canlı güncellemeler
## 📊 Backend Dökümantasyonu
### 🏗 Mimari
Backend, RESTful API prensiplerine göre tasarlanmış modüler bir yapıya sahiptir.
#### Ana Bileşenler
1. **Express Sunucusu** (`src/index.ts`)
2. **Router'lar** (`src/routes/`)
3. **Middleware** (`src/middleware/`)
4. **Servisler** (`src/services/`)
5. **Modeller** (`src/models/`)
6. **Konfigürasyon** (`src/config/`)
### 🔐 Authentication Sistemi
#### Endpoint'ler
- `POST /auth/login` - Kullanıcı girişi
- `GET /auth/me` - Token doğrulama ve kullanıcı bilgileri
#### Güvenlik Özellikleri
- JWT tabanlı kimlik doğrulama
- Bearer token authentication
- CORS yapılandırması
- .env tabanlı hassas bilgi yönetimi
#### Kullanım
```typescript
// Giriş işlemi
const response = await fetch('/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
// Token ile korumalı istek
const response = await fetch('/protected-endpoint', {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
});
```
### 📋 Job Yönetim Sistemi
#### Model Yapısı
```typescript
interface JobDocument {
name: string; // Job adı
repoUrl: string; // Repository URL'si
testCommand: string; // Çalıştırılacak test komutu
checkValue: number; // Kontrol değeri (dakika/saat/gün)
checkUnit: TimeUnit; // Kontrol birimi
status: JobStatus; // Job durumu
lastRunAt?: Date; // Son çalışma zamanı
lastDurationMs?: number; // Son çalışma süresi (ms)
lastMessage?: string; // Son mesaj
}
```
#### Endpoint'ler
- `GET /jobs` - Tüm job'ları listele
- `GET /jobs/:id` - Job detaylarını getir
- `POST /jobs` - Yeni job oluştur
- `PUT /jobs/:id` - Job güncelle
- `DELETE /jobs/:id` - Job sil
- `POST /jobs/:id/run` - Job'ı manuel çalıştır
#### Job Süreç Yönetimi
- **Otomatik Çalıştırma**: Belirlenen aralıklarla otomatik çalışma
- **Git Operasyonları**: Clone/pull işlemleri
- **NPM Kurulum**: Bağımlılıkların otomatik kurulumu
- **Test Çalıştırma**: Belirlenen komutların çalıştırılması
- **Sonuç Kaydı**: Test sonuçlarının veritabanına kaydedilmesi
### ⚡ Socket.io Real-time İletişim
#### Olaylar
- `connection` - Yeni bağlantı kurulduğunda
- `hello` - Bağlantı kurulduğunda hoş geldik mesajı
- `ping/pong` - Bağlantı kontrolü
- `counter:update` - Sayaç güncellemesi
- `counter:start/stop` - Sayaç başlatma/durdurma
- `job:subscribe` - Job durum takibi
- `job:status` - Job durum güncellemesi
- `job:log` - Job log akışı
#### Kullanım Örneği
```typescript
// Client tarafı
socket.on('job:status', (data) => {
console.log('Job durumu güncellendi:', data);
});
// Server tarafı
io.to(`job:${jobId}`).emit('job:status', {
jobId,
status: 'running',
lastMessage: 'Test çalıştırılıyor...'
});
```
### 🔧 Konfigürasyon Yönetimi
#### Environment Değişkenleri
```bash
PORT=4000 # Backend sunucu portu
MONGO_URI=mongodb://mongo:27017/wisecoltci # MongoDB bağlantı adresi
ADMIN_USERNAME=admin # Admin kullanıcı adı
ADMIN_PASSWORD=supersecret # Admin şifresi
JWT_SECRET=your-secret-key # JWT imzalama anahtarı
CLIENT_ORIGIN=http://localhost:5173 # Frontend adresi (CORS için)
```
## 🎨 Frontend Dökümantasyonu
### 🏗 Mimari
Frontend, modern React prensiplerine göre tasarlanmış bileşen tabanlı bir yapıya sahiptir.
#### Ana Bileşenler
1. **App Component** - Ana rotalama ve yapılandırma
2. **Pages** - Sayfa bileşenleri (HomePage, JobsPage, vb.)
3. **Components** - Yeniden kullanılabilir UI bileşenleri
4. **Providers** - React Context Provider'lar
5. **API Layer** - Backend ile iletişim katmanı
### 🔐 Authentication Provider
#### AuthProvider Özellikleri
- Kullanıcı durum yönetimi
- Token saklama (localStorage)
- Otomatik kimlik doğrulama
- Login/logout işlemleri
#### Kullanım
```typescript
const { user, token, login, logout, loading } = useAuth();
// Giriş yapma
await login('admin', 'password');
// Çıkış yapma
logout();
// Korumalı bileşen
if (!user) {
return <Navigate to="/login" />;
}
```
### 📱 Sayfa Bileşenleri
#### HomePage
- Proje genel bakış ve istatistikler
- Hızlı erişim linkleri
#### JobsPage
- Job listesi
- Job oluşturma/düzenleme/silme işlemleri
- Real-time durum güncellemeleri
#### JobDetailPage
- Job detayları
- Manuel çalıştırma
- Log akışı izleme
### 🎨 UI Bileşen Kütüphanesi (shadcn/ui)
#### Temel Bileşenler
- **Button** - Özelleştirilebilir düğmeler
- **Input** - Form giriş alanları
- **Select** - Seçim kutuları
- **Card** - Kart bileşenleri
- **Label** - Etiket bileşenleri
- **Switch** - Toggle switch'ler
- **Toaster** - Bildirim sistemi
#### Stil Sistemi
- **Tailwind CSS** - Utility-first stil yaklaşımı
- **Responsive Design** - Mobil uyumlu tasarım
- **Tema Desteği** - Dark/Light moda geçiş
### 📱 Responsive Tasarım
#### Breakpoint'ler
- `sm:` - 640px ve üzeri
- `md:` - 768px ve üzeri
- `lg:` - 1024px ve üzeri
- `xl:` - 1280px ve üzeri
#### Örnek Kullanım
```typescript
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* Responsive grid layout */}
</div>
```
## 🔌 API Referansı
### Authentication API
#### POST /auth/login
Kullanıcı girişi için endpoint.
**Request Body:**
```json
{
"username": "admin",
"password": "supersecret"
}
```
**Response:**
```json
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"username": "admin"
}
```
#### GET /auth/me
Token doğrulama ve kullanıcı bilgileri.
**Headers:**
```
Authorization: Bearer <token>
```
**Response:**
```json
{
"username": "admin"
}
```
### Jobs API
#### GET /jobs
Tüm job'ları listeler.
**Response:**
```json
[
{
"_id": "64a1b2c3d4e5f6789012345",
"name": "Frontend Tests",
"repoUrl": "https://github.com/user/frontend-repo",
"testCommand": "npm test",
"checkValue": 5,
"checkUnit": "dakika",
"status": "idle",
"lastRunAt": "2023-07-01T10:30:00.000Z",
"lastDurationMs": 45000,
"lastMessage": "Başarılı",
"createdAt": "2023-07-01T08:00:00.000Z",
"updatedAt": "2023-07-01T10:30:00.000Z"
}
]
```
#### POST /jobs
Yeni job oluşturur.
**Request Body:**
```json
{
"name": "Backend Tests",
"repoUrl": "https://github.com/user/backend-repo",
"testCommand": "npm run test",
"checkValue": 10,
"checkUnit": "dakika"
}
```
#### GET /jobs/:id
Belirtilen job'ın detaylarını getirir.
#### PUT /jobs/:id
Mevcut job'ı günceller.
**Request Body:** POST ile aynı formatta
#### DELETE /jobs/:id
Job'ı siler.
**Response:**
```json
{
"success": true
}
```
#### POST /jobs/:id/run
Job'ı manuel olarak çalıştırır.
**Response:**
```json
{
"queued": true
}
```
### WebSocket Olayları
#### client → server
- `ping` - Bağlantı kontrolü
- `counter:start` - Sayaç başlatma
- `counter:stop` - Sayaç durdurma
- `counter:status` - Sayaç durumu sorgula
- `job:subscribe` - Job durum takibi
- `job:unsubscribe` - Job durum takibi bırakma
#### server → client
- `hello` - Bağlantı kurulduğunda
- `pong` - Ping yanıtı
- `counter:update` - Sayaç değeri güncellemesi
- `counter:stopped` - Sayaç durduğunda
- `job:status` - Job durumu güncellemesi
- `job:log` - Job log mesajı
## 🚀 Kurulum
### Gereksinimler
- Docker ve Docker Compose
- Git
### Adım Adım Kurulum
1. **Repo'yu klonla:**
```bash
git clone https://github.com/your-repo/wisecolt-ci.git
cd wisecolt-ci
```
2. **Ortam dosyalarını yapılandır:**
```bash
cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env
```
3. **Admin bilgilerini gir:**
```bash
# backend/.env
ADMIN_USERNAME=your-admin-username
ADMIN_PASSWORD=your-secure-password
JWT_SECRET=your-jwt-secret-key
CLIENT_ORIGIN=http://localhost:5173
# frontend/.env
VITE_API_URL=http://localhost:4000
```
4. **Servisleri başlat:**
```bash
docker compose up --build
```
5. **Uygulamaya eriş:**
- Frontend: http://localhost:5173
- Backend API: http://localhost:4000
- MongoDB: mongodb://localhost:27017
## 💻 Kullanım
### Giriş İşlemi
1. Tarayıcıda http://localhost:5173 adresine gidin
2. Varsayılan giriş bilgileri:
- Kullanıcı adı: `admin`
- Şifre: `supersecret`
3. Giriş yap butonuna tıklayın
### Job Oluşturma
1. Sol menüden "Jobs" sayfasına gidin
2. "Yeni Job" butonuna tıklayın
3. Job bilgilerini girin:
- **Job Adı**: Test için anlaşılır bir ad
- **Repository URL**: GitHub repository adresi
- **Test Komutu**: Çalıştırılacak komut (örn: `npm test`)
- **Kontrol Değeri**: Kaç dakikada/saat/günde bir çalışacağı
- **Kontrol Birimi**: Zaman birimi seçimi
4. Kaydet butonuna tıklayın
### Job İzleme
1. Jobs sayfasından oluşturduğunuz job'a tıklayın
2. Job detay sayfasında:
- **Durum**: Job'un mevcut durumu (idle/running/success/failed)
- **Sonuçlar**: Son çalıştırma sonuçları ve süreleri
- **Loglar**: Gerçek zamanlı log akışı
- **Manuel Çalıştırma**: Job'u anında çalıştırma
## 🛠 Geliştirme
### Backend Geliştirme
#### Yeni Route Ekleme
```typescript
// src/routes/yeniRoute.ts
import { Router } from "express";
import { authMiddleware } from "../middleware/authMiddleware.js";
const router = Router();
router.use(authMiddleware);
router.get("/", (req, res) => {
res.json({ message: "Yeni endpoint çalışıyor" });
});
export default router;
```
#### Ana Dosyada Route Ekleme
```typescript
// src/index.ts
import yeniRoute from "./routes/yeniRoute.js";
app.use("/yeni", yeniRoute);
```
### Frontend Geliştirme
#### Yeni Sayfa Ekleme
```typescript
// src/pages/YeniSayfa.tsx
import React from "react";
export const YeniSayfa = () => {
return (
<div>
<h1>Yeni Sayfa</h1>
{/* Sayfa içeriği */}
</div>
);
};
```
#### Rotalama Ekleme
```typescript
// src/App.tsx
import { YeniSayfa } from "./pages/YeniSayfa";
<Route path="/yeni" element={<YeniSayfa />} />
```
#### API İsteği Ekleme
```typescript
// src/api/client.ts
export async function yeniEndpoint() {
const { data } = await apiClient.get("/yeni");
return data;
}
```
### 🐳 Docker Yapılandırması
#### Backend Dockerfile
```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 4000
CMD ["npm", "run", "start"]
```
#### Frontend Dockerfile
```dockerfile
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```
### 🔄 Otomatik Test Süreci
JobService, belirlenen aralıklarla otomatik test çalıştırır:
1. **Repository Clone**: İlk çalıştırmada repo klonlanır
2. **Bağımlılık Kurulum**: `npm install` çalıştırılır
3. **Test Çalıştırma**: Belirlenen komut çalıştırılır
4. **Sonuç Kayıt**: Sonuçlar veritabanına kaydedilir
5. **Real-time Güncelleme**: Socket.io ile client bilgilendirilir
### 📝 Notlar
#### Güvenlik
- JWT token'ları güvenli saklayın
- Environment değişkenlerini .env dosyasında tutun
- Production ortamında varsayılan şifreleri değiştirin
#### Performans
- MongoDB index'leri kullanın
- Büyük repository'ler için caching stratejileri uygulayın
- Frontend build optimizasyonu yapın
#### İzleme
- MongoDB log'larını izleyin
- Docker container log'larını kontrol edin
- Application metriklerini toplayın
---
*Bu dökümantasyon Wisecolt-CI projesinin tüm özelliklerini ve kullanımını kapsamaktadır. Geliştirme sürecinde güncel tutulmalıdır.*

View File

@@ -0,0 +1,470 @@
# Wisecolt-CI Teknoloji Analiz Raporu
## 📊 Özet
Bu rapor, Wisecolt-CI projesinin teknolojik altyapısını, mimarisini ve geliştirme pratiklerini detaylı olarak analiz etmektedir. Proje, modern CI/CD ihtiyaçlarını karşılamak üzere tasarlanmış tam teşekküllü bir web uygulamasıdır.
## 🏗 Mimari Analizi
### Backend Mimarisi
#### ✅ Güçlü Yönleri
- **Modüler Tasarım**: Route/middleware/model/services ayrımı SOLID prensiplerine uygun
- **TypeScript**: Tip güvenli geliştirme ortamı
- **JWT Authentication**: Modern ve güvenli kimlik doğrulama
- **Socket.io Integration**: Gerçek zamanlı iletişim için güçlü altyapı
- **MongoDB + Mongoose**: Esnek NoSQL veritabanı yönetimi
- **Environment Configuration**: Güvenli konfigürasyon yönetimi (.env)
#### 🔧 İyileştirme Alanları
- **Error Handling**: Merkezi error handling stratejisi eksik
- **Validation**: Input validasyonu route seviyesinde zayıf
- **Logging**: Structured logging implementasyonu gerekli
- **Rate Limiting**: API güvenliği için rate limiting eksik
- **API Documentation**: Swagger/OpenAPI dokumantasyonu yok
#### 📈 Performans Değerlendirmesi
- **Single-threaded**: Node.js varsayılan single-threaded yapısı
- **Memory Usage**: MongoDB connection pooling optimize edilebilir
- **Job Processing**: Child process yönetimi verimli
- **Scalability**: Horizontal scaling için desteği var
### Frontend Mimarisi
#### ✅ Güçlü Yönleri
- **Modern React**: React 18 ve TypeScript ile güncel stack
- **Component Architecture**: Yeniden kullanılabilir bileşen yapısı
- **State Management**: Context API ile merkezi durum yönetimi
- **UI Library**: shadcn/ui ile tutarlı ve erişilebilir UI
- **Build Tool**: Vite ile hızlı geliştirme deneyimi
- **Responsive Design**: Tailwind ile mobil uyumlu tasarım
#### 🔧 İyileştirme Alanları
- **State Management**: Büyük uygulamalar için Redux/Zustand düşünülebilir
- **Code Splitting**: Lazy loading implementasyonu
- **Error Boundaries**: React error boundary implementasyonu
- **Testing**: Unit/E2E test altyapısı eksik
- **Performance**: Bundle size optimizasyonu
## 🔧 Teknoloji Seçimi Analizi
### Backend Teknolojileri
#### ✅ Doğru Seçimler
- **Express.js**: Minimal, esnek ve geniş community desteği
- **MongoDB**: Schema esnekliği ve horizontal scaling yeteneği
- **Socket.io**: Real-time iletişim için endüstri standardı
- **JWT**: Stateless authentication için ideal çözüm
- **TypeScript**: Büyük projeler için bakım kolaylığı
#### ⚖️ Alternatif Değerlendirmeleri
- **Framework**: Fastify veya Koa daha performanslı olabilir
- **Veritabanı**: PostgreSQL ACID requirements için daha uygun
- **Authentication**: OAuth 2.0 integration düşünülebilir
- **Message Queue**: Redis için büyük job işlemleri
### Frontend Teknolojileri
#### ✅ Doğru Seçimler
- **React 18**: Concurrent features ve gelişmiş performans
- **Vite**: Hızlı HMR ve optimizasyon
- **Tailwind CSS**: Utility-first yaklaşım ve geliştirme hızı
- **shadcn/ui**: Radix UI tabanlı erişilebilir bileşenler
- **TypeScript**: Tip güvenliği ve geliştirici deneyimi
#### ⚖️ Alternatif Değerlendirmeleri
- **Framework**: Next.js SSR/SSG için daha uygun
- **Styling**: CSS-in-JS veya Styled Components
- **State Management**: Redux Toolkit büyük projeler için
- **Testing**: Jest + React Testing Library eklenmeli
## 🔒 Güvenlik Analizi
### Mevcut Güvenlik Özellikleri
- **JWT Token Authentication**: Güvenli kimlik doğrulama
- **CORS Configuration**: Cross-origin istek kontrolü
- **Environment Variables**: Hassas bilgilerin .env'de saklanması
- **Input Sanitization**: MongoDB Mongoose validation
#### 🔍 Güvenlik Açıkları
1. **Password Security**: Plain text storage, hashing eksik
2. **JWT Security**: Token expiration ve refresh mekanizması yok
3. **Input Validation**: SQL injection benzeri riskler
4. **Rate Limiting**: Brute force koruması eksik
5. **HTTPS**: Development ortamında HTTP kullanımı
#### 🛡 Güvenlik İyileştirmeleri
```typescript
// Password hashing implementasyonu
import bcrypt from 'bcrypt';
const hashedPassword = await bcrypt.hash(password, 12);
const isValid = await bcrypt.compare(password, hashedPassword);
// JWT refresh token mekanizması
interface TokenPair {
accessToken: string;
refreshToken: string;
}
// Rate limiting middleware
import rateLimit from 'express-rate-limit';
const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 100 // limit each IP to 100 requests per windowMs
});
```
## 📈 Performans Optimizasyonu
### Backend Optimizasyonları
#### 🚀 Database Optimizasyon
```typescript
// MongoDB indexing
jobSchema.index({ status: 1, createdAt: -1 });
jobSchema.index({ name: 1 });
// Connection pooling
mongoose.connect(uri, {
maxPoolSize: 10,
serverSelectionTimeoutMS: 5000,
socketTimeoutMS: 45000,
});
```
#### ⚡ Caching Stratejisi
```typescript
// Redis caching implementasyonu
import Redis from 'ioredis';
const redis = new Redis(process.env.REDIS_URL);
const cachedJobs = await redis.get('jobs:all');
if (cachedJobs) {
return JSON.parse(cachedJobs);
}
// Cache invalidation
await redis.del('jobs:all');
await redis.setex(`job:${jobId}`, 300, JSON.stringify(job));
```
#### 🔄 Job Processing Optimizasyon
```typescript
// Queue system implementasyonu
import Bull from 'bull';
const jobQueue = new Bull('job processing');
jobQueue.process(async (job) => {
const { jobId } = job.data;
return processJob(jobId);
});
// Concurrent processing
jobQueue.process(5); // 5 concurrent jobs
```
### Frontend Optimizasyonları
#### 📦 Bundle Optimizasyon
```typescript
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
ui: ['@radix-ui/react-dialog', '@radix-ui/react-select']
}
}
}
}
});
```
#### 🖼️ Code Splitting ve Lazy Loading
```typescript
// Lazy loading implementasyonu
import { lazy, Suspense } from 'react';
const JobsPage = lazy(() => import('./pages/JobsPage'));
const JobDetailPage = lazy(() => import('./pages/JobDetailPage'));
// Component kullanımı
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/jobs" element={<JobsPage />} />
<Route path="/jobs/:id" element={<JobDetailPage />} />
</Routes>
</Suspense>
```
#### ⚡ React Optimizasyonları
```typescript
// React.memo ve useMemo optimizasyonları
const JobCard = React.memo(({ job }: { job: Job }) => {
const formattedDate = useMemo(() => {
return new Date(job.lastRunAt).toLocaleString();
}, [job.lastRunAt]);
return (
<Card>
<CardHeader>{job.name}</CardHeader>
<CardContent>{formattedDate}</CardContent>
</Card>
);
});
// useCallback optimizasyonu
const handleJobRun = useCallback((jobId: string) => {
runJob(jobId);
}, [runJob]);
```
## 🔄 DevOps ve Deployment
### Docker Optimizasyonları
#### 🐳 Multi-stage Build
```dockerfile
# Backend Dockerfile optimizasyonu
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
FROM node:18-alpine AS runtime
WORKDIR /app
COPY --from=builder /app/node_modules ./node_modules
COPY . .
RUN npm prune --production
EXPOSE 4000
USER node
CMD ["npm", "start"]
```
#### 🏥 Production-ready Nginx
```nginx
# nginx.conf
server {
listen 80;
server_name localhost;
# Frontend static files
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
# API reverse proxy
location /api {
proxy_pass http://backend:4000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
```
### CI/CD Pipeline Önerisi
```yaml
# .github/workflows/ci.yml
name: CI/CD Pipeline
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm ci
- run: npm run test
- run: npm run lint
- run: npm run build
security-scan:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Run security scan
run: |
npm audit
npm run security-scan
```
## 🧪 Testing Stratejisi
### Backend Testing
```typescript
// Jest backend test setup
import request from 'supertest';
import app from '../src/index';
describe('Jobs API', () => {
test('should create new job', async () => {
const jobData = {
name: 'Test Job',
repoUrl: 'https://github.com/test/repo',
testCommand: 'npm test',
checkValue: 5,
checkUnit: 'dakika'
};
const response = await request(app)
.post('/jobs')
.set('Authorization', `Bearer ${token}`)
.send(jobData)
.expect(201);
expect(response.body.name).toBe(jobData.name);
});
});
```
### Frontend Testing
```typescript
// React Testing Library setup
import { render, screen, fireEvent } from '@testing-library/react';
import { AuthProvider } from '../providers/auth-provider';
test('login form submission', async () => {
const mockLogin = jest.fn();
render(
<AuthProvider value={{ login: mockLogin, user: null, loading: false }}>
<LoginPage />
</AuthProvider>
);
fireEvent.change(screen.getByLabelText('Kullanıcı Adı'), {
target: { value: 'admin' }
});
fireEvent.click(screen.getByText('Giriş'));
expect(mockLogin).toHaveBeenCalledWith('admin', 'password');
});
```
## 📊 Monitoring ve Logging
### Structured Logging
```typescript
// Winston logging implementasyonu
import winston from 'winston';
const logger = winston.createLogger({
level: 'info',
format: winston.format.combine(
winston.format.timestamp(),
winston.format.json()
),
transports: [
new winston.transports.File({ filename: 'error.log', level: 'error' }),
new winston.transports.File({ filename: 'combined.log' }),
],
});
// Kullanım
logger.info('Job started', { jobId, user: req.user.username });
logger.error('Job failed', { jobId, error: error.message });
```
### Performance Monitoring
```typescript
// Metrics collection
import { register, collectDefaultMetrics, Counter, Histogram } from 'prom-client';
const jobCounter = new Counter({
name: 'jobs_processed_total',
help: 'Total number of jobs processed'
});
const jobDuration = new Histogram({
name: 'job_duration_seconds',
help: 'Job processing duration'
});
collectDefaultMetrics();
```
## 🎯 Öneriler ve Yol Haritası
### Kısa Vadeli (1-3 ay)
1. **🔒 Güvenlik İyileştirmeleri**
- Password hashing implementasyonu
- Rate limiting ekleme
- HTTPS zorunlulması
2. **📋 Test Altyapısı**
- Unit test ekleme (Jest)
- Integration test ekleme
- E2E test implementasyonu
3. **📝 Dokümantasyon**
- OpenAPI/Swagger dokümantasyonu
- Code documentation (JSDoc)
- Deployment dokümantasyonu
### Orta Vadeli (3-6 ay)
1. **⚡ Performans Optimizasyonu**
- Redis caching ekleme
- Database indexing
- Frontend code splitting
2. **🔄 CI/CD Pipeline**
- GitHub Actions otomasyonu
- Automated testing
- Production deployment
3. **📊 Monitoring**
- Application monitoring
- Error tracking (Sentry)
- Performance metrics
### Uzun Vadeli (6+ ay)
1. **🏗 Mimari Güncellemesi**
- Microservices geçişi
- Message queue implementasyonu
- Load balancing
2. **🔧 Gelişmiş Özellikler**
- Multi-branch CI/CD
- Rollback mekanizmaları
- A/B testing altyapısı
3. **📈 Scale Optimizasyonu**
- Horizontal scaling
- Database sharding
- CDN integration
## 📋 Sonuç
Wisecolt-CI projesi, modern teknolojiler kullanılarak geliştirilmiş sağlam bir CI/CD platformudur. Mevcut mimarı geliştirilmeye açık olup, belirtilen iyileştirme önerileri uygulandığında enterprise seviyesi bir platforma dönüşebilir.
**Ana Güçlü Yönler:**
- Modern teknoloji yığını
- Modüler mimari
- Gerçek zamanlı özellikler
- Konteyner orkestrasyon
**Öncelikli İyileştirme Alanları:**
- Güvenlik önlemleri
- Test altyapısı
- Performans optimizasyonu
- Monitoring ve logging
Bu rapordaki önerilerin uygullanması, projenin üretkenliği, güvenliği ve bakılabilirliği açısından önemli katma değerler sunacaktır.