Verax Cloud, gerçek bir hosting/cloud sağlayıcısının ihtiyaç duyacağı her katmanı tek bir codebase içinde gösteren, sıfırdan tasarlanmış özgün bir demo platformdur:

• Kurumsal, animasyonlu bir pazarlama sitesi (8 hizmet sayfası, fiyatlandırma, network/altyapı/lokasyon sayfaları, durum sayfası, bilgi tabanı)
• Sunucu yönetimi, faturalar ve destek taleplerini gösteren bir müşteri paneli
• Rol bazlı yetkilendirmeye sahip, gerçek JWT kimlik doğrulamasıyla korunan bir yönetici paneli
• Tüm veri modelini kapsayan uçtan uca bir Prisma şeması ve hazır REST API uç noktaları

Bu, bağımsız olarak tasarlanmış bir kod tabanıdır; herhangi bir gerçek hosting sağlayıcısına ait metin, marka veya kod içermez.

Projenin imzası, merkezi bir çekirdeğe bağlı nabız atan veri merkezi düğümlerinden oluşan animasyonlu network topolojisi görselidir (components/home/network-topology.tsx), hero bölümünde ve /network sayfasında yeniden kullanılır. Glassmorphism (.glass, .glass-strong), aurora gradyanları (.aurora-field) ve ince grid arka planı (.grid-backdrop) gibi tekrar kullanılabilir sınıflar app/globals.css içinde tanımlıdır.

• 🖥️ 8 hizmet sayfası — Cloud VPS, Premium VDS, Dedicated Server, Game Server, Web Hosting, Domain, Colocation, DDoS Koruması — tek bir config-driven şablondan üretilir
• 💳 Sekmeli fiyatlandırma ve tüm hizmet türlerini kapsayan plan karşılaştırmaları
• 📡 Canlı durum sayfası ve olay (incident) geçmişi
• 📚 Bilgi tabanı kategori grid'i
• 🔐 Gerçek JWT + bcrypt tabanlı kimlik doğrulama, middleware.ts ile korunan /admin/* rotaları
• 📊 Müşteri paneli — sunucu kartları, güç kontrolleri (start/stop/reboot), canlı kaynak grafikleri, faturalar, destek talepleri
• 🛠️ Yönetici paneli — kullanıcılar, sunucular, siparişler, kuponlar, destek talepleri, gelir/plan dağılımı analitiği
• 🧩 Tam Prisma şeması — 15 model, panel arayüzünün gösterdiği her ilişkiyi kapsar
• 🚧 Bakım modu — tek bir env değişkeniyle tüm siteyi (statik varlıklar hariç) bakım sayfasına yönlendirir

app/
  layout.tsx, globals.css, page.tsx        Kök layout + ana sayfa
  pricing/                                  Tüm hizmet türleri için sekmeli fiyatlandırma
  services/<slug>/page.tsx                  ServicePageTemplate üzerine kurulu ürün sayfaları
  network/ infrastructure/ locations/       Platform sayfaları
  status/                                   Canlı durum + olay geçmişi
  knowledge-base/                           Dokümantasyon merkezi (kategori grid'i)
  about/ contact/                           Kurumsal sayfalar
  legal/<slug>/page.tsx                     Gizlilik / Kullanım şartları / İade politikası
  affiliate-program/ partner-program/       Büyüme programı sayfaları
  panel/login/                              Müşteri paneli girişi
  panel/(dashboard)/dashboard/              Panel özeti: sunucular, güç kontrolleri,
                                             canlı kaynak grafikleri, faturalar, destek talepleri
  api/auth/... api/servers/... vb.          REST uç noktaları (aşağıya bakınız)

components/
  layout/        Navbar, MobileMenu, Footer
  home/          Hero, StatsBar, InfrastructureOverview, DatacenterGrid,
                 StatusWidget, Timeline, Testimonials, FeatureComparison,
                 PricingPreview, FAQ, CTA, NetworkTopology (imza görsel)
  services/      ServicePageTemplate (config-driven), PricingCards
  panel/         Sidebar, ResourceGraph (canlı güncellenen SVG çizgi grafiği)
  legal/         LegalDocument (politika bölümlerini render eder)
  ui/            Button, Badge, GlassPanel, SectionHeading, Accordion, AnimatedCounter

lib/
  utils.ts       cn(), formatCurrency()
  auth.ts        JWT + bcrypt yardımcıları
  prisma.ts      Prisma client singleton
  data/          Statik içerik: navigasyon, planlar, veri merkezleri, istatistikler,
                 zaman çizelgesi, referanslar, SSS, karşılaştırma tablosu, durum

prisma/
  schema.prisma  Tam veri modeli (aşağıya bakınız)

components/services/service-page-template.tsx, küçük bir config nesnesi (eyebrow, başlık, açıklama, öne çıkan kartlar, opsiyonel fiyatlandırma planları, opsiyonel kullanım senaryoları) alır ve eksiksiz bir ürün sayfası render eder. app/services/ altındaki cloud-vps, premium-vds, dedicated-servers, game-servers, web-hosting, domain-registration, colocation ve ddos-protection sayfalarının hepsi bu şablonun ince birer örneğidir. Bu sayede sekiz ürün sayfası görsel ve yapısal olarak tutarlı kalır; dokuzuncu bir hizmet eklemek yeni bir sayfa düzeni değil, ~40 satırlık bir config dosyası demektir.

prisma/schema.prisma şu modelleri içerir: User (rol: customer/support/admin), Datacenter, Plan, Server (durum, IP'ler, işletim sistemi, sanallaştırma), Snapshot, FirewallRule, SshKey, Order, Invoice, Coupon, Ticket + TicketMessage, Notification, AffiliateAccount, MaintenanceNotice. İlişkiler, panel arayüzünün gösterdiği her şeyi kapsar (sunucular → plan/veri merkezi, destek talepleri → mesajlar, siparişler → kupon vb).

Tüm rotalar (register/login/kupon doğrulama hariç) Authorization: Bearer <jwt> bekler ve hashleme/token doğrulama için lib/auth.ts kullanır. Gerçek hipervizör çağrıları (KVM/Proxmox/VMware güç işlemleri, provisioning) altyapı otomasyon katmanınızın bağlanacağı yerlerde yorum satırlarıyla işaretlenmiştir.

git clone https://github.com/feq4n/verax-cloud.git
cd verax-cloud
npm install
cp .env.example .env   # DATABASE_URL ve JWT_SECRET değerlerini ayarlayın
npx prisma db push
npm run dev

Node.js 18.18+ gereklidir (Next.js 15 / React 19).

Proje Vercel'de sıfır ek yapılandırmayla çalışacak şekilde hazırlanmıştır (Next.js 15 App Router otomatik algılanır). package.json içindeki postinstall script'i, Vercel'in npm install adımının hemen ardından prisma generate'i otomatik çalıştırır; ayrıca build script'i de emin olmak için prisma generate && next build şeklindedir.

1) Postgres veritabanı sağlayın. Vercel'in kendisi bir veritabanı barındırmaz; aşağıdakilerden biriyle ücretsiz bir Postgres örneği açın ve bağlantı dizesini alın:

• Vercel Postgres (proje panelinden Marketplace üzerinden tek tıkla eklenir, DATABASE_URL otomatik tanımlanır)
• Neon, Supabase veya kendi Postgres sunucunuz

2) Ortam değişkenlerini tanımlayın. Vercel proje ayarlarında → Settings → Environment Variables:

3) Repoyu import edin. vercel.com/new üzerinden GitHub reponuzu seçin — framework otomatik olarak Next.js algılanır, ek ayar gerekmez.

4) Şemayı veritabanına uygulayın. İlk deploy'dan sonra, tabloları oluşturmak için kendi bilgisayarınızdan üretim DATABASE_URL'i kullanarak bir kereliğine çalıştırın:

DATABASE_URL="<vercel/neon/supabase-connection-string>" npx prisma db push
DATABASE_URL="<vercel/neon/supabase-connection-string>" npx prisma db seed   # admin/support hesaplarını oluşturur

Bunu yapmazsanız site açılır ama veritabanına dokunan API rotaları (/api/servers, /api/tickets, admin girişi vb.) hata döner.

Not: Vercel'in serverless fonksiyonları her istekte yeni bir bağlantı açabileceğinden, çok sayıda eşzamanlı istek bekliyorsanız DATABASE_URL'e Prisma'nın connection pooling önerdiği bir pooler (ör. Vercel Postgres/Neon'un dahili pooler'ı, PgBouncer) üzerinden bağlanmanız önerilir.

Admin girişi gerçek bir uç noktaya bağlıdır ve middleware ile korunur:

npx prisma db seed   # aşağıdaki iki hesabı oluşturur
npm run dev

prisma/seed.ts ile oluşturulan hesaplar (yerel geliştirme dışında bu şifreleri hemen değiştirin):

/admin/login üzerinden giriş yapın. Nasıl çalışır:

• POST /api/auth/login şifreyi doğrular; requireStaff: true gönderildiğinde (admin giriş formunun yaptığı gibi) ADMIN/SUPPORT olmayan herkesi reddeder. Başarılı girişte httpOnly verax_session cookie'si ayarlanır (lib/auth.ts → sessionCookieOptions) ve tarayıcı dışı API istemcileri için ham JWT de response body'de döner.
• middleware.ts, jose (edge-runtime uyumlu JWT doğrulama) kullanarak her /admin/* rotasını (/admin/login hariç) korur — ADMIN/SUPPORT rolüne sahip geçerli bir cookie yoksa sayfa hiç render edilmeden /admin/login'e otomatik yönlendirme yapılır.
• POST /api/auth/logout cookie'yi temizler; sidebar'daki "Çıkış yap" butonu bunu çağırır.
• GET /api/auth/me varsa mevcut oturumun kullanıcısını döndürür.
• Her /api/admin/* rotası ayrıca bağımsız olarak requireStaffSession() (lib/auth.ts) çağırır — bu fonksiyon artık cookie veya Bearer header'ından birini kabul eder, böylece aynı uç noktalar hem tarayıcı panelinden hem de harici API istemcilerinden çalışır.

/panel/login (müşteri girişi) henüz aynı şekilde bağlanmamıştır — hâlâ statik bir form. Müşteri girişini de gerçek hale getirmek isterseniz aynı deseni uygulayın (requireStaff olmadan /api/auth/login'i çağırın, /panel/(dashboard)/* rotasını middleware veya layout seviyesinde koruyun).

# .env
MAINTENANCE_MODE="true"

Bu ayar tüm siteyi devre dışı bırakır — her istek (pazarlama sayfaları, /panel, /admin, tüm /api rotaları) /maintenance sayfasına rewrite edilir; bu sayfa 404 sayfasıyla (components/system/not-found-content.tsx) aynı görseli kullanır. Yönlendirme değil rewrite olduğu için ziyaretçinin tarayıcısındaki URL değişmez. Statik varlıklar (_next/static, _next/image, görseller, fontlar, CSS/JS) middleware matcher'ından hariç tutulur, böylece bakım sayfası tam stiliyle render edilmeye devam eder. Uygulama içi bir anahtar yoktur — değişikliği uygulamak için env değişkenini değiştirip sunucuyu yeniden başlatın (veya yeniden deploy edin); bu kasıtlıdır, böylece ele geçirilmiş bir admin oturumu siteyi kapatıp açmak için kullanılamaz.

Tamamen inşa edilmiş: tasarım sistemi, ana sayfa (istenen 11 bölümün tamamı), 8 hizmet sayfası, fiyatlandırma (sekmeli), network, altyapı, lokasyonlar, durum, bilgi tabanı indeksi, hakkımızda, iletişim, 3 yasal sayfa, affiliate + partner programları, panel girişi, panel dashboard'u (sunucu kartları, güç kontrolleri, canlı kaynak grafikleri, faturalar, destek talepleri), yönetici paneli (/admin/login + dashboard, kullanıcılar, sunucular, siparişler, kuponlar, destek talepleri — gelir/plan dağılımı grafikleriyle analitik, aranabilir/filtrelenebilir tablolar, role duyarlı arayüz), tam Prisma şeması, rol bazlı yetkilendirmeli 8 müşteri + 6 admin API rotası.

Not: Yönetici arayüzünün verisi (kullanıcılar, sunucular, siparişler vb.) hâlâ lib/data/admin.ts içindeki mock veriyle beslenen bir ön yüz demosudur — giriş/çıkış ve rota erişimi gerçektir, ancak dashboard tabloları henüz /api/admin/*'ten okumuyor. Mock import'ları ilgili API rotasına yapılan fetch çağrılarıyla değiştirmek, paneli tamamen canlı hale getirmek için kalan adımdır.

Genişletilecek bir desen olarak iskeleti atılmış:

• Bilgi tabanı makaleleri — kategori grid'i canlı; tekil makale sayfaları (app/knowledge-base/[category]/[slug]/page.tsx) yasal sayfalarda kullanılan LegalDocument desenini takip edebilir.
• Blog — dahil edilmiş bir içerik modeli yok; LegalDocument/bilgi tabanı kart desenlerini artı bir MDX veya Prisma tabanlı post modelini yeniden kullanabilir.
• Gerçek zamanlı panel verisi — ResourceGraph şu anda canlı metrikleri istemci tarafında simüle eder; /api/servers/:id/metrics altında bir WebSocket veya polling uç noktasıyla izleme yığınınıza (Prometheus, agent push vb.) bağlayın.

Bu proje eğitim/demo amaçlı bağımsız bir üründür. Kendi ihtiyaçlarınıza göre lisans ekleyebilir veya değiştirebilirsiniz.