From 945c0e7a76f01979359006c7f3aa642f04889ff6 Mon Sep 17 00:00:00 2001 From: szbk Date: Thu, 27 Nov 2025 09:27:06 +0300 Subject: [PATCH] =?UTF-8?q?Porje=20d=C3=B6k=C3=BCmanlar=C4=B1=20olu=C5=9Ft?= =?UTF-8?q?uruldu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .serena/.gitignore | 1 + .serena/memories/proje_genel_bilgiler.md | 120 +++++ .serena/project.yml | 84 ++++ README.md | 434 ++++++++++++++++-- docker-compose.yml | 2 - docs/PROJE_DOKUMANTASYONU.md | 559 +++++++++++++++++++++++ docs/TEKNIK_ANALIZ_RAPORU.md | 470 +++++++++++++++++++ 7 files changed, 1637 insertions(+), 33 deletions(-) create mode 100644 .serena/.gitignore create mode 100644 .serena/memories/proje_genel_bilgiler.md create mode 100644 .serena/project.yml create mode 100644 docs/PROJE_DOKUMANTASYONU.md create mode 100644 docs/TEKNIK_ANALIZ_RAPORU.md diff --git a/.serena/.gitignore b/.serena/.gitignore new file mode 100644 index 0000000..14d86ad --- /dev/null +++ b/.serena/.gitignore @@ -0,0 +1 @@ +/cache diff --git a/.serena/memories/proje_genel_bilgiler.md b/.serena/memories/proje_genel_bilgiler.md new file mode 100644 index 0000000..eb2aa90 --- /dev/null +++ b/.serena/memories/proje_genel_bilgiler.md @@ -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) \ No newline at end of file diff --git a/.serena/project.yml b/.serena/project.yml new file mode 100644 index 0000000..bb0f241 --- /dev/null +++ b/.serena/project.yml @@ -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: [] diff --git a/README.md b/README.md index 80fe8a7..6ab5135 100644 --- a/README.md +++ b/README.md @@ -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 - ``` - İstediğiniz admin bilgilerini `.env` dosyalarına girin. +## 📋 İçindekiler -2. Servisleri başlatın: - ```bash - docker compose up --build - ``` +- [✨ Ö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) -3. Uygulamaya erişin: - - Frontend: http://localhost:5173 - - Backend API: http://localhost:4000 - - MongoDB: localhost:27017 +## ✨ Özellikler -## Giriş Bilgisi -`.env` dosyasındaki değerleri kullanın (varsayılanlar): -- Kullanıcı adı: `admin` -- Şifre: `supersecret` +### 🔐 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ı -## Ö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. +### 📊 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 -## 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. +### ⚡ 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 ( +
+

Yeni Bileşen

+

Bileşen içeriği

+
+ ); +}; + +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ş! 🚀** \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 4e981a1..e849c44 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,5 +1,3 @@ -version: "3.9" - services: mongo: image: mongo:7 diff --git a/docs/PROJE_DOKUMANTASYONU.md b/docs/PROJE_DOKUMANTASYONU.md new file mode 100644 index 0000000..2a039c5 --- /dev/null +++ b/docs/PROJE_DOKUMANTASYONU.md @@ -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 ; +} +``` + +### 📱 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 +
+ {/* Responsive grid layout */} +
+``` + +## 🔌 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 +``` + +**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 ( +
+

Yeni Sayfa

+ {/* Sayfa içeriği */} +
+ ); +}; +``` + +#### Rotalama Ekleme +```typescript +// src/App.tsx +import { YeniSayfa } from "./pages/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.* \ No newline at end of file diff --git a/docs/TEKNIK_ANALIZ_RAPORU.md b/docs/TEKNIK_ANALIZ_RAPORU.md new file mode 100644 index 0000000..91d4fe6 --- /dev/null +++ b/docs/TEKNIK_ANALIZ_RAPORU.md @@ -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ı +Loading...}> + + } /> + } /> + + +``` + +#### ⚡ 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 ( + + {job.name} + {formattedDate} + + ); +}); + +// 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( + + + + ); + + 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. \ No newline at end of file