01 / 07RESTORAN · ALMANYAYayında
Bravo Grill
Kloster Lehnin'deki (Almanya) Bravo Grill için marka hissini taşıyan bir web sitesi: alerjen etiketli tam menü, telefonla sipariş, WebGL ateş efektleri ve işletmenin menüyü kendisi güncellediği bir yönetim paneli.
Web geliştirme
- Ne yaptık
- Web tasarımı & marka dili
- Alerjen etiketli dijital menü
- WebGL & GSAP animasyonları
- Firebase yönetim paneli
- Teknolojiler
- React 19VinextTailwind CSSGSAPThree.jsFirebaseCloudinaryVercel
- Tür
- Web sitesi · Müşteri projesi
01Proje hakkında
İhtiyaç
Bravo Grill, adını ateşten alan bir mutfağın hissini taşıyan bir web sitesi istiyordu. Menünün eksiksiz olması, Almanya'daki alerjen ve katkı maddesi kurallarına uygun etiketlenmesi ve işletmenin menüyü kimseye ihtiyaç duymadan kendisinin güncelleyebilmesi gerekiyordu.
Yaklaşımımız
Tasarımı ateş fikri etrafında kurduk: başlık WebGL alevlerin içinden yükseliyor, sahneler kaydırmayla ilerliyor. Menü, restoranın mevcut menü veritabanından canlı okunuyor; panelde yapılan bir değişiklik bir dakika içinde sitede görünüyor. Ağır efektler yalnızca gerektiğinde yükleniyor ve mobilde sade bir görünüme geçiyor.
02Öne çıkan özellikler
- 01
Alerjen etiketli tam menü
Her yemek, alerjenlerini ve katkı maddelerini kod olarak değil açık yazıyla gösterir. Menü sayfasında sabit kategori menüsü, arama ve yemek detayları var.
- 02
İşletmenin kendi yönetim paneli
Restoran kendi Google hesabıyla giriş yapar; yemek ekler, düzenler, gizler, siler, alerjen seçer ve fotoğraf yükler. Eksik bilgisi olan yemekler panelde ayrıca listelenir.
- 03
Telefonla sipariş listesi
Ziyaretçi yemekleri adetleriyle not alır ve toplam tutarı görür, ardından restoranı arar. Liste yalnızca kendi cihazında kalır, hiçbir yere gönderilmez.
- 04
Ateşten doğan açılış
BRAVO GRILL LEHNIN yazısı harf harf WebGL bir ateşin içinden yükselir; alevler fareye tepki verir, tıklayınca canlanır.
- 05
Kaydırmayla ilerleyen sahneler
Burger, kaydırdıkça katmanlarına ayrılıp yeniden birleşir; döner kesimi kaydırmayla kare kare oynar.
- 06
Herkese açık, her cihazda
Canlı açık/kapalı bilgisi Berlin saatine göre gösterilir. Hareketi azaltma tercihi olan veya WebGL desteklemeyen cihazlarda site sabit görsellerle çalışır.
03Ekranlar
04Teknoloji
Arayüz
- React 19
- Sitenin bileşen yapısı
- Vinext
- Vite üzerinde Next.js tarzı sayfa yapısı
- Tailwind CSS
- Tasarım sistemi ve yerleşim
- GSAP & Lenis
- Kaydırma animasyonları ve yumuşak kaydırma
- Three.js
- WebGL ateş ve burger sahnesi
Sunucu & veri
- Firebase
- Menü verisi ve Google ile yönetici girişi
- Cloudinary
- Yemek fotoğraflarının saklanması
Altyapı
- Vercel
- Yayın ve fotoğrafların CDN önbelleği
05Durum
