🚀 Pınar Tech Studio

Modern, Ölçeklenebilir ve Yüksek Performanslı Full-Stack Web Platformu

Canlı Demo • Hata Bildir • İletişim

---

📑 İçindekiler

• Proje Hakkında
• Mimari
• Özellikler
• Teknoloji Yığını
• Ekran Görüntüleri
• Kurulum ve Çalıştırma
• API Dokümantasyonu
• Proje Yapısı
• Katkıda Bulunma
• Lisans

---

📖 Proje Hakkında

Pınar Tech Studio, modern web geliştirme standartlarına uygun olarak tasarlanmış, Clean Architecture prensiplerini benimseyen kapsamlı bir Full-Stack portfolyo ve içerik yönetim sistemidir.

Bu platform, sadece kişisel bir vitrin olmanın ötesinde; dinamik blog yönetimi, proje sergileme alanları ve güvenli bir yönetim paneli sunar. SEO (Arama Motoru Optimizasyonu) ve Web Performansı (Core Web Vitals) odaklı geliştirilmiştir.

---

🏗 Mimari

Proje, Serverless mimarisi üzerine kurulmuştur. Frontend ve Backend API, Vercel üzerinde barındırılırken, veritabanı Render üzerinde, medya dosyaları ise Cloudinary CDN üzerinde tutulmaktadır.

graph TD
    Client[Kullanıcı / Tarayıcı] -->|HTTPS| Vercel[Vercel Edge Network]
    Vercel -->|Statik Dosyalar| React[React Frontend]
    Vercel -->|API İstekleri| API[Node.js Serverless Functions]
    API -->|Veri Okuma/Yazma| DB[(PostgreSQL @ Render)]
    API -->|Medya Yönetimi| Cloudinary[Cloudinary CDN]
    React -->|Analitik| Analytics[Google Analytics & Vercel Analytics]

Loading

---

✨ Özellikler

🎨 Kullanıcı Arayüzü (Frontend)

• Responsive Tasarım: Mobil öncelikli (Mobile-First) yaklaşım ile Tailwind CSS kullanılarak geliştirildi.
• Modern Animasyonlar: Kullanıcı deneyimini artıran yumuşak geçişler ve mikro etkileşimler.
• Karanlık/Aydınlık Mod: (Gelecek sürümlerde eklenecek altyapı hazır).
• SEO Uyumlu: Dinamik meta etiketleri, sitemap.xml, robots.txt ve Open Graph protokolleri.

⚙️ Backend & Yönetim

• Güvenli Kimlik Doğrulama: JWT (JSON Web Token) ve BCrypt ile güvenli giriş sistemi.
• Dinamik İçerik Yönetimi: Blog yazıları, projeler ve hizmetler için tam CRUD (Ekle/Sil/Güncelle) desteği.
• Medya Optimizasyonu: Yüklenen görseller otomatik olarak Cloudinary üzerinde optimize edilir ve webp formatında sunulur.
• RESTful API: Standartlara uygun, ölçeklenebilir API yapısı.

---

🛠 Teknoloji Yığını

Alan	Teknoloji	Açıklama
Frontend	React 19	UI Kütüphanesi
	TypeScript	Tip Güvenliği
	Vite	Build Tool & Dev Server
	Tailwind CSS	Utility-First CSS Framework
	Lucide React	İkon Seti
Backend	Node.js	Runtime Environment
	Express.js	Web Framework
	PostgreSQL	İlişkisel Veritabanı
	Prisma / pg	Veritabanı İstemcisi
DevOps	Vercel	Hosting & CI/CD
	Render	Database Hosting
	Cloudinary	Cloud Media Storage
	GitHub Actions	Otomasyon

---

📸 Ekran Görüntüleri

Ana Sayfa	Admin Paneli

---

🚀 Kurulum ve Çalıştırma

Projeyi yerel ortamınızda geliştirmek için aşağıdaki adımları izleyin.

1. Ön Gereksinimler

• Node.js (v18 veya üzeri)
• Git
• PostgreSQL (Yerel veya Bulut)

2. Projeyi Klonlayın

git clone https://github.com/CodeByPinar/pinardevstudio.git
cd pinardevstudio

3. Bağımlılıkları Yükleyin

npm install

4. Çevresel Değişkenleri (.env) Ayarlayın

Ana dizinde .env dosyası oluşturun ve aşağıdaki değerleri kendinize göre düzenleyin:

PORT=5000
DATABASE_URL=postgresql://kullanici:sifre@localhost:5432/veritabani_adi
DB_HOST=localhost
DB_PORT=5432
DB_USER=postgres
DB_PASSWORD=your_local_db_password
DB_NAME=projelerim_db
CLOUDINARY_CLOUD_NAME=xxx
CLOUDINARY_API_KEY=xxx
CLOUDINARY_API_SECRET=xxx
JWT_SECRET=cok_gizli_anahtar
ADMIN_USERNAME=admin_username
ADMIN_PASSWORD=admin_password

5. Uygulamayı Başlatın

Geliştirme Modu (Frontend + Backend):

npm run dev
# Backend için ayrı terminalde:
npm start

Production Build:

npm run build

6. Backend Sunucuyu Sürekli Açık Tutma (PM2)

npm run server:pm2:start
npm run server:pm2:save

Yönetim komutları:

npm run server:pm2:restart
npm run server:pm2:stop
npm run server:pm2:logs
npm run server:pm2:status

Not:

• PM2 içinde pinar-watchdog adında ikinci bir süreç çalışır.
• Bu süreç her 5 dakikada bir /api/projects health-check yapar.
• Arka arkaya başarısızlıkta backend sürecini otomatik yeniden başlatır.

---

🔌 API Dokümantasyonu

Temel API uç noktaları aşağıdadır:

Metot	Endpoint	Açıklama
GET	/api/projects	Tüm projeleri listeler
GET	/api/posts	Blog yazılarını listeler
POST	/api/login	Admin girişi yapar ve JWT döner
POST	/api/projects	Yeni proje ekler (Auth Gerekli)
DELETE	/api/posts/:id	Blog yazısını siler (Auth Gerekli)

---

📂 Proje Yapısı

pinardevstudio/
├── 📁 api/                # Vercel Serverless Functions Entry
├── 📁 components/         # Yeniden kullanılabilir React bileşenleri
│   ├── 📁 admin/          # Admin paneli bileşenleri
│   └── 📁 ui/             # Temel UI elementleri (Button, Input vb.)
├── 📁 public/             # Statik dosyalar (Favicon, Robots.txt)
├── 📁 server/             # Backend kaynak kodları
│   ├── 📁 config/         # Veritabanı ve Cloudinary ayarları
│   ├── 📁 controllers/    # İstekleri işleyen fonksiyonlar
│   ├── 📁 routes/         # API rota tanımları
│   └── index.js           # Server giriş noktası
├── 📁 src/                # Frontend ana uygulama kodları
├── .env                   # Çevresel değişkenler (Git'e eklenmez)
├── vercel.json            # Vercel dağıtım ayarları
└── package.json           # Proje bağımlılıkları ve scriptler

---

🤝 Katkıda Bulunma

Katkılarınızı bekliyoruz! Lütfen şu adımları izleyin:

1. Bu depoyu (repository) forklayın.
2. Yeni bir özellik dalı (feature branch) oluşturun (git checkout -b feature/YeniOzellik).
3. Değişikliklerinizi commitleyin (git commit -m 'Yeni özellik eklendi').
4. Dalınızı pushlayın (git push origin feature/YeniOzellik).
5. Bir Pull Request oluşturun.

---

📝 Lisans

Bu proje MIT Lisansı ile lisanslanmıştır.

---

CodeByPinar tarafından ❤️ ve ☕ ile geliştirildi.