SwapS - Beceri Takas Platformu

SwapS, kullanıcıların becerilerini paylaşarak karşılıklı öğrenme ve işbirliği yapabileceği modern bir skill swap (beceri takas) platformudur. Kullanıcılar sahip oldukları becerileri sunabilir (Offering), ihtiyaç duydukları becerileri arayabilir (Seeking) ve karşılıklı eşleşmeler bularak projeler üzerinde işbirliği yapabilir.

Canlı Demo

Frontend: https://swaps.com.tr

🎯 Hızlı Test için Demo Hesaplar:

Kullanıcı Adı: user | Şifre: user
Kullanıcı Adı: test | Şifre: test
Admin: admin1@gmail.com | Şifre: admin-1

📋 Özellikler

HTML5 Semantic Markup: Modern web standartları ile erişilebilir yapı
Kullanıcı Yönetimi: Kayıt, giriş ve profil ayarları
Beceri Yönetimi: Offering (sunulan) ve Seeking (aranan) beceriler
Karşılıklı Eşleşme: İki yönlü beceri eşleşmesi algoritması
Proje Sistemi: Proje oluşturma, düzenleme ve başvuru yapma
Mesajlaşma: Kullanıcılar arası gerçek zamanlı mesajlaşma
Dashboard: Devam eden işler, teklifler ve öneriler
Admin Paneli: Kullanıcı ve beceri yönetimi
Responsive Tasarım: Mobil ve desktop uyumlu modern arayüz

🌐 HTML5 Özellikleri

Proje modern HTML5 standartlarına tam uyumludur:

Semantic HTML5 Elements

<header> - Sayfa başlıkları ve navigasyon
<nav> - Navigasyon menüleri
<main> - Ana içerik alanı
<section> - İçerik bölümleri
<article> - Bağımsız içerik blokları
<footer> - Sayfa alt bilgisi

HTML5 Form Features

<input type="email"> - Email validasyonu
<input type="password"> - Şifre alanları
required attribute - Zorunlu alan kontrolü
aria-label - Erişilebilirlik özellikleri

HTML5 Meta Tags

<!DOCTYPE html> - HTML5 deklarasyonu
<meta charset="UTF-8"> - Karakter seti
<meta name="viewport"> - Responsive tasarım
Open Graph meta tags - Sosyal medya entegrasyonu

🛠️ Kullanılan Teknolojiler

Frontend

HTML5 - Semantic markup ve modern web standartları
React 19.2.0 - Modern UI kütüphanesi
Vite - Hızlı geliştirme ortamı
Material-UI (MUI) v7 - Modern komponent kütüphanesi
React Router DOM - Sayfa yönlendirme
Axios - HTTP istekleri
Emotion - CSS-in-JS styling

Backend

Node.js - JavaScript runtime
Express 5 - Web framework
PostgreSQL - İlişkisel veritabanı
JWT - Token tabanlı kimlik doğrulama
bcrypt - Şifre hashleme
pg - PostgreSQL client

DevOps

Vercel - Frontend hosting
Render - Backend hosting
Docker - Containerization support

Kurulum ve Çalıştırma (Docker ile)

Proje artık Docker ile tam izole bir şekilde çalışmaktadır. Bilgisayarınızdaki mevcut veritabanı kurulumlarını etkilemez.

Gereksinimler

Docker Desktop (Kurulu ve çalışıyor olmalı)
Git

1. Projeyi Klonlayın

git clone https://github.com/yakuperoglu/swapsproject.git
cd swapsproject

2. Projeyi Başlatın

Tek bir komutla tüm sistemi (Frontend, Backend, Veritabanı) ayağa kaldırın:

docker-compose up -d --build

(Bu işlem ilk seferde imajların indirilmesi ve oluşturulması nedeniyle birkaç dakika sürebilir)

Sistem şu adreslerde çalışacaktır:

Frontend (Ana Site): http://localhost
Backend API: http://localhost:3005
Veritabanı (PostgreSQL): localhost:5435

3. Veritabanı

Veritabanı tabloları ve varsayılan veriler (yetenek listesi vb.) otomatik olarak oluşturulur. Ekstra bir kurulum yapmanıza gerek yoktur.

Eski Token Uyarısı: Veritabanı sıfırdan oluşturulduğu için eski kullanıcı kayıtlarınız silinmiştir. Sisteme giriş yapmadan önce yeni bir üyelik oluşturmanız gerekmektedir.

Manuel Veritabanı Erişimi (Opsiyonel)

Veritabanına dışarıdan bağlanmak isterseniz:

Host: localhost
Port: 5435
User: postgres
Password: postgres
Database: swaps_db

👤 Kullanıcı Giriş Bilgileri

Demo Kullanıcı Hesapları

Mock User 1:

Email: user@gmail.com
Şifre: user

Mock User 2:

Email: test@gmail.com
Şifre: test

Admin Hesabı:

Email: admin1@gmail.com
Şifre: admin-1

Not:

Demo için sisteme yeni kullanıcı kaydı da yapabilirsiniz

Kayıt için herhangi bir doğrulama gerekmez

📡 API Endpoint Listesi

Base URL

Local: http://localhost:3005
Production: https://swaps-backend.onrender.com

Not: 🔒 işareti olan endpoint'ler için Authorization: Bearer <TOKEN> header'ı gereklidir.

Kimlik Doğrulama (Authentication)

Kullanıcı Kaydı

POST /api/auth/register
Content-Type: application/json

{
  "username": "string",
  "email": "string",
  "password": "string"
}

Yanıt:

{
  "message": "Kullanici basariyla olusturuldu!",
  "user": {
    "id": 1,
    "username": "john_doe",
    "email": "john@example.com"
  },
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

Kullanıcı Girişi

POST /api/auth/login
Content-Type: application/json

{
  "email": "user@gmail.com",
  "password": "user"
}

Yanıt:

{
  "message": "Giris basarili! (Demo User)",
  "user": {
    "id": 100001,
    "username": "user",
    "email": "user@gmail.com",
    "role": "user"
  },
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

Not: Mock kullanıcılar için email: "user@gmail.com" (şifre: "user") veya "test@gmail.com" (şifre: "test")

Kullanıcı Profili

Profil Bilgilerini Getir

GET /api/profile/:userId

Profil Ayarlarını Kaydet

POST /api/profile/save-settings
Content-Type: application/json

{
  "userId": 1,
  "profileData": {
    "bio": "string",
    "location": "string",
    ...
  }
}

Hesabı Sil

DELETE /api/profile/delete-account/:userId

Yetenekler (Skills)

Tüm Yetenekleri Listele

GET /api/skills

Yanıt:

{
  "success": true,
  "skills": [
    {
      "id": 1,
      "name": "JavaScript",
      "category": "Programlama"
    },
    ...
  ]
}

Yeni Yetenek Ekle

POST /api/skills
Content-Type: application/json

{
  "name": "React",
  "category": "Programlama"
}

Yetenek Güncelle

PUT /api/skills/:skillId
Content-Type: application/json

{
  "name": "React Native",
  "category": "Programlama"
}

Yetenek Sil

DELETE /api/skills/:skillId

Kategorileri Listele

GET /api/categories

Kullanıcı Becerileri (User Skills)

Kullanıcının Becerilerini Getir

GET /user-skills/:userId

Yanıt:

{
  "success": true,
  "offering": [
    {
      "id": 1,
      "skill_name": "JavaScript",
      "skill_category": "Programlama",
      "type": "Offering"
    }
  ],
  "seeking": [
    {
      "id": 2,
      "skill_name": "Python",
      "skill_category": "Programlama",
      "type": "Seeking"
    }
  ]
}

Kullanıcıya Beceri Ekle

POST /user-skills
Content-Type: application/json

{
  "skill_id": 7,
  "type": "Offering"
}

type: "Offering" (sunulan) veya "Seeking" (aranan)

Kullanıcıdan Beceri Sil

DELETE /user-skills/:id

Karşılıklı Eşleşme (Reciprocal Matching)

İki Yönlü Beceri Eşleşmelerini Getir

GET /swaps/reciprocal

Algoritma:

Kullanıcı A'nın Seeking becerileri = Kullanıcı B'nin Offering becerileri
Kullanıcı B'nin Seeking becerileri = Kullanıcı A'nın Offering becerileri

Yanıt:

{
  "success": true,
  "matches_count": 2,
  "matches": [
    {
      "id": 5,
      "kullanici_adi": "jane_smith",
      "email": "jane@example.com",
      "matched_skills_a_needs": [
        {
          "skill_id": 8,
          "skill_name": "Python",
          "skill_category": "Programlama"
        }
      ],
      "matched_skills_b_needs": [
        {
          "skill_id": 7,
          "skill_name": "JavaScript",
          "skill_category": "Programlama"
        }
      ]
    }
  ]
}

Projeler (Projects)

Tüm Projeleri Listele

GET /projects

Proje Detayı

GET /projects/:id

Kullanıcının Projeleri

GET /projects/my

Yeni Proje Oluştur

POST /projects
Content-Type: application/json

{
  "title": "Web Sitesi Geliştirme",
  "description": "E-ticaret projesi için React developer aranıyor"
}

Proje Güncelle

PUT /projects/:id
Content-Type: application/json

{
  "title": "Updated Title",
  "description": "Updated Description"
}

Proje Sil

DELETE /projects/:id

Başvurular (Matches)

Kullanıcının Başvurularını Listele

GET /matches/user

Yanıt:

{
  "success": true,
  "applicantMatches": [],
  "receivedMatches": []
}

Projeye Başvur

POST /matches
Content-Type: application/json

{
  "project_id": 5
}

Başvuru Durumu Güncelle

PUT /matches/:id/status
Content-Type: application/json

{
  "status": "Accepted"
}

status: "Pending", "Accepted", "Rejected"

Başvuru Sil

DELETE /matches/:id

Dashboard

Kullanıcı Görevleri

Devam Eden İşler:

GET /user/tasks?filter=ongoing

Bekleyen Teklifler:

GET /user/tasks?filter=offers

Önerilen Projeler:

GET /user/tasks?filter=suggestions

Mesajlaşma (Messages)

Yeni Mesaj Gönder

POST /api/messages
Content-Type: application/json

{
  "receiver_id": 5,
  "content": "Merhaba, projeniz hakkında konuşabilir miyiz?"
}

Tüm Konuşmaları Listele

GET /api/messages/conversations

İki Kullanıcı Arasındaki Konuşmayı Getir

GET /api/messages/conversation/:otherUserId

Eşleşme İstekleri (Swap Requests)

Eşleşme İsteği Gönder

POST /swap-requests
Content-Type: application/json

{
  "receiver_id": 5
}

Gelen/Giden İstekleri Getir

GET /swap-requests

Yanıt:

{
  "success": true,
  "incoming": [],
  "outgoing": [],
  "accepted": []
}

İstek Durumu Güncelle

PUT /swap-requests/:id/status
Content-Type: application/json

{
  "status": "Accepted"
}

status: "Accepted" veya "Rejected"

Admin Paneli

Tüm Kullanıcıları Listele

GET /api/admin/users

Kullanıcı Güncelle

PUT /api/admin/users/:userId
Content-Type: application/json

{
  "username": "new_username",
  "email": "new_email@example.com"
}

Kullanıcı Sil

DELETE /api/admin/users/:userId

📱 Kullanım Senaryoları

1. Hızlı Başlangıç (Mock Kullanıcı ile)

Ana sayfada "Giriş Yap" butonuna tıklayın
Email alanına: user@gmail.com yazın
Şifre alanına: user yazın
Giriş yapın ve platformu keşfedin!

2. Yeni Kullanıcı Kaydı

Ana sayfada "Kayıt Ol" butonuna tıklayın
Kullanıcı adı, email ve şifre girin
Otomatik olarak giriş yapılır ve token alınır

3. Beceri Ekleme

Profil sayfasına gidin
"Offering" (Sunduğunuz beceriler) veya "Seeking" (Aradığınız beceriler) sekmesini seçin
Beceri ekleyin

4. Eşleşme Bulma

"Discover" sayfasına gidin
Karşılıklı eşleşen kullanıcıları görüntüleyin
İlgilendiğiniz kullanıcıya eşleşme isteği gönderin

5. Proje Oluşturma

Dashboard'da "Yeni Proje" butonuna tıklayın
Proje başlığı ve açıklama girin
Diğer kullanıcılar projenize başvurabilir

6. Mesajlaşma

Eşleştiğiniz kullanıcıyla mesajlaşmak için "Messages" sayfasına gidin
Konuşmayı başlatın veya devam ettirin

Proje Yapısı

swapsproject/
├── backend/
│   ├── config/
│   │   └── database.js         # PostgreSQL bağlantı ayarları
│   ├── controllers/
│   │   ├── authController.js   # Kimlik doğrulama
│   │   └── messageController.js # Mesajlaşma
│   ├── middleware/
│   │   └── auth.js              # JWT middleware
│   ├── routes/
│   │   ├── authroutes.js
│   │   └── messageRoutes.js
│   ├── index.js                 # Ana server dosyası
│   └── package.json
│
├── frontend/
│   ├── src/
│   │   ├── components/          # React bileşenleri
│   │   │   ├── Header.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── ProfilePage.jsx
│   │   │   ├── Discover.jsx
│   │   │   ├── MessagesPage.jsx
│   │   │   └── ...
│   │   ├── services/            # API servisleri
│   │   │   ├── authService.js
│   │   │   ├── skillsService.js
│   │   │   └── swapsService.js
│   │   ├── App.jsx              # Ana uygulama
│   │   └── main.jsx
│   ├── package.json
│   └── vite.config.js
│
└── README.md

Hata Ayıklama

Backend bağlanamıyor?

Docker servilerinin çalıştığından emin olun: docker ps
Logları kontrol edin: docker logs swaps-backend
Port 3005'in (Backend) veya 5435'in (DB) başka bir uygulama tarafından kullanılmadığından emin olun.

Frontend backend'e bağlanamıyor?

Frontend artık Nginx üzerinden çalıştığı için /api isteklerini otomatik yönlendirir.
Tarayıcı önbelleğini temizlemeyi deneyin.
Hata alıyorsanız docker-compose restart frontend komutunu deneyin.

Token geçersiz hatası?

Token'ınızın süresi dolmuş olabilir, yeniden giriş yapın.
Veritabanı sıfırlandığı için eski tokenlar geçersizdir, yeniden kayıt olun.

Katkıda Bulunma

Bu proje açık kaynaklıdır. Katkıda bulunmak için:

Bu repository'yi fork edin
Yeni bir branch oluşturun (git checkout -b feature/amazing-feature)
Değişikliklerinizi commit edin (git commit -m 'feat: Add amazing feature')
Branch'inizi push edin (git push origin feature/amazing-feature)
Pull Request açın

Lisans

Bu proje MIT lisansı altında lisanslanmıştır. Detaylar için LICENSE dosyasına bakın.

İletişim

Proje ile ilgili sorularınız için:

GitHub: yakuperoglu
Website: https://swaps.com.tr

Teşekkürler

SwapS platformunu kullandığınız için teşekkür ederiz! Becerilerinizi paylaşarak öğrenme topluluğuna katkıda bulunun.

Happy Swapping!

Name		Name	Last commit message	Last commit date
Latest commit History 27 Commits
backend		backend
frontend		frontend
.dockerignore		.dockerignore
.gitignore		.gitignore
.renderignore		.renderignore
README.md		README.md
TESTING_README.md		TESTING_README.md
TEST_DOCUMENTATION.md		TEST_DOCUMENTATION.md
docker-compose.yml		docker-compose.yml
render.yaml		render.yaml
setup_env.bat		setup_env.bat
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation

SwapS - Beceri Takas Platformu

Canlı Demo

🎯 Hızlı Test için Demo Hesaplar:

📋 Özellikler

🌐 HTML5 Özellikleri

Semantic HTML5 Elements

HTML5 Form Features

HTML5 Meta Tags

🛠️ Kullanılan Teknolojiler

Frontend

Backend

DevOps

Kurulum ve Çalıştırma (Docker ile)

Gereksinimler

1. Projeyi Klonlayın

2. Projeyi Başlatın

3. Veritabanı

Manuel Veritabanı Erişimi (Opsiyonel)

👤 Kullanıcı Giriş Bilgileri

Demo Kullanıcı Hesapları

📡 API Endpoint Listesi

Base URL

Kimlik Doğrulama (Authentication)

Kullanıcı Kaydı

Kullanıcı Girişi

Kullanıcı Profili

Profil Bilgilerini Getir

Profil Ayarlarını Kaydet

Hesabı Sil

Yetenekler (Skills)

Tüm Yetenekleri Listele

Yeni Yetenek Ekle

Yetenek Güncelle

Yetenek Sil

Kategorileri Listele

Kullanıcı Becerileri (User Skills)

Kullanıcının Becerilerini Getir

Kullanıcıya Beceri Ekle

Kullanıcıdan Beceri Sil

Karşılıklı Eşleşme (Reciprocal Matching)

İki Yönlü Beceri Eşleşmelerini Getir

Projeler (Projects)

Tüm Projeleri Listele

Proje Detayı

Kullanıcının Projeleri

Yeni Proje Oluştur

Proje Güncelle

Proje Sil

Başvurular (Matches)

Kullanıcının Başvurularını Listele

Projeye Başvur

Başvuru Durumu Güncelle

Başvuru Sil

Dashboard

Kullanıcı Görevleri

Mesajlaşma (Messages)

Yeni Mesaj Gönder

Tüm Konuşmaları Listele

İki Kullanıcı Arasındaki Konuşmayı Getir

Eşleşme İstekleri (Swap Requests)

Eşleşme İsteği Gönder

Gelen/Giden İstekleri Getir

İstek Durumu Güncelle

Admin Paneli

Tüm Kullanıcıları Listele

Kullanıcı Güncelle

Kullanıcı Sil

📱 Kullanım Senaryoları

1. Hızlı Başlangıç (Mock Kullanıcı ile)

2. Yeni Kullanıcı Kaydı

3. Beceri Ekleme

4. Eşleşme Bulma

5. Proje Oluşturma

6. Mesajlaşma

Proje Yapısı

Hata Ayıklama

Packages