145 lines
7.7 KiB
Markdown
145 lines
7.7 KiB
Markdown
# 🚀 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
|
||
```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.
|