🚀 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

📌 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

pnpm install

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

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

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

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.
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ı.
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ı.

7.7 KiB Raw Blame History Unescape Escape