Laravel 12 ve React ile Ücretsiz QR Menü SaaS Geliştirdim – Öğrendiklerim

Bir süre önce kendime yeni bir mikro SaaS geliştirme hedefi koydum.
Bir diğer yapay zeka destekli araç yerine, gerçek dünyadan basit bir problemi çözmek istedim.
Restoran sahipleri, fiyatlar değiştiğinde veya yeni yemekler eklendiğinde sürekli menü basmak için zaman ve para harcıyorlar.
Çözüm basit görünüyordu: restoranların çevrimiçi olarak menülerini yönetmelerine ve müşteriler için bir QR kodu üretmelerine olanak veren bir QR Menü Oluşturucu inşa etmek.
Fikir basit, ama uygulama zordu.
Bu makalede, Laravel 12, React, Inertia.js ve Tailwind CSS kullanarak inşa ederken aldığım mimari kararları, karşılaştığım zorlukları ve öğrendiğim dersleri paylaşacağım.

Backend

Laravel 12
PHP 8.4
MySQL

Frontend

React
Inertia.js
Tailwind CSS
Vite

Laravel benim ilk tercih olmaya devam ediyor çünkü kod organizasyonundan ödün vermeden hızlı hareket etmeme olanak tanıyor.
React + Inertia, ayrı bir frontend ve backend uygulaması yönetmeden modern bir SPA deneyimi sunuyor.
Bir solo geliştirici olarak çok sayıda mikro SaaS ürünü inşa ederken bu kombinasyon son derece verimli oldu.
Veritabanını Tasarlamak
Önceki projelerde yaptığım hatalardan biri her şeyi birbirine bağlı hale getirmek oldu.
Bu sefer veritabanını basit ve modüler tuttum.
restaurants
├── categories
│ └── menu_items
│
├── qr_codes
│
└── scans
İlişkiler çok net.
Restaurant

hasMany Categories

Category

hasMany MenuItems

Restaurant

hasMany Scans

Hiyerarşiyi yüzeysel tutmak, sorguları kolaylaştırdı ve gereksiz birleştirmeleri azalttı.
Neden Her Şeyi JSON’da Saklamadım?
Tüm menüyü bir JSON sütununda saklamak cazip gelebilir.
Bunu kullanmak kolaydır, fakat büyük uygulamalarda arama, analiz, sipariş, filtreleme gibi ihtiyaçlar zorlaşır.
Doğru ilişkisel tablolar kullanmak, gelecekte özellik eklemeyi çok daha kolay hale getiriyor.
QR Kodları Oluşturmak
QR oluşturmak, en kolay kısımlardan biri olarak ortaya çıktı.
Laravel paketlerini kullanarak, QR kodu oluşturmak oldukça basit.
$url = route(‘restaurant.menu’, $restaurant->slug);

QrCode::format(‘svg’)
->size(300)
->generate($url);
SVG seçmemin nedeni:
daha küçük dosya boyutu
mükemmel ölçeklenebilirlik
basıldığında daha keskin görünmesi
gömme kolaylığı
Halka Açık Menüyü Yönlendirme
Erken yaptığımdan bir karar, halka açık menüyü kontrol panelinden ayırmaktı.
/restaurant/25/menu yerine
/menu/the-coffee-house şeklinde URL’leri tercih ettim.
Sluglar, daha temiz URL’ler sağlar ve SEO için çok daha iyidir.
Laravel, sluglarla rota model bağlamayı son derece kolay hale getiriyor.
Route::get(‘/menu/{restaurant:slug}’, …);
Kontrol Panelini Oluşturmak
Kontrol panelinde yalnızca birkaç bölüm var.
Restaurant
Categories
Menu Items
QR Code
Settings
Analytics
Kasımda
Restoran sahipleri karmaşık yazılımları istemezler.
Sadece şunları isterler:
fiyatları güncelleme
yemek ekleme
uygun olmayan öğeleri gizleme
QR kodu yazdırma
Bazen daha az özellik, daha iyi bir ürün yaratır.
Mobil Öncelikli
Önceki SaaS projelerimden öğrendiğim bir ders:
Mobil kullanımını son dakika düşünmeyin.
Restoran sahipleri menülerini genellikle telefonlarından günceller.
Her sayfa, daha küçük ekranlarda kullanışlı olacak şekilde tasarlandı.
Tailwind CSS, responsive tasarımlarımı önceki Bootstrap projelerimden çok daha kolay hale getirdi.
Performans Dikkatleri
Basit bir menü bile yüzlerce öğe içerebilir.
Hızlı yükleme sağlamak için:
ilişkileri önceden yükledim
veritabanı indekslerini optimize ettim
halka açık menüleri önbelleğe aldım
görüntüleri optimize ettim
yönetici bileşenlerini tembel yükledim
Halka açık menü, neredeyse anlık bir his vermelidir çünkü müşteriler masada otururken tarayıcılarlar.
SEO’nun Beklediğimden Daha Önemli Olması
Başlangıçta burayı tipik bir SaaS açılış sayfası olarak ele aldım.
Sonra, restoran sahiplerinin genellikle şu isimlerle arama yaptığını fark ettim:
Ücretsiz QR Menü
QR Menü Oluşturucu
Dijital Restoran Menüsü
Restoran QR Kod Menüsü
Bu yüzden zaman harcayıp:
anlam yapısı
şekillendirilmiş başlıklar
SSS
açılış sayfası içeriği
iç bağlama
meta veriler
iyileştirdim.
İyi bir SEO, özellik geliştirmeden daha uzun sürer – ama yatırım yapmaya değer.
Farklı Yapacaklarım
Eğer yeniden başlarsam, muhtemelen şunları inşa ederim:
çok dilli menüler
menü şablonları
görsel optimizasyon kanalı
analiz kontrol paneli
Gerçek yazılım geliştirmek, planlamanın veremeyeceği şeyleri öğretir.
Gelecek Ne?
Şu anda üzerinde çalıştığım bazı özellikler:
📊 Tarama analitiği
📱 WhatsApp sipariş verme
🍽️ Birden fazla menü şablonu
🌍 Çok dilli destek
📅 Ön sipariş menüleri
⭐ Öne çıkan yemekler
Ürünü basit tutmaya çalışıyorum, restoran sahiplerinin gerçek sorunlarını çözüyor.
Son Düşünceler
Küçük SaaS ürünleri üretmek, en sevdiğim öğrenme yöntemlerinden biri haline geldi.
Her proje, mimari, UX, SEO, performans ve dağıtım hakkında düşünmeyi zorunlu kılıyor – sadece kod yazmak değil.
Bu QR Menü Oluşturucu, bir haftasonu fikri olarak başlamış ve Laravel, React ve ürün geliştirme ile deneme yapabileceğim pratik bir projeye dönüşmüştür.
Kendi mikro SaaS’ınızı inşa ediyorsanız, projelerinizi nasıl yapılandırdığınızı ve hangi yığını kullandığınızı duymaktan memnun olurum.
Projeyi burada da görebilirsiniz:
👉 https://www.smarteyeapps.com/qr-menu
Tags: