🍽️ QR Menü Sistemi

QR kod ile dükkanınızdaki menülere erişilebilen modern ve kullanıcı dostu bir web uygulaması.

✨ Özellikler

• 📱 QR Kod ile Menü Erişimi - Müşteriler QR kodu tarayarak menünüze anında ulaşır
• 🍽️ Kategorilere Göre Menü Görüntüleme - Menüleri kategorilere göre düzenli şekilde görüntüleyin
• ✏️ Admin Paneli - Kolay menü yönetimi (ekleme, düzenleme, silme)
• 🏪 Restoran Bilgileri Yönetimi - Restoran adı, açıklama, telefon, adres bilgilerini düzenleyin
• 📥 QR Kod İndirme - QR kodu PNG formatında indirip yazdırın
• 🎨 Modern ve Responsive Tasarım - Mobil ve masaüstünde mükemmel görünüm
• 💾 JSON Tabanlı Veri Saklama - Basit ve hızlı veri yönetimi

🚀 Hızlı Başlangıç

Gereksinimler

• Node.js 18+
• npm veya yarn

Kurulum

1. Projeyi klonlayın:

   git clone https://github.com/kullanici-adi/qr-menu.git
   cd qr-menu

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

   npm install

3. Geliştirme sunucusunu başlatın:

   npm run dev

4. Tarayıcıda açın:

   http://localhost:3000
   

📖 Kullanım

Ana Sayfa (/)

• QR kod otomatik olarak oluşturulur
• QR kodu indirebilirsiniz
• Menüyü görüntüleyebilir veya admin paneline gidebilirsiniz

Menü Sayfası (/menu)

• Müşteriler QR kodu tarayarak bu sayfaya ulaşır
• Kategorilere göre menü öğelerini görüntüler
• Responsive tasarım ile mobil uyumlu

Admin Paneli (/admin)

Menü Yönetimi

1. Yeni Menü Ekle:

   • "Yeni Menü Ekle" butonuna tıklayın
   • Menü bilgilerini doldurun:
     • Ad: Menü öğesinin adı (zorunlu)
     • Açıklama: İsteğe bağlı açıklama
     • Fiyat: Fiyat (zorunlu)
     • Kategori: Kategori adı (zorunlu, örn: "Pizza", "İçecek", "Tatlı")
     • Resim URL: İsteğe bağlı resim URL'i
   • "Ekle" butonuna tıklayın

2. Menü Düzenle:

   • Menü listesinde "Düzenle" butonuna tıklayın
   • Bilgileri güncelleyin
   • "Güncelle" butonuna tıklayın

3. Menü Sil:

   • Menü listesinde "Sil" butonuna tıklayın
   • Onaylayın

Restoran Bilgileri

1. "Restoran Bilgilerini Düzenle" butonuna tıklayın
2. Restoran adı, açıklama, logo URL, telefon ve adres bilgilerini girin
3. "Kaydet" butonuna tıklayın

🎯 QR Kod Kullanımı

1. Ana sayfada QR kod otomatik olarak oluşturulur
2. "QR Kodu İndir" butonuna tıklayarak PNG dosyasını indirin
3. QR kodu yazdırın veya dijital ekranda gösterin
4. Müşteriler QR kodu tarayarak menü sayfasına yönlendirilir

QR Kodu Basma

1. Ana sayfada "QR Kodu İndir" butonuna tıklayın
2. İndirilen PNG dosyasını bir QR kod yazıcı servisine gönderin
3. Masalara veya duvarlara yerleştirin

💾 Veri Saklama

Uygulama JSON dosyaları kullanarak verileri saklar. Veriler data/ klasöründe tutulur:

• data/menus.json - Menü öğeleri
• data/restaurant.json - Restoran bilgileri

Veriler otomatik olarak oluşturulur ve yönetilir. Production ortamında data/ klasörüne yazma izni verildiğinden emin olun.

🏗️ Production Build

npm run build
npm start

🚢 Deployment

Vercel (Önerilen)

1. GitHub'a projeyi push edin
2. Vercel adresine gidin
3. "New Project" butonuna tıklayın
4. GitHub repository'nizi seçin
5. Deploy edin

Not: Vercel'de data/ klasörüne yazma izni için serverless fonksiyonları kullanmanız gerekebilir. Production için veritabanı (PostgreSQL, MongoDB) kullanmanız önerilir.

Diğer Platformlar

• Railway: https://railway.app
• Render: https://render.com
• DigitalOcean App Platform: https://www.digitalocean.com
• Plesk: Plesk Node.js extension ile

Her platform için:

1. Projeyi Git repository'sine push edin
2. Platform'a bağlayın
3. Build komutu: npm run build
4. Start komutu: npm start
5. data/ klasörüne yazma izni verin

🛠️ Geliştirme

Proje Yapısı

qr-menu/
├── app/                 # Next.js app directory
│   ├── api/            # API routes
│   ├── admin/          # Admin paneli
│   ├── menu/           # Menü sayfası
│   └── page.tsx        # Ana sayfa
├── lib/                # Utility fonksiyonlar
│   └── db.ts           # Veri yönetimi
├── data/               # Veri dosyaları (JSON)
├── public/             # Static dosyalar
└── package.json        # Bağımlılıklar

Özelleştirme

Stil Değişiklikleri

tailwind.config.js dosyasında renkler ve stilleri özelleştirebilirsiniz.

Menü Kategorileri

Kategoriler dinamik olarak oluşturulur. Admin panelinden menü eklerken kategori adını girerek yeni kategoriler oluşturabilirsiniz.

🐛 Sorun Giderme

Port Kullanımda

Eğer 3000 portu kullanımdaysa:

Windows PowerShell:

$env:PORT=3001; npm run dev

Windows CMD:

set PORT=3001 && npm run dev

Linux/Mac:

PORT=3001 npm run dev

Veri Klasörü İzinleri

Eğer veri yazma hatası alırsanız:

Linux/Mac:

chmod 755 data
chmod 644 data/*.json

Windows:

• Dosya gezgininden data klasörüne sağ tıklayın
• Özellikler → Güvenlik → Düzenle
• Yazma izni verin

Build Hatası

# Build'i temizleyin ve yeniden yapın
rm -rf .next
npm run build

📝 Lisans

Bu proje MIT lisansı altında lisanslanmıştır.

🤝 Katkıda Bulunma

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

📧 İletişim

Sorularınız için issue açabilirsiniz.

🙏 Teşekkürler

• Next.js
• Tailwind CSS
• QRCode

---

⭐ Bu projeyi beğendiyseniz yıldız vermeyi unutmayın!