İTÜ Tree Frontend

İTÜ (İstanbul Teknik Üniversitesi) öğrencileri için geliştirilmiş eşleştirme uygulamasının web arayüzü.

Bu proje, İTÜ Tree Backend servisine bağlanan, kullanıcıların kayıt olmasını, giriş yapmasını ve eşleşme sürecini takip etmesini sağlayan tek sayfa uygulamadır (SPA).

📋 İçindekiler

🎯 Uygulama Çalışma Mantığı

İTÜ Tree, İTÜ öğrencilerini birbirleriyle eşleştiren ve hediye alışverişi yapılmasını sağlayan bir platformdur. Uygulama belirli fazlardan oluşur ve her fazda farklı işlevler aktif olur.

📊 Uygulama Fazları

Uygulama 5 farklı fazda çalışır:

┌─────────────────────┐
│  REGISTRATION_OPEN  │  ← Kayıtlar açık, kullanıcılar hesap oluşturabiliyor
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│ REGISTRATION_CLOSED │  ← Kayıtlar kapandı, eşleştirme bekleniyor
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│    MATCHED_PHASE    │  ← Eşleştirmeler yapıldı, keşif soruları cevaplanıyor
└──────────┬──────────┘
           │
           ▼
┌─────────────────────────────┐
│ DELIVERY_AND_CHAT_PHASE     │  ← Chat açık, hediye teslimatı yapılıyor
└──────────┬──────────────────┘
           │
           ▼
┌─────────────────────┐
│        OVER         │  ← Etkinlik sona erdi
└─────────────────────┘

🔄 Kullanıcı Akışı

1. Kayıt Aşaması (REGISTRATION_OPEN)

Kayıt süreci 4 adımdan oluşur:

1. Credentials (E-posta & Şifre)
   ├── E-posta (@itu.edu.tr zorunlu)
   ├── Şifre (min 8 karakter)
   └── Eğer hesap varsa → Otomatik giriş yapılır

2. Personal Info (Kişisel Bilgiler)
   ├── İsim / Soyisim
   ├── Cinsiyet seçimi
   └── Bölüm seçimi

3. Multi-Select (Hobiler)
   ├── 50 farklı hobi seçeneği
   └── Tam olarak 5 hobi seçilmeli

4. Single-Choice Questions (10 Soru)
   ├── Her soru 4 seçenekli
   └── Her soru için 1 seçenek seçilmeli

matchSignature Yapısı:

İlk 5 karakter: Multi-select hobi cevapları (alfabetik sıralı, A-Z ve a-z)
Sonraki 10 karakter: Single-choice soru cevapları (1-4 arası)
Son 5 karakter: Rezerve (şu an '0' ile dolu)
Toplam: 20 karakter
Örnek: ABCDE1234123400000 (5 hobi + 10 soru cevabı + 5 sıfır)

2. Eşleştirme Algoritması

Kayıtlar kapandığında admin tarafından eşleştirme scripti çalıştırılır:

Tüm Katılımcılar
       │
       ▼
┌──────────────────────────────────────┐
│  Her ikili için benzemezlik skoru    │
│  hesapla (Dissimilarity Score)       │
└──────────────────────────────────────┘
       │
       ▼
┌──────────────────────────────────────┐
│  Skorları küçükten büyüğe sırala     │
│  (En farklı olanlar en yüksek skor)  │
└──────────────────────────────────────┘
       │
       ▼
┌──────────────────────────────────────┐
│  Greedy matching: En düşük skorlu    │
│  çiftleri eşleştir (benzer olanlar)  │
└──────────────────────────────────────┘
       │
       ▼
   Eşleşmeler DB'ye kaydedilir

Skor Hesaplama:

// Ağırlıklar: İlk 3 soru daha önemli (3 puan), diğerleri 1 puan
WEIGHTS = [3, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1]

// İki signature karşılaştırılır
// Farklı karakterler için ağırlık eklenir
// Düşük skor = Daha benzer tercihler

3. Keşif Soruları (MATCHED_PHASE & DELIVERY_AND_CHAT_PHASE)

Eşleştikten sonra kullanıcılar keşif sorularını cevaplayabilir:

┌─────────────────────────────────────────────────────┐
│  Keşif Soruları (Discovery Questions)               │
├─────────────────────────────────────────────────────┤
│  • Kampüste en sevdiğin yer neresi?                 │
│  • En çok dinlediğin şarkı/dizi ne?                 │
│  • Hediye olarak ne almak istersin?                 │
│  • Hayatının mottosu nedir?                         │
│  • Asla almak istemediğin hediye?                   │
└─────────────────────────────────────────────────────┘
                    │
                    ▼
┌─────────────────────────────────────────────────────┐
│  Karşılıklı Görünürlük Kuralı:                      │
│  Bir soruyu sen de cevapladıysan, eşinin            │
│  cevabını görebilirsin. Aksi halde gizli.           │
└─────────────────────────────────────────────────────┘

4. Chat Sistemi (DELIVERY_AND_CHAT_PHASE)

┌─────────────────────────────────────────────────────┐
│                  WebSocket Bağlantısı               │
│                                                     │
│   Kullanıcı A ◄──────► Socket.IO ◄──────► Kullanıcı B  │
│                          │                          │
│                          ▼                          │
│                    Match Room                       │
│               (match.id bazında)                    │
└─────────────────────────────────────────────────────┘

Bağlantı Akışı:
1. Client accessToken ile bağlanır
2. Token doğrulanır
3. Kullanıcının eşi (match) bulunur
4. match.id ile room'a katılır
5. Real-time mesajlaşma başlar

🔐 Kimlik Doğrulama Akışı

┌─────────────────────────────────────────────────────────────┐
│                    JWT Authentication Flow                   │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  Login/Register                                             │
│       │                                                     │
│       ▼                                                     │
│  ┌─────────────┐     ┌──────────────────┐                   │
│  │ Access Token │     │  Refresh Token   │                   │
│  │ (Memory)     │     │ (HTTP-only Cookie)│                   │
│  │ Kısa ömürlü  │     │  Uzun ömürlü     │                   │
│  └──────┬──────┘     └────────┬─────────┘                   │
│         │                     │                             │
│         ▼                     │                             │
│  API İstekleri                │                             │
│  Authorization: Bearer xxx    │                             │
│         │                     │                             │
│         ▼                     │                             │
│  ┌──────────────┐             │                             │
│  │ 401 Hatası?  │─────────────┘                             │
│  └──────┬───────┘                                           │
│         │ Evet                                              │
│         ▼                                                   │
│  /auth/refresh → Yeni Access Token                          │
│         │                                                   │
│         ▼                                                   │
│  Başarısız? → Logout & Login'e yönlendir                    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Önemli Not: Access token'lar güvenlik için bellekte (memory) saklanır, localStorage'da değil. Sayfa yenilendiğinde refresh token (HTTP-only cookie) kullanılarak yeni access token alınır.

📧 E-posta Doğrulama

Kullanıcılar kayıt olduktan sonra e-posta adreslerini doğrulamalıdır:

1. Kayıt sonrası doğrulama e-postası gönderilir
2. Kullanıcı e-postadaki linke tıklar
3. /auth/verify-email?token=xxx sayfasına yönlendirilir
4. Token doğrulanır ve e-posta onaylanır
5. Kullanıcı tüm özellikleri kullanabilir

Ana sayfada e-posta doğrulanmamış kullanıcılar için uyarı banner'ı gösterilir ve doğrulama e-postası tekrar gönderilebilir.

📱 Frontend State Yönetimi

┌─────────────────────────────────────────────────────────────┐
│                      AuthContext                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  State:                                                     │
│  ├── user: User | null                                      │
│  ├── isAuthenticated: boolean                               │
│  └── isLoading: boolean                                     │
│                                                             │
│  Actions:                                                   │
│  ├── login(email, password)                                 │
│  ├── register(formData)                                     │
│  ├── logout()                                               │
│  └── refreshUser()                                          │
│                                                             │
│  Lifecycle:                                                 │
│  1. Mount → Token var mı kontrol et                         │
│  2. Yoksa → Refresh dene                                    │
│  3. Başarılı → /me endpoint'inden user bilgisi al           │
│  4. Başarısız → Çıkış yaptır                                │
│                                                             │
└─────────────────────────────────────────────────────────────┘

🗄️ Veri Modeli (Backend)

┌─────────────┐       ┌─────────────────┐       ┌─────────────┐
│    User     │       │   Participant   │       │    Match    │
├─────────────┤       ├─────────────────┤       ├─────────────┤
│ id          │◄──────│ userId (PK/FK)  │──────►│ id          │
│ email       │       │ firstName       │       │ participantA│
│ passwordHash│       │ lastName        │       │ participantB│
│ emailVerified│      │ department      │       └──────┬──────┘
└─────────────┘       │ matchSignature  │              │
                      └────────┬────────┘              │
                               │                       │
                               ▼                       ▼
                      ┌────────────────┐      ┌───────────────┐
                      │ QuestionAnswer │      │  ChatMessage  │
                      ├────────────────┤      ├───────────────┤
                      │ participantId  │      │ matchId       │
                      │ questionId     │      │ senderId      │
                      │ answerText     │      │ content       │
                      └────────────────┘      └───────────────┘

⚙️ Faz Kısıtlamaları

Özellik	REGISTRATION_OPEN	REGISTRATION_CLOSED	MATCHED_PHASE	DELIVERY_AND_CHAT
Kayıt	✅	❌	❌	❌
Giriş	✅	✅	✅	✅
Eşleşme Görme	❌	❌	✅	✅
Keşif Soruları	❌	❌	✅	✅
Chat	❌	❌	❌	✅

📊 Durum ve Geri Sayım Sistemi

Ana sayfada kullanıcılar:

Mevcut uygulama fazını görebilir
Sonraki faz için geri sayım görebilir (gün, saat, dakika, saniye)
Faz geçişlerini takip edebilir

🛠 Teknolojiler

Kategori	Teknoloji	Versiyon
Build Tool	Vite	7.2.4
Framework	React	19.2.0
Dil	TypeScript	5.9.x
Routing	React Router DOM	7.9.6
Stil	Tailwind CSS	3.4.x
Markdown	react-markdown	10.1.0
Optimizasyon	React Compiler	1.0.0
Linting	ESLint	9.x
Paket Yönetimi	npm	-
Konteyner	Docker	-
Web Server	Nginx	-

📦 Kurulum

Gereksinimler

Node.js v20 veya üzeri
npm
(Opsiyonel) Docker & Docker Compose

Adımlar

Projeyi klonlayın

git clone <repository-url>
cd itu_tree_frontend

Bağımlılıkları yükleyin
```
npm install
```

Environment değişkenlerini ayarlayın (opsiyonel)

# .env dosyası oluşturun
VITE_API_BASE_URL=/api

Geliştirme sunucusunu başlatın
```
npm run dev
```
Uygulama varsayılan olarak http://localhost:5173 adresinde çalışır.

📁 Proje Yapısı

src/
├── api/                    # API iletişim katmanı
│   ├── apiFetch.ts         # HTTP client wrapper (token yönetimi, retry logic)
│   ├── auth.ts             # Auth API fonksiyonları (login, register, logout, email verification)
│   ├── config.ts           # API yapılandırması ve sabitler
│   ├── match.ts            # Eşleşme API'leri (getMatchInfo)
│   ├── questions.ts        # Keşif soruları API'leri (getQuestions, answerQuestion, vb.)
│   ├── status.ts           # Uygulama durumu ve faz bilgisi API'leri
│   └── types.ts            # TypeScript tip tanımları (User, Department, AppState, Match, Question, vb.)
│
├── components/             # Paylaşılan bileşenler
│   ├── Countdown.tsx       # Geri sayım bileşeni (faz geçişleri için)
│   ├── ProtectedRoute.tsx  # Auth gerektiren route wrapper'ı
│   ├── ScrollToTop.tsx     # Sayfa geçişlerinde scroll sıfırlama
│   └── ui/                 # Özel UI bileşenleri
│       ├── FramedButton/   # Çerçeveli buton bileşeni
│       ├── FramedCheckbox/ # Çerçeveli checkbox bileşeni
│       ├── FramedInput/    # Çerçeveli input bileşeni
│       ├── FramedOption/   # Çerçeveli seçenek bileşeni
│       ├── FramedSelect/   # Çerçeveli select bileşeni
│       └── Modal/          # Yeniden kullanılabilir modal bileşeni
│
├── contents/               # Markdown içerik dosyaları
│   ├── kvkk.md             # KVKK metni
│   ├── showcase_What.md    # "Nedir?" bölümü içeriği (Home ve Landing sayfalarında kullanılır)
│   ├── showcase_How.md     # "Nasıl Çalışır?" bölümü içeriği (Home ve Landing sayfalarında kullanılır)
│   └── showcase_Extras.md  # "Öne Çıkan Özellikler" içeriği (Home ve Landing sayfalarında kullanılır)
│
├── contexts/               # React Context'ler
│   └── AuthContext.tsx     # Merkezi auth state yönetimi (login, register, logout, deleteAccount)
│
├── pages/                  # Sayfa bileşenleri
│   ├── Home.tsx            # Ana sayfa (korumalı, faz durumu, geri sayım, email doğrulama banner, showcase, scroll indicator, footer)
│   ├── Landing.tsx         # Landing sayfası (public, showcase içeriği, scroll indicator)
│   ├── Profile.tsx         # Profil sayfası (korumalı, hesap silme özelliği)
│   ├── MatchProfile.tsx    # Eşleşme profili sayfası (partner bilgisi, uyumluluk yüzdesi)
│   ├── DiscoveryQuestions.tsx  # Keşif soruları sayfası (soru-cevap etkileşimi)
│   └── auth/               # Auth sayfaları
│       ├── Login.tsx       # Giriş formu
│       ├── Register.tsx    # Kayıt formu (4 adımlı)
│       ├── VerifyEmail.tsx # E-posta doğrulama sayfası
│       └── steps/          # Kayıt formu adımları
│           ├── CredentialsStep.tsx    # E-posta & şifre
│           ├── PersonalInfoStep.tsx   # Kişisel bilgiler
│           ├── MultiSelectStep.tsx    # Hobi seçimi (5/50)
│           └── QuestionStep.tsx       # Tek seçim soruları
│
├── App.tsx                 # Ana uygulama ve routing
├── App.css                 # Global stiller
├── main.tsx                # Uygulama entry point
└── index.css               # Tailwind imports

⚙️ Yapılandırma

Environment Değişkenleri

Değişken	Varsayılan	Açıklama
`VITE_API_BASE_URL`	`/api`	Backend API base URL

Vite Proxy Yapılandırması

Development modunda /api istekleri otomatik olarak backend'e proxy'lenir:

// vite.config.ts
proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, ''),
  },
}

📜 NPM Script'leri

Script	Açıklama
`npm run dev`	Development sunucusunu başlatır (HMR aktif)
`npm run build`	Production build oluşturur
`npm run preview`	Production build'i önizler
`npm run lint`	ESLint ile kod kalitesi kontrolü
`npm run clean`	Build çıktılarını temizler
`npm run clean:all`	Tüm bağımlılıkları ve build çıktılarını temizler
`npm run clean:docker`	Docker container ve image'ları temizler
`npm run clean:docker:all`	Docker volume'lar dahil tüm Docker kaynaklarını temizler
`npm run clean:full`	Build ve Docker temizliği birlikte

🐳 Docker ile Çalıştırma

Docker Compose

docker-compose up -d

Bu komut frontend'i http://localhost:4006 adresinde çalıştırır.

Not: Production build Nginx ile serve edilir.

Manuel Docker Build

docker build -t itu-tree-frontend .
docker run -p 4006:80 itu-tree-frontend

Docker Yapısı

Build Stage: Node.js 20-slim ile Vite build
Runtime Stage: Nginx Alpine ile static dosya servisi
Port: 80 (container içi) → 4006 (host)
Health Check: /health endpoint'i ile container sağlığı kontrol edilir

🔗 Backend ile Entegrasyon

Auth Akışı

Uygulama JWT tabanlı authentication kullanır:

Access Token: Bellekte (memory) saklanır, kısa ömürlüdür
Refresh Token: HTTP-only cookie olarak backend tarafından yönetilir

API Endpoints

Endpoint	Method	Açıklama
`/auth/login`	POST	Kullanıcı girişi
`/auth/register`	POST	Yeni kullanıcı kaydı
`/auth/refresh`	POST	Access token yenileme
`/auth/logout`	POST	Oturum kapatma
`/auth/logout-all`	POST	Tüm cihazlardan çıkış
`/auth/2fa`	POST	E-posta doğrulama isteği
`/auth/verify-email`	POST	E-posta doğrulama (token ile)
`/me`	GET	Mevcut kullanıcı bilgisi
`/me`	DELETE	Hesap silme (sadece REGISTRATION_OPEN fazında)
`/status`	GET	Uygulama durumu ve faz bilgisi
`/match`	GET	Eşleşme bilgisi (partner + uyumluluk)
`/match/report`	POST	Şikayet oluşturma
`/questions`	GET	Keşif sorularını listele
`/questions/answer`	POST	Soruya cevap ver
`/questions/my-answers`	GET	Kendi cevaplarını getir
`/questions/partner-answers`	GET	Partner'ın cevaplarını getir
`/status/statistics`	GET	Uygulama istatistikleri (henüz UI'da kullanılmıyor)
`/chat/messages`	GET	Chat geçmişi (henüz frontend'de yok)

Automatic Token Refresh

apiFetch wrapper'ı 401 hatalarında otomatik olarak token yenileme dener:

// 401 alındığında:
// 1. /auth/refresh endpoint'ine istek atılır
// 2. Yeni access token alınırsa, orijinal istek tekrarlanır
// 3. Refresh da başarısız olursa, kullanıcı çıkış yapar

Token Güvenliği

Access token'lar localStorage'da değil, bellekte (memory) saklanır
Sayfa yenilendiğinde refresh token (HTTP-only cookie) kullanılarak yeni access token alınır
Bu yaklaşım XSS saldırılarına karşı daha güvenlidir

🏫 Desteklenen Bölümler

Kayıt sırasında İTÜ'deki tüm bölümler arasından seçim yapılabilir:

Bilgisayar Mühendisliği
Yapay Zeka ve Veri Mühendisliği
Elektrik-Elektronik Fakültesi bölümleri
İnşaat Fakültesi bölümleri
Makine Fakültesi bölümleri
Mimarlık Fakültesi bölümleri
ve diğer tüm İTÜ bölümleri...

Tam liste için src/api/types.ts dosyasına bakınız.

🛡️ Route Koruması

Route	Erişim	Açıklama
`/`	🌐 Public	Landing sayfası, giriş yapmış kullanıcılar `/home`'a yönlendirilir
`/home`	🔒 Korumalı	Ana sayfa, giriş gerektirir
`/profile`	🔒 Korumalı	Profil sayfası, giriş gerektirir
`/match-profile`	🔒 Korumalı	Eşleşme profili sayfası, giriş gerektirir
`/discovery-questions`	🔒 Korumalı	Keşif soruları sayfası, giriş gerektirir
`/auth/login`	🌐 Public	Giriş sayfası, giriş yapmış kullanıcılar `/home`'a yönlendirilir
`/auth/register`	🌐 Public	Kayıt sayfası, giriş yapmış kullanıcılar `/home`'a yönlendirilir
`/auth/verify-email`	🌐 Public	E-posta doğrulama sayfası, token ile erişilir

Giriş yapmış kullanıcılar auth sayfalarına yönlendirilmez, otomatik olarak ana sayfaya gider.

🎨 UI Bileşenleri

Proje özel tasarımlı UI bileşenleri kullanır:

FramedButton

Çerçeveli buton bileşeni. Link veya buton olarak kullanılabilir.

FramedInput

Çerçeveli input bileşeni. Form input'ları için kullanılır.

FramedOption

Çerçeveli seçenek bileşeni. Tek seçim soruları için kullanılır.

FramedSelect

Çerçeveli select bileşeni. Dropdown seçimler için kullanılır.

FramedCheckbox

Çerçeveli checkbox bileşeni. Çoklu seçimler için kullanılır.

Modal

Yeniden kullanılabilir modal/dialog bileşeni. Özellikler:

Backdrop tıklama ile kapatma
Body scroll kilitleme
Başlık ve kapatma butonu
Esnek içerik alanı

Countdown

Faz geçişleri için geri sayım bileşeni:

Dinamik format (gün varsa gün/saat/dk, yoksa saat/dk/sn)
Faza göre farklı başlık resimleri
Skeleton loading durumu

📝 Geliştirme Notları

React Compiler: Otomatik memoization için React Compiler kullanılmaktadır
TypeScript Strict Mode: Tip güvenliği için strict mod aktiftir
Tailwind CSS v3: Utility-first styling
Markdown İçerik: Showcase içerikleri Markdown formatında contents/ klasöründe tutulur
Token Güvenliği: Access token'lar bellekte saklanır, localStorage kullanılmaz
Auto-Login: Kayıt formunda mevcut hesap bilgileri girilirse otomatik giriş yapılır
Infinite Scroll: Multi-select hobi seçiminde sonsuz kaydırma özelliği vardır
Responsive Design: Tüm sayfalar mobil uyumludur

🆕 Son Geliştirmeler

✅ Tamamlanan Özellikler

1. Eşleşme Profili Sayfası (`/match-profile`)

Eşleşilen katılımcının profilini gösteren sayfa:

Partner'ın adı ve soyadı görüntülenir
Uyumluluk (Blend) Gösterimi: Eşleşme algoritmasına göre hesaplanan uyumluluk yüzdesi progress bar ile gösterilir
Keşif Sorularına yönlendirme butonu

┌─────────────────────────────────────┐
│            < Geri                   │
│                                     │
│        Ahmet Yılmaz                 │
│                                     │
│    Uyumluluk: ████████░░ %75        │
│                                     │
│      [ Keşif Soruları ]             │
│                                     │
└─────────────────────────────────────┘

2. Keşif Soruları Sayfası (`/discovery-questions`)

Eşleşilen katılımcılarla soru-cevap etkileşimi:

┌─────────────────────────────────────────────────────┐
│  Keşif Soruları UI                                  │
├─────────────────────────────────────────────────────┤
│                                                     │
│  📤 Senin Soruların                                 │
│  ├── Sorduğun ve cevapladığın sorular              │
│  ├── Partner cevapladıysa her iki cevap gösterilir │
│  └── Partner henüz cevaplamamışsa "Bekleniyor..."  │
│                                                     │
│  📥 Karşı Tarafın Soruları                         │
│  ├── Partner'ın sorduğu ama senin cevaplamadığın   │
│  │   sorular "Cevapla" butonuyla gösterilir        │
│  └── Her iki taraf cevapladıysa cevaplar gösterilir│
│                                                     │
│  + Yeni Soru Sor (Modal açılır)                    │
│                                                     │
└─────────────────────────────────────────────────────┘

Özellikler:

Karşılıklılık prensibi: Bir sorunun cevabını görmek için sen de o soruya cevap vermelisin
Modal ile soru seçme ve cevaplama
Hangi soruların cevaplanıp cevaplanmadığı takibi
Kim soruyu önce sorduysa onun sorusu olarak kategorize edilir

3. Hesap Silme Özelliği

REGISTRATION_OPEN fazında kullanıcılar hesaplarını silebilir:

Profil sayfasında hesap silme linki
Modal ile onay sistemi
"Hesabımı Silmek İstiyorum" yazarak onay (Türkçe karakter normalizasyonu destekli)
Geri alınamaz işlem uyarısı

4. Geri Sayım Bileşeni (Countdown)

Ana sayfada sonraki faz için geri sayım:

Gün > 0 ise: GG gün HH saat MM dk formatı
Gün = 0 ise: HH saat MM dk SS sn formatı (saniye dahil)
Faza göre dinamik başlık resmi
Süre dolduysa "Süre doldu" mesajı

5. Modal Bileşeni

Yeniden kullanılabilir modal component:

Backdrop tıklama ile kapatma
Scroll kilitleme (body overflow hidden)
Başlık ve kapatma butonu
Esnek içerik alanı

6. API Layer Güncellemeleri

match.ts:

getMatchInfo(): Eşleşme bilgisi ve uyumluluk yüzdesi

questions.ts:

getQuestions(): Tüm keşif sorularını listele
getMyAnswers(): Kullanıcının cevaplarını getir
getPartnerAnswers(): Partner'ın cevaplarını getir (karşılıklılık prensibi)
answerQuestion(): Soruya cevap ver

types.ts güncellemeleri:

MatchedParticipant interface
MatchInfoResponse (blend dahil)
DiscoveryQuestion interface
QuestionAnswer interface

7. AuthContext Güncellemeleri

deleteAccount() fonksiyonu eklendi
Hesap silme sonrası otomatik çıkış

8. Ana Sayfa (Home) Geliştirmeleri

Showcase Bölümü:

Ana sayfada markdown içerikli showcase bölümü eklendi
Üç ana bölüm: "Nedir?", "Nasıl Çalışır?", "Öne Çıkan Özellikler"
İçerikler contents/ klasöründen Markdown formatında yüklenir
ReactMarkdown ile render edilir
Responsive tasarım ve özel stil düzenlemeleri

Scroll Indicator:

Ana sayfada aşağı kaydırma göstergesi
Tıklanabilir, showcase bölümüne smooth scroll yapar
Kullanıcı deneyimini iyileştirmek için eklenmiştir

Faz Bazlı Başarı Mesajları:

REGISTRATION_OPEN fazı: E-posta doğrulanmış kullanıcılar için tebrik mesajı
MATCHED_PHASE fazı: Eşleşme başarı mesajı ve görsel
Faz durumuna göre dinamik içerik gösterimi

E-posta Doğrulama Banner'ı:

E-posta doğrulanmamış kullanıcılar için uyarı banner'ı
Doğrulama e-postası tekrar gönderme özelliği
30 dakika sonra otomatik silinme uyarısı
Başarı/hata mesajları ile kullanıcı geri bildirimi

Footer:

ITU ACM branding ile footer bölümü
Tüm sayfalarda tutarlı görünüm

9. Landing Sayfası

Public landing sayfası (/) özellikleri:

Showcase içeriği (Home sayfası ile aynı)
Scroll indicator
Giriş yapmış kullanıcılar otomatik olarak /home'a yönlendirilir
Giriş yapmamış kullanıcılar için uygulama tanıtımı

10. Status API Geliştirmeleri

status.ts:

getStatus(): Uygulama durumu ve faz bilgisi
getNextPhaseInfo(): Sonraki faz ve hedef tarih hesaplama
getStatistics(): İstatistik verileri (henüz UI'da kullanılmıyor)

Faz Geçiş Mantığı:

REGISTRATION_OPEN → REGISTRATION_CLOSED (registrationDeadline)
REGISTRATION_CLOSED → MATCHED_PHASE (matchingDate)
MATCHED_PHASE → DELIVERY_AND_CHAT_PHASE (revealDate)
DELIVERY_AND_CHAT_PHASE → OVER

11. UI/UX İyileştirmeleri

Ana Sayfa Navigasyon:

Faz durumuna göre dinamik buton gösterimi
MATCHED_PHASE fazında "Arkadaşının Profili" butonu
Her zaman "Kendi Profilin" linki

Loading States:

Tüm sayfalarda tutarlı loading göstergeleri
Skeleton loading (Countdown bileşeninde)
Error state yönetimi

Responsive Design:

Tüm sayfalar mobil uyumlu
Showcase içeriği responsive
Modal bileşenleri mobilde optimize edilmiş

🚧 Eksik / Geliştirme Bekleyen Özellikler

1. 💬 Chat Sistemi (Yüksek Öncelik)

Durum: Backend hazır, frontend implementasyonu yok

DELIVERY_AND_CHAT_PHASE fazında eşleşilen katılımcılarla gerçek zamanlı mesajlaşma.

Gereksinimler:

Socket.IO client kurulumu (socket.io-client paketi)
Chat sayfası/komponenti oluşturulması
WebSocket bağlantı yönetimi
Mesaj gönderme/alma event handler'ları
Mesaj geçmişi REST API entegrasyonu (GET /chat/messages)
Bağlantı durumu gösterimi (online/offline)

Backend Hazır Eventler:

// Bağlantı
const socket = io("http://localhost:3000", {
  auth: { accessToken: "jwt_token" }
});

// Mesaj gönderme
socket.emit("sendMessage", { content: "Merhaba!" });

// Mesaj alma
socket.on("newMessage", (message) => { ... });

// Hata yakalama
socket.on("error", (error) => { ... });

2. 🔑 Şifre Sıfırlama

Durum: Backend hazır, frontend sayfası yok

Gereksinimler:

Şifre sıfırlama isteği sayfası (email girişi)
Yeni şifre belirleme sayfası (token ile erişim)
POST /auth/2fa (scope: reset-password)
POST /auth/reset-password?token=xxx

3. 📊 İstatistik Görüntüleme

Durum: API hazır (getStatistics() fonksiyonu mevcut), UI yok

Mevcut API:

GET /status/statistics endpoint'i hazır
getStatistics() fonksiyonu src/api/status.ts içinde tanımlı
Types tanımlı: InterestAreaStatistic, TestAnswerStatistic, TestQuestionStatistic, Statistics, StatisticsResponse

Potansiyel Kullanım:

Admin paneli için istatistik sayfası
Kullanıcılara gösterilecek genel istatistikler
Dashboard görünümü

4. 🚨 Şikayet/Report Sistemi

Durum: Backend hazır, frontend implementasyonu yok

Eşleşilen partner hakkında şikayet oluşturma:

POST /match/report
{
  scope: "CHAT" | "QUESTIONS",
  description: "Şikayet açıklaması (opsiyonel)"
}

Gereksinimler:

MatchProfile veya Chat sayfasında şikayet butonu
Şikayet formu (scope seçimi + açıklama)
Şikayet onay mesajı

5. 📧 Email Değişikliği

Durum: Backend template'i var, frontend yok

Backend'de email-change.hbs template'i mevcut, ancak:

Email değişikliği için API endpoint'i
Profil sayfasında email değişikliği formu
Email doğrulama akışı

6. 🔒 Tüm Cihazlardan Çıkış

Durum: API mevcut, UI yok

POST /auth/logout-all

Profil sayfasında veya güvenlik ayarlarında "Tüm Cihazlardan Çıkış Yap" butonu eklenebilir.

7. 📱 Session Yönetimi UI

Durum: API mevcut (/me endpoint'i sessions döndürüyor), UI yok

sessions: [
  {
    userAgent: "Mozilla/5.0...",
    ip: "192.168.1.1",
    deviceId: "device-uuid",
    createdAt: "...",
    expiresAt: "..."
  }
]

Potansiyel Özellikler:

Aktif oturumları görüntüleme
Belirli bir oturumu sonlandırma
Son giriş bilgileri

📋 Öncelik Sıralaması

Öncelik	Özellik	Zorluk	Bağımlılık
🔴 Yüksek	Chat Sistemi	Orta-Yüksek	Socket.IO client
🟠 Orta	Şikayet Sistemi	Düşük	-
🟠 Orta	Şifre Sıfırlama	Düşük	-
🟡 Düşük	Tüm Cihazlardan Çıkış	Düşük	-
🟡 Düşük	Session Yönetimi	Düşük	-
⚪ Gelecek	Email Değişikliği	Orta	Backend endpoint
⚪ Gelecek	İstatistik Görüntüleme	Orta	Backend endpoint

🚀 Production Build

Production build için:

npm run build

Build çıktıları dist/ klasörüne oluşturulur. Bu dosyalar Nginx gibi bir web sunucusu ile serve edilebilir.

📄 Lisans

Bu proje İTÜ ACM tarafından geliştirilmiştir.

Name		Name	Last commit message	Last commit date
Latest commit History 75 Commits
.github		.github
emailTemplate		emailTemplate
public		public
src		src
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
docker-compose.yml		docker-compose.yml
eslint.config.js		eslint.config.js
index.html		index.html
nginx.conf		nginx.conf
nginx.conf.example		nginx.conf.example
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

İTÜ Tree Frontend

📋 İçindekiler

🎯 Uygulama Çalışma Mantığı

📊 Uygulama Fazları

🔄 Kullanıcı Akışı

1. Kayıt Aşaması (REGISTRATION_OPEN)

2. Eşleştirme Algoritması

3. Keşif Soruları (MATCHED_PHASE & DELIVERY_AND_CHAT_PHASE)

4. Chat Sistemi (DELIVERY_AND_CHAT_PHASE)

🔐 Kimlik Doğrulama Akışı

📧 E-posta Doğrulama

📱 Frontend State Yönetimi

🗄️ Veri Modeli (Backend)

⚙️ Faz Kısıtlamaları

📊 Durum ve Geri Sayım Sistemi

🛠 Teknolojiler

📦 Kurulum

Gereksinimler

Adımlar

📁 Proje Yapısı

⚙️ Yapılandırma

Environment Değişkenleri

Vite Proxy Yapılandırması

📜 NPM Script'leri

🐳 Docker ile Çalıştırma

Docker Compose

Manuel Docker Build

Docker Yapısı

🔗 Backend ile Entegrasyon

Auth Akışı

API Endpoints

Automatic Token Refresh

Token Güvenliği

🏫 Desteklenen Bölümler

🛡️ Route Koruması

🎨 UI Bileşenleri

FramedButton

FramedInput

FramedOption

FramedSelect

FramedCheckbox

Modal

Countdown

📝 Geliştirme Notları

🆕 Son Geliştirmeler

✅ Tamamlanan Özellikler

1. Eşleşme Profili Sayfası (/match-profile)

2. Keşif Soruları Sayfası (/discovery-questions)

3. Hesap Silme Özelliği

4. Geri Sayım Bileşeni (Countdown)

5. Modal Bileşeni

6. API Layer Güncellemeleri

7. AuthContext Güncellemeleri

8. Ana Sayfa (Home) Geliştirmeleri

9. Landing Sayfası

10. Status API Geliştirmeleri

11. UI/UX İyileştirmeleri

🚧 Eksik / Geliştirme Bekleyen Özellikler

1. 💬 Chat Sistemi (Yüksek Öncelik)

2. 🔑 Şifre Sıfırlama

3. 📊 İstatistik Görüntüleme

4. 🚨 Şikayet/Report Sistemi

5. 📧 Email Değişikliği

6. 🔒 Tüm Cihazlardan Çıkış

7. 📱 Session Yönetimi UI

📋 Öncelik Sıralaması

🚀 Production Build

📄 Lisans

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

1. Eşleşme Profili Sayfası (`/match-profile`)

2. Keşif Soruları Sayfası (`/discovery-questions`)

Packages