DevSync — Frontend

Geliştiricileri bir araya getiren işbirliği platformunun modern, gerçek zamanlı kullanıcı arayüzü.

Öne Çıkan Özellikler

• Akış & Sosyal — Post paylaşımı, beğeni, iç içe yorum sistemi
• Proje Keşfi — Proje arama, detay görüntüleme, slot bazlı başvuru
• Anlık Mesajlaşma — Gerçek zamanlı direkt ve grup sohbetleri
• Canlı Bildirimler — Socket üzerinden anlık bildirim alımı
• Online Durum — Kullanıcı presence takibi ve gösterimi
• Tema Desteği — Light/Dark mod, localStorage ile kalıcılık
• Admin Paneli — Raporlama ve içerik yönetimi
• Profil Yönetimi — Avatar yükleme, beceri ve bilgi düzenleme

---

Ekran Görüntüleri

User Panel

Giriş & Kayıt

Ekran	Görüntü
Giriş Ekranı
Kayıt Ol Ekranı
Mail Onaylama Dialog
Maile Gelen Onay

Profil & Kullanıcı

Ekran	Görüntü
Kullanıcı Profili
Profil Düzenleme - 1
Profil Düzenleme - 2
Profil Düzenleme - 3
Kullanıcı Arama
Kullanıcı Engelleme
Engellediğin Kullanıcı Profili
Engellendiğin Kullanıcı Profili

Gönderi & Yorum

Ekran	Görüntü
Post Detay
Post Raporlama
Raporlarım

Proje Yönetimi

Ekran	Görüntü
Tüm Projeleri Listeleme
Proje Oluşturma
Proje Düzenleme
Slot Ekleme
Proje Başvurma - 1
Proje Başvurma - 2
Proje Başvurularımı Listeleme
Proje Sahibi - Başvuran Görüntüleme 1
Proje Sahibi - Başvuran Görüntüleme 2
Proje Sahibi - Proje Detay

Mesajlaşma & Sohbet

Ekran	Görüntü
Canlı Chat
Grup Sohbet
Grup Sohbeti Oluşturma
Grup Sohbeti Görsel Yollama
Grup Yönetimi
Proje Sohbeti

Diğer

Ekran	Görüntü
Sidebar
Bildirim Paneli
404 Ekranı

Admin Panel

Ekran	Görüntü
Dashboard
Kullanıcı Listeleme
Gönderi Listeleme
Yorum Listeleme
Rapor Listesi
Rapor Detay
Rapor Çözümleme

---

Teknolojiler

Kategori	Teknoloji
Framework	Vue 3 (Composition API)
Build Tool	Vite
UI Kütüphanesi	Vuetify 4 (Material Design)
State Yönetimi	Pinia
Routing	Vue Router
HTTP Client	Axios
Gerçek Zamanlı	Socket.io Client

Mimari

• Component-Based SPA — Vue 3 <script setup> ile modern Composition API kullanımı
• Multi-Layout Routing — Auth, User ve Admin için ayrı layout yapıları ve rol bazlı route guard'lar
• Domain-Driven Stores — Pinia ile her modül için ayrı store (auth, post, project, socket vb.)
• Centralized API Layer — Axios interceptor ile otomatik token yenileme ve istek kuyruğu
• Lazy Loading — Tüm route'larda dynamic import ile code splitting
• Real-Time State Sync — Socket.io ile anlık bildirim, presence ve mesaj senkronizasyonu

Kurulum

# Bağımlılıkları yükle
npm install

# Geliştirme sunucusunu başlat
npm run dev

# Production build
npm run build

# Production build önizleme
npm run preview

Proje Yapısı

src/
├── api/             # Axios instance ve interceptor'lar
├── components/      # Paylaşılan bileşenler
├── constants/       # Sabit değerler
├── layouts/         # Auth, User, Admin layout'ları
├── plugins/         # Vuetify yapılandırması
├── router/          # Route tanımları ve guard'lar
├── socket/          # Socket.io bağlantı yönetimi
├── stores/          # Pinia store modülleri
├── utils/           # Yardımcı fonksiyonlar
├── views/           # Sayfa bileşenleri (22+ route)
├── App.vue
└── main.js

Layout Sistemi

Proje üç ana layout yapısına sahiptir:

Layout	Açıklama
AdminLayout	Yönetim paneli — sidebar, header ve içerik alanı
AuthLayout	Giriş/kayıt sayfaları — minimal tasarım
UserLayout	Son kullanıcı sayfaları — navbar, footer ve içerik alanı

Her layout için ayrı route dosyaları: adminRoutes.js, authRoutes.js, userRoutes.js

State Management (Pinia)

Pinia ile merkezi state yönetimi. Store'lar src/stores/ klasöründe domain bazlı organize edilmiştir.

import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()