QR Menu Project

QR Menu, küçük işletmeler (kafeler, restoranlar, büfeler vb.) için modern ve kullanıcı dostu dijital menü oluşturma ve QR kod ile paylaşma platformudur. İşletmeler, menülerini hızlıca dijitalleştirip müşterilerine QR kod aracılığıyla sunabilirler.

📋 İçindekiler

• Proje Hakkında
• Ekran Görüntüleri
• Özellikler
• Teknoloji Stack
• Proje Yapısı
• Kurulum
• Kullanım
• API Dokümantasyonu
• Mimari Prensipler
• Güvenlik
• Katkıda Bulunma

🎯 Proje Hakkında {#proje-hakkinda}

QR Menu, modern web teknolojileri kullanılarak geliştirilmiş bir SaaS-ready platformdur. İşletmeler, bu platform sayesinde:

• Hızlı Menü Oluşturma: Kategoriler ve menü öğeleri ile detaylı menüler oluşturabilir
• QR Kod Paylaşımı: Oluşturulan menüleri QR kod ile müşterilere sunabilir
• Kolay Yönetim: Drag & drop ile kolayca sıralama yapabilir, menülerini güncelleyebilir
• Modern Arayüz: Responsive tasarım ile hem masaüstü hem mobil cihazlarda mükemmel deneyim

Proje, Clean Architecture ve SOLID prensiplerine uygun olarak geliştirilmiştir. Backend'de .NET 8, frontend'de Next.js 16 ve React 19 kullanılmıştır.

📸 Ekran Görüntüleri {#ekran-goruntuleri}

Not: Ekran görüntüleri eklemek için aşağıdaki formatı kullanabilirsiniz. Görselleri docs/screenshots/ klasörüne ekleyip buraya referans verebilirsiniz.

Ana Sayfa (Landing Page)

Ana sayfa - Platform tanıtımı ve özellikler

Giriş Sayfası (Login)

Giriş sayfası - Kullanıcı girişi ve "Beni Hatırla" özelliği

Kayıt Sayfası (Register)

Kayıt sayfası - Yeni kullanıcı kaydı

Dashboard

Ana dashboard ekranı - Menü listesi ve yönetim

Menü Detay

Menü detay sayfası - Kategoriler ve menü öğeleri yönetimi

QR Kod Oluşturma

QR kod oluşturma ve paylaşım ekranı

Public Menü

Müşteriler için public menü görüntüleme

Ekran görüntüsü eklemek için:

1. Görselleri docs/screenshots/ klasörüne ekleyin
2. Yukarıdaki formatı kullanarak README'ye ekleyin
3. Alternatif olarak, görselleri GitHub'a yükleyip direkt link verebilirsiniz

✨ Özellikler {#ozellikler}

🔐 Kimlik Doğrulama

• JWT tabanlı güvenli kimlik doğrulama
• "Beni Hatırla" özelliği
• Şifre sıfırlama (email ile)
• Oturum yönetimi

📱 Menü Yönetimi

• Menü oluşturma, düzenleme ve silme
• Kategori yönetimi (sınırsız kategori)
• Menü öğesi ekleme, düzenleme, silme
• Drag & drop ile kolay sıralama
• Görsel yükleme (menü ve öğe resimleri)
• Fiyat ve açıklama yönetimi

📊 QR Kod Sistemi

• Dinamik QR kod oluşturma
• Özel QR kod URL'leri
• Public menü görüntüleme
• QR kod ile hızlı erişim

🎨 Kullanıcı Arayüzü

• Modern ve şık tasarım
• Tam responsive (mobil, tablet, desktop)
• Drag & drop ile sürükle-bırak
• Gerçek zamanlı güncellemeler
• Loading states ve error handling
• Touch-friendly mobil deneyim

⚡ Performans

• Optimize edilmiş database sorguları
• Database indexing
• AsNoTracking ile hızlı okuma
• Lightweight API responses
• Efficient state management

🛠 Teknoloji Stack {#teknoloji-stack}

Backend

• .NET 8 - Modern C# framework
• Entity Framework Core 8.0.11 - ORM
• SQL Server - Veritabanı
• JWT Authentication - Güvenli kimlik doğrulama
• Swagger/OpenAPI - API dokümantasyonu

Frontend

• Next.js 16 - React framework (App Router)
• React 19 - UI kütüphanesi
• TypeScript - Type-safe JavaScript
• Tailwind CSS 4 - Utility-first CSS framework
• @dnd-kit - Drag & drop kütüphanesi

📁 Proje Yapısı {#proje-yapisi}

Backend (.NET 8)

QRMenuApp.API/              # REST API endpoints, JWT Authentication
QRMenuApp.Application/       # Business logic, Services, DTOs
QRMenuApp.Domain/            # Entity models, Interfaces
QRMenuApp.Infrastructure/    # EF Core, Repositories, Data Access
QRMenuApp.Tests/             # Unit & Integration Tests

Frontend (Next.js)

frontend/
├── app/                     # Next.js App Router pages
│   ├── dashboard/          # Dashboard sayfaları
│   ├── login/              # Giriş sayfası
│   └── menu/               # Public menü görüntüleme
├── components/             # React component'leri
├── contexts/               # React Context (Auth)
├── hooks/                  # Custom React hooks
├── lib/                    # Utilities, API client
└── public/                # Static dosyalar

🚀 Kurulum {#kurulum}

Gereksinimler

• .NET 8 SDK
• Node.js 18+ ve npm
• SQL Server (LocalDB veya SQL Server)

Backend Kurulumu

1. Veritabanı bağlantı string'ini ayarlayın: QRMenuApp.API/appsettings.json dosyasında ConnectionStrings:DefaultConnection değerini güncelleyin:

   "ConnectionStrings": {
     "DefaultConnection": "Server=YOUR_SERVER;Database=QRMenuDb;Trusted_Connection=True;TrustServerCertificate=True;"
   }

2. JWT Key'i ayarlayın (ÖNEMLİ!): appsettings.json dosyasında Jwt:Key değerini güvenli bir random key ile değiştirin:

   "Jwt": {
     "Key": "YOUR_SECURE_RANDOM_KEY_HERE_AT_LEAST_32_CHARACTERS",
     ...
   }

   Key oluşturma yöntemleri:

   • PowerShell: [Convert]::ToBase64String((1..32 | ForEach-Object { Get-Random -Maximum 256 }))
   • Online: https://www.guidgenerator.com/online-guid-generator.aspx
   • Manuel: En az 32 karakter uzunluğunda rastgele bir string

   Not: Development ortamında key belirtmezseniz, uygulama otomatik olarak bir default key kullanır (sadece development için). Production'da mutlaka kendi key'inizi kullanmalısınız!

3. Veritabanını oluşturun:

   cd QRMenuApp.API
   dotnet restore
   dotnet ef database update --project ../QRMenuApp.Infrastructure

4. API'yi çalıştırın:

   dotnet run

   API varsayılan olarak https://localhost:7000 adresinde çalışacaktır.

Frontend Kurulumu

1. Bağımlılıkları yükleyin:

   cd frontend
   npm install

2. Environment değişkenlerini ayarlayın: frontend/.env.local dosyası oluşturun:

   NEXT_PUBLIC_API_URL=http://localhost:5000/api

   Not: Backend'inizin çalıştığı port'a göre URL'yi güncelleyin.

3. Frontend'i çalıştırın:

   npm run dev

   Frontend varsayılan olarak http://localhost:3000 adresinde çalışacaktır.

📖 Kullanım {#kullanim}

İlk Kullanım

1. Frontend'e gidin: http://localhost:3000
2. "Kayıt Ol" ile yeni bir hesap oluşturun
3. Giriş yaptıktan sonra dashboard'a yönlendirileceksiniz
4. "Yeni Menü" butonuna tıklayarak ilk menünüzü oluşturun
5. Kategoriler ve menü öğeleri ekleyin
6. QR kod oluşturarak menünüzü paylaşın

Menü Yönetimi

• Kategori Ekleme: Menü detay sayfasında "Kategori Ekle" butonunu kullanın
• Menü Öğesi Ekleme: Kategori seçerek veya kategorisiz olarak öğe ekleyin
• Sıralama: Kategorileri ve öğeleri sürükle-bırak ile sıralayın
• Düzenleme: Öğelere tıklayarak düzenleme modal'ını açın
• Silme: Silme butonuna tıklayarak onaylayın

QR Kod Oluşturma

1. Menü detay sayfasında "QR Kod Oluştur" butonuna tıklayın
2. QR kod otomatik olarak oluşturulur
3. QR kodu indirip yazdırabilir veya paylaşabilirsiniz
4. QR kodu tarayan müşteriler menünüzü görüntüleyebilir

📡 API Dokümantasyonu {#api-dokumantasyonu}

API çalışırken Swagger UI'ya erişebilirsiniz: https://localhost:7000/swagger

Authentication Endpoints

• POST /api/users/register - Kullanıcı kaydı
• POST /api/users/login - Kullanıcı girişi
• POST /api/users/forgot-password - Şifre sıfırlama isteği
• POST /api/users/reset-password - Şifre sıfırlama

Menus Endpoints (Auth Required)

• GET /api/menus - Tüm menüleri listele
• GET /api/menus/summaries - Menü özetleri (hızlı liste)
• GET /api/menus/{id} - Menü detayı
• GET /api/menus/public/{id} - Public menü görüntüleme
• POST /api/menus - Yeni menü oluştur
• PUT /api/menus/{id} - Menü güncelle
• DELETE /api/menus/{id} - Menü sil

Categories Endpoints (Auth Required)

• POST /api/menus/{menuId}/categories - Kategori ekle
• PUT /api/menus/{menuId}/categories/{categoryId} - Kategori güncelle
• DELETE /api/menus/{menuId}/categories/{categoryId} - Kategori sil
• PUT /api/menus/{menuId}/categories/reorder - Kategori sıralama

Menu Items Endpoints (Auth Required)

• POST /api/menus/{menuId}/items - Menü öğesi ekle
• PUT /api/menus/{menuId}/items/{itemId} - Menü öğesi güncelle
• DELETE /api/menus/{menuId}/items/{itemId} - Menü öğesi sil
• PUT /api/menus/{menuId}/items/reorder - Menü öğesi sıralama

QR Codes Endpoints

• POST /api/menus/{menuId}/qrcode - QR kod oluştur (Auth Required)
• GET /api/menus/{menuId}/qrcode/{code} - QR kod detayı (Public)

🏗 Mimari Prensipler {#mimari-prensipler}

Proje, modern yazılım geliştirme prensiplerine uygun olarak tasarlanmıştır:

• Clean Architecture: Katmanlı mimari ile concern separation
• SOLID Principles: Tüm SOLID prensiplerine uyum
• Repository Pattern: Data access katmanı soyutlanmış
• Dependency Injection: Tüm bağımlılıklar DI ile yönetiliyor
• DTO Pattern: API request/response'lar için DTO kullanımı
• Service Layer: Business logic service katmanında
• Exception Handling: Merkezi exception handling middleware

🔒 Güvenlik {#guvenlik}

Önemli Güvenlik Notları

1. JWT Key: Production ortamında mutlaka güçlü bir JWT key kullanın (en az 32 karakter, random)
2. Connection String: Veritabanı bağlantı bilgilerini appsettings.json yerine environment variables veya User Secrets kullanın
3. Email Credentials: Email ayarlarını production'da environment variables ile yönetin
4. Environment Variables: Hassas bilgileri .env dosyalarında saklayın ve .gitignore'a ekleyin
5. HTTPS: Production'da mutlaka HTTPS kullanın

Güvenlik Özellikleri

• JWT token tabanlı authentication
• Password hashing (SHA256)
• SQL injection koruması (EF Core parameterized queries)
• CORS yapılandırması
• Input validation (service layer)
• Error message sanitization

🤝 Katkıda Bulunma {#katkida-bulunma}

Katkılarınızı bekliyoruz! Lütfen:

1. Fork edin
2. Feature branch oluşturun (git checkout -b feature/amazing-feature)
3. Commit edin (git commit -m 'Add some amazing feature')
4. Push edin (git push origin feature/amazing-feature)
5. Pull Request açın

Kod Standartları

• Clean Code prensiplerine uyun
• SOLID prensiplerini takip edin
• Unit test yazın (mümkünse)
• Gereksiz comment'ler eklemeyin
• TypeScript type safety'ye dikkat edin

👨‍💻 Geliştirici

Proje, modern web teknolojileri kullanılarak geliştirilmiştir. Sorularınız için issue açabilirsiniz.

---

⚠️ Önemli Notlar

Development vs Production

Bu proje, modern web geliştirme pratiklerini öğrenmek ve uygulamak için geliştirilmiştir. Production ortamında kullanmadan önce:

1. JWT Key: appsettings.json dosyasındaki Jwt:Key değerini güçlü bir random key ile değiştirin (en az 32 karakter)
2. Connection String: Veritabanı bağlantı bilgilerini environment variables veya Azure Key Vault gibi güvenli bir yerde saklayın
3. HTTPS: Mutlaka HTTPS kullanın
4. CORS: Production'da CORS ayarlarını sadece gerekli domain'ler için yapılandırın
5. Rate Limiting: API'ye rate limiting ekleyin
6. Logging: Production'da uygun logging ve monitoring ekleyin

JWT Key Nasıl Değiştirilir?

1. QRMenuApp.API/appsettings.json dosyasını açın
2. Jwt:Key değerini bulun
3. Güçlü bir random key oluşturun (örnek: openssl rand -base64 32 komutu ile)
4. Değeri değiştirin:

   "Jwt": {
     "Key": "YOUR_SECURE_RANDOM_KEY_HERE_AT_LEAST_32_CHARACTERS",
     ...
   }

5. Uygulamayı yeniden başlatın

Not: Development ortamında key belirtilmezse, uygulama otomatik olarak bir default key kullanır (sadece development için). Production'da mutlaka kendi key'inizi kullanmalısınız!