# 🚀 Menulio — Cross-Platform SaaS & Dynamic QR Stand Studio Ecosystem

> **Modern Restoranlar İçin Dijital Menü Deneyimi & Anlık JSON Şablon Motoru Destekli Masa Kartı Tasarım Platformu**

![Menulio Banner](https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1200&auto=format&fit=crop&q=80)

---

## 📌 Proje Özeti (Executive Summary)

**Menulio**, restoranların ve gastronomi işletmelerinin dijital menülerini ve fiziksel masa kartı QR stantlarını uçtan uca yönetmelerini sağlayan **Full-Stack Cross-Platform SaaS mimarisidir**. 

Geleneksel QR menü sistemlerinden farklı olarak Menulio, **0 (Sıfır) App Store güncellemesi gerektiren "JSON-Driven Dynamic Template Engine" (V2)** teknolojisine sahiptir. Admin panelinden tasarlanan SVG/PNG arka planları, kavisli metin hesaplamaları (*curved text math*), 360° döndürme, renk paletleri ve özel QR yerleşimleri API üzerinden anında hem Web hem de Mobil (iOS/Android) platformlarında canlı yayınlanır.

---

## 🛠️ Öne Çıkan Mimari Özellikler (Key Highlights)

### 1. 🎨 JSON-Driven Dynamic QR Stand Engine (V2)
- **Sıfır Güncelleme Dağıtımı**: Mobil uygulamayı yeniden derlemeden Web Admin panelinden yeni masa kartı şablonu oluşturma ve anında yayınlama.
- **Kavisli Metin Matematiği (`curveDegree`)**: Radyal açı hesaplamaları ile dairesel ve yay biçiminde metin hizalama (Yay ◡ ve ◠ kavis derecesi ayarlama).
- **Figma & Instagram Story Tarzı Tuval Editörü**: Sürüklenebilir (*drag & drop*), ölçeklenebilir, 360° döndürülebilir metin ve QR katmanları.
- **Manyetik Kılavuz Çizgileri**: Akıllı dikey/yatay merkezleme ve hizalama çizgileri (*snap-to-grid*).
- **Matbaa Kalitesinde Baskı Çıktısı**: 300 DPI Ultra HD PNG ve A5 Matbaa standartlarında vektörel PDF çıktısı.

### 2. 📱 Cross-Platform Mobil Uygulama (Expo & React Native)
- **iOS & Android Desteği**: Expo SDK 52 ve React Native mimarisi üzerine kurulu yüksek performanslı arayüz.
- **Dokunsal Geri Bildirim (Haptic Feedback)**: İşlem anında `expo-haptics` ile kullanıcıya fiziksel titreşim uyarısı.
- **Yerel iOS Derleme & Paketleme**: Xcode Archive & Fastlane entegrasyonu ile tam imzalı `embedded.mobileprovision` içerikli `.ipa` dağıtımı.

### 3. 🌐 Web Uygulaması & 10+ Lüks Menü Teması (Next.js 15 App Router)
- **10 Özel Restoran Teması**: `Eleia Coastal`, `Neon Street Fuze`, `La Maison d'Élève`, `Swiss Brutalist`, `Amber Artisan`, `Elegant Gold`, `Modern Sapphire`, `Luxury Dark`, `Nordic Minimal`, `Classic Bistro`.
- **Wildcard Subdomain Yönlendirmesi**: `restoran-adi.menul.io` şeklinde her işletmeye özel subdomain ve özel alan adı (custom domain) desteği.
- **Canlı Cihaz Simülatörü**: Admin panelinde tema ve şablon değişikliklerini anında gösteren interaktif iPhone çerçevesi.

### 4. 🔐 Çift Katmanlı Yönetici Güvenliği (Dual-Layer Admin Auth)
- **Next.js Server Middleware**: Yetkisiz sunucu isteklerini anında `/admin/login` sayfasına yönlendiren çerez tabanlı doğrulama.
- **Client Auth Guard**: React tarafında yükleme animasyonu ve oturum doğrulama mekanizması.
- **Supabase Auth & Fallback Credential**: Supabase PostgreSQL veritabanı entegrasyonu ve güvenli token çerezi (`menulio_admin_token`).

---

## 💻 Teknolojik Mimari & Kullanılan Teknolojiler

| Katman | Kullanılan Teknolojiler |
| :--- | :--- |
| **Monorepo Mimarisi** | `pnpm Workspaces`, Shared Type Definitions (`@menulio/shared`) |
| **Web Uygulaması (Frontend)** | `Next.js 15 (App Router)`, `React 18`, `Tailwind CSS`, `Glassmorphism UI` |
| **Mobil Uygulama** | `React Native`, `Expo (SDK 52)`, `Expo Router`, `ViewShot`, `Expo Haptics` |
| **Veritabanı & Auth** | `Supabase (PostgreSQL, Auth, RLS)`, REST API, Local Disk Cache |
| **Görsel & Baskı Motoru** | `html-to-image`, `jspdf`, `qrcode.react`, Google Fonts API |
| **CI/CD & Derleme** | `Xcode 26`, `Fastlane`, `EAS Build (Expo Application Services)` |

---

## 📸 Ekran Görüntüleri & Görsel Bileşenler

```
+-----------------------------------------------------------------------+
|  MENULIO ADMIN PANEL - DİNAMİK ŞABLON & TEMA STÜDYOSU                |
+-----------------------------------------------------------------------+
| [ Sol Panel: Renk/Düzen Kontrolleri ] | [ Sağ: Canlı iPhone Simülatörü ]|
| - Primary Color: #D4AF37              | +-----------------------------+ |
| - Product Layout: Card / List         | |  OZZY KEBAP                 | |
| - Category Layout: Tabs / Accordion   | |  [ QR KOD BÖLGESİ ]         | |
| - Curved Text Math: 35° Arc           | |  MENÜYÜ GÖRMEK İÇİN OKUTUN  | |
| - Font Family: Playfair / Inter       | +-----------------------------+ |
+-----------------------------------------------------------------------+
```

---

## 📐 Proje Dosya & Klasör Yapısı

```
menulio/
├── apps/
│   ├── mobile/                    # React Native / Expo Mobil Uygulama
│   │   ├── src/
│   │   │   ├── app/               # Expo Router Dosya Tabanlı Yönlendirme
│   │   │   ├── components/
│   │   │   │   ├── qr-canvas/     # Tuval Editörü, Curved Text & Dokunmatik Katmanlar
│   │   │   │   └── qr-templates/  # SVG & Vektörel Şablon Render Bileşenleri
│   │   └── ios/                   # Yerel Xcode Proje Klasörü & Podfile
│   │
│   ├── web/                       # Next.js 15 Web & Admin Uygulaması
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── admin/         # Yönetici Paneli & Auth Guard (/admin)
│   │   │   │   │   ├── templates/ # QR Stand Şablon Stüdyosu
│   │   │   │   │   └── menu-templates/ # Web Menü Temaları Stüdyosu
│   │   │   │   ├── qr/            # Müşteri QR Masa Kartı Jeneratörü
│   │   │   │   └── menu/[slug]/   # Canlı Restoran Web Menüsü
│   │   │   ├── components/        # Web Bileşenleri & Simülatörler
│   │   │   └── lib/               # Auth, Supabase & Tema Tanımları
│   │
│   └── api/                       # Express / Node.js Backend REST Servisleri
│
└── packages/
    └── shared/                    # Tip Tanımları, Renk Paletleri & Ortak Sabitler
```

---

## ⚡ Kurulum ve Çalıştırma (Getting Started)

Proje `pnpm` monorepo yapısında kurgulanmıştır.

### 1. Bağımlılıkları Yükleyin
```bash
pnpm install
```

### 2. Geliştirme Sunucularını Başlatın

- **Tüm Uygulamaları Aynı Anda Başlatma**:
  ```bash
  pnpm dev
  ```
- **Sadece Web Uygulamasını Başlatma**:
  ```bash
  pnpm --filter web dev
  ```
- **Sadece Mobil Uygulamayı (Expo) Başlatma**:
  ```bash
  pnpm --filter mobile start
  ```

---

## 👨‍💻 Mühendislik & Problem Çözme Vurguları (Portfolio Highlights)

1. **React Native Font Rendering Fix**:
   - React Native'in iOS ve Android native font motorunda virgüllü CSS fallback dizgilerinin (`Georgia, 'Times New Roman', serif`) sessizce varsayılan sistem fontuna düşme problemi tespit edilerek, platforma özel tekil font çözümleme mekanizması geliştirildi.
2. **Kavisli Metin Radyal Geometri Matematiği**:
   - Metin karakterlerinin dairesel bir yay etrafında doğru açı (`rotate`), `translateX` ve `translateY` offset hesaplamaları ile hem Web SVG/HTML hem de Native Text bileşenlerinde piksel mükemmelliğinde işlenmesi sağlandı.
3. **Senkronize JSON Şablon Yayınlama**:
   - Web Admin panelinde yapılan herhangi bir tasarım veya metin düzenlemesinin, veritabanı ve REST API üzerinden anında mobil uygulama tuvalinde ve web jeneratöründe canlı olarak görünmesi sağlandı.

---

## 📄 Lisans

Bu proje kişisel portfolyo ve özel geliştirme amacıyla kurgulanmıştır. Tüm hakları saklıdır.