# Wisecolt-CI 🚀

**Modern CI/CD Platformu - Repository otomasyonu ve test süreçleri için tasarlanmış tam teşekküllü web uygulaması**

![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)

## 📋 İç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)
```

### 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
```

### 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ı

### API Geliştirme
```typescript
// Yeni route ekleme
import { Router } from 'express';
import { authMiddleware } from '../middleware/authMiddleware';

const router = Router();
router.use(authMiddleware);

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ş! 🚀**