MiCoffee - Smart Coffee Ordering System

MiCoffee, a beautifully designed, mobile-first, zero-backend smart coffee ordering system for small coffeeshops. This app allows customers to build visually stunning coffee orders directly from their phones, and shop owners to manage and accept these orders from a kitchen tablet.

🌟 Live Demo

Features

• Ultra-Visual Ordering: A fluid, game-like interface where customers can visually see their coffee being built.
• Multilingual Support & Globe Selector: Fully translated and supports 6 languages (English, Turkish, Farsi, Arabic, Spanish, Italian) out-of-the-box with a responsive globe dropdown header switcher!
• QR Code Table System: Shop owners can generate QR codes for tables. When scanned (e.g. example.com/?table=12), orders are automatically tied to that table.
• Kitchen Interface: A dedicated /kitchen route for baristas to see incoming orders, set prices, and update order status.
• Settings Panel: A dedicated /settings route for shop owners to customize available ingredients and generate table QR codes.
• Zero-Config Subdirectory Deploy: Configured with relative build pathing and Hash Router—simply drop the build folder inside any shared hosting subdirectory (e.g., /micoffee/) and it will work instantly with zero server setup!
• Zero Backend Required: Uses simulated local state via localStorage (perfect for simple, serverless operations, demoing, and quick tests). Easily connect it to Firebase or Supabase if database synchronization is needed.

License

This project is completely FREE and open source under the Creative Commons Attribution (CC BY 4.0) license. You are free to use, modify, and distribute it for both personal and commercial purposes!

---

🌐 Multilingual Descriptions / Descripciones en otros idiomas

Select your preferred language to read about MiCoffee's features:

Español (Spanish)

MiCoffee - Sistema Inteligente de Pedidos de Café

Bienvenido a MiCoffee, un sistema inteligente de pedidos de café para cafeterías pequeñas, bellamente diseñado, optimizado para móviles y sin backend. Esta aplicación permite a los clientes crear pedidos de café visualmente impactantes directamente desde sus teléfonos, y a los dueños de las tiendas administrar y aceptar estos pedidos desde una tableta de cocina.

Características

• Pedidos Ultra Visuales: Una interfaz fluida como un juego donde los clientes ven cómo se prepara su café.
• Soporte Multilingüe: ¡Totalmente traducido y compatible con varios idiomas desde el primer momento, lo que garantiza la accesibilidad global para cualquier dueño de cafetería!
• Sistema de Mesa por Código QR: Los propietarios pueden generar códigos QR para las mesas. Al escanearlos (por ejemplo, ejemplo.com/?table=12), los pedidos se vinculan automáticamente a esa mesa.
• Interfaz de Cocina: Una ruta dedicada /kitchen para que los baristas vean los pedidos entrantes, establezcan precios y actualicen el estado del pedido.
• Panel de Ajustes: Una ruta dedicada /settings para personalizar los ingredientes disponibles y generar códigos QR de mesa.
• Sin Backend Requerido: Esta plantilla de código abierto utiliza localStorage para simular todo el flujo de pedidos (con fines de prueba/demostración), ¡lo que significa que se puede alojar en cualquier lugar sin bases de datos complejas ni servidores Node.js!

العربية (Arabic)

MiCoffee - نظام ذكي لطلب القهوة

مرحباً بك في MiCoffee، نظام ذكي لطلب القهوة مصمم بشكل جميل، مخصص للهواتف المحمولة، وبدون خادم خلفي (Zero-Backend) للمقاهي الصغيرة. يتيح هذا التطبيق للزبائن إعداد طلبات قهوة مذهلة بصرياً مباشرة من هواتفهم، كما يتيح لأصحاب المقاهي إدارة هذه الطلبات وقبولها من جهاز لوحي في المطبخ.

الميزات

• طلب مرئي بالكامل: واجهة تفاعلية سلسة تشبه الألعاب حيث يمكن للعملاء رؤية قهوتهم أثناء تحضيرها بصرياً.
• دعم متعدد اللغات: مترجم بالكامل ويدعم لغات متعددة بشكل مباشر، مما يضمن سهولة الوصول لجميع أصحاب المقاهي حول العالم!
• نظام طاولات برمز QR: يمكن لأصحاب المقاهي إنشاء رموز QR للطاولات. عند مسحها (مثال: example.com/?table=12)، يتم ربط الطلبات تلقائياً بتلك الطاولة.
• واجهة المطبخ: صفحة مخصصة /kitchen لمعدي القهوة (الباريستا) لرؤية الطلبات الواردة، وتحديد الأسعار، وتحديث حالة الطلب.
• لوحة التحكم: صفحة مخصصة /settings لأصحاب المقاهي لتخصيص المكونات المتاحة وإنشاء رموز QR للطاولات.
• لا يتطلب خادم خلفي: يستخدم هذا القالب مفتوح المصدر localStorage لمحاكاة دورة الطلب بالكامل (لأغراض العرض والتجربة)، مما يعني إمكانية استضافته في أي مكان دون الحاجة لقواعد بيانات معقدة أو خوادم Node.js!

فارسی (Persian)

MiCoffee - سیستم هوشمند سفارش قهوه

به MiCoffee خوش آمدید، یک سیستم هوشمند سفارش قهوه با طراحی زیبا، اولویت گوشی‌های هوشمند و بدون نیاز به بک‌اند برای کافه‌های کوچک. این برنامه به مشتریان اجازه می‌دهد سفارش‌های قهوه بسیار زیبا و بصری را مستقیماً از گوشی خود بسازند و به صاحبان کافه اجازه می‌دهد این سفارش‌ها را از طریق تبلت آشپزخانه مدیریت و تایید کنند.

ویژگی‌ها

• سفارش کاملاً بصری: یک رابط کاربری روان و بازی‌گونه که مشتریان می‌توانند ساخت قهوه خود را به صورت بصری ببینند.
• پشتیبانی از چندین زبان: کاملاً ترجمه‌شده و آماده برای پشتیبانی از زبان‌های مختلف، که دسترسی جهانی را برای هر صاحب کافه‌ای تضمین می‌کند!
• سیستم میز با کد QR: صاحبان کافه می‌توانند برای میزها کد QR تولید کنند. با اسکن آن (مثال: example.com/?table=12)، سفارش‌ها به طور خودکار به آن میز متصل می‌شوند.
• رابط کاربری آشپزخانه: یک مسیر اختصاصی /kitchen برای باریستاها جهت مشاهده سفارش‌های ورودی، تعیین قیمت و به‌روزرسانی وضعیت سفارش.
• پنل تنظیمات: یک مسیر اختصاصی /settings برای صاحبان کافه جهت شخصی‌سازی مواد اولیه موجود و تولید کدهای QR میز.
• بدون نیاز به بک‌اند: این قالب متن‌باز از localStorage برای شبیه‌سازی کل فرآیند سفارش (برای تست و دمو) استفاده می‌کند، به این معنی که بدون نیاز به پایگاه داده پیچیده یا سرورهای Node.js در هر جایی قابل میزبانی است!

Italiano (Italian)

MiCoffee - Sistema di Ordinazione Caffè Intelligente

Benvenuto su MiCoffee, un sistema di ordinazione caffè intelligente per piccoli bar, splendidamente progettato, mobile-first e senza backend. Questa applicazione consente ai clienti di comporre visivamente i propri ordini di caffè direttamente dal telefono, e ai proprietari del locale di gestire e accettare gli ordini da un tablet in cucina.

Caratteristiche

• Ordinazione Ultra-Visiva: Un'interfaccia fluida e interattiva in cui i clienti vedono visivamente il loro caffè prendere forma.
• Supporto Multilingue: Completamente tradotto e pronto all'uso in più lingue, per garantire l'accessibilità a qualsiasi proprietario di bar nel mondo!
• Sistema Tavoli con Codice QR: I proprietari possono generare codici QR per i tavoli. Quando scansionati (es. esempio.com/?table=12), gli ordini vengono automaticamente associati a quel tavolo.
• Interfaccia Cucina: Una pagina dedicata /kitchen per i baristi, per visualizzare gli ordini in arrivo, impostare i prezzi e aggiornare lo stato dell'ordine.
• Pannello Impostazioni: Una pagina dedicata /settings per personalizzare gli ingredienti disponibili e generare i codici QR per i tavoli.
• Nessun Backend Richiesto: Questo template open source utilizza localStorage per simulare l'intero flusso degli ordini (a scopo di test/demo), il che significa che può essere ospitato ovunque senza database complessi o server Node.js!

Türkçe (Turkish)

MiCoffee - Akıllı Kahve Sipariş Sistemi

Küçük kahve dükkanları için harika bir tasarıma sahip, mobil öncelikli ve sunucusuz (zero-backend) akıllı kahve sipariş sistemi MiCoffee'ye hoş geldiniz. Bu uygulama, müşterilerin doğrudan telefonlarından görsel olarak harika kahve siparişleri oluşturmalarını sağlarken, dükkan sahiplerinin bu siparişleri mutfak tabletinden yönetmesine ve kabul etmesine olanak tanır.

Özellikler

• Görsel Sipariş Deneyimi: Müşterilerin kahvelerinin hazırlanışını adım adım canlı olarak görebilecekleri akıcı, oyun benzeri bir arayüz.
• Çoklu Dil Desteği: Tamamen çevrilmiş ve kutudan çıktığı gibi birden fazla dili destekleyerek her dükkan sahibi için küresel erişilebilirlik sağlar!
• QR Kod Masa Sistemi: Dükkan sahipleri masalar için QR kodlar oluşturabilir. Bu kod tarandığında (örneğin ornek.com/?table=12), siparişler otomatik olarak o masayla ilişkilendirilir.
• Mutfak Arayüzü: Baristaların gelen siparişleri görmesi, fiyat belirlemesi ve sipariş durumunu güncellemesi için özel bir /kitchen sayfası.
• Ayarlar Paneli: Mevcut malzemeleri özelleştirmek ve masa QR kodları oluşturmak için özel bir /settings sayfası.
• Sunucu İhtiyacı Yok: Bu açık kaynaklı şablon, sipariş döngüsünü tamamen simüle etmek için (test/demo amacıyla) localStorage kullanır; bu sayede karmaşık veritabanlarına veya Node.js sunucularına ihtiyaç duymadan her yerde barındırılabilir!

---

Installation for Coffeeshops

If you are a small coffeeshop owner and want to host this on your own shared hosting (like cPanel, HostGator, Bluehost, etc.):

1. Clone or download this repository.
2. Ensure you have Node.js installed on your computer.
3. Open a terminal in the folder and install dependencies:

   npm install

4. Build the application for production:

   npm run build

5. A new dist/ folder will be created.
6. Upload the entire contents of the dist/ folder to your shared hosting's public_html or www directory.

Note: Out of the box, this uses a simulated local state for demonstration. To sync data across actual multiple devices (phones and your kitchen tablet), you can easily connect the state manager (src/stores/orders.js) to a free service like Firebase or Supabase!

Support the Developer

If you like this project, or if you don't know how to set it up on your server, I can help! Just buy me a BIG coffee here:

☕ Buy Me A Coffee

Usage Links

• Client App: https://yourwebsite.com/ (or /?table=X for specific tables)
• Kitchen Panel: https://yourwebsite.com/kitchen
• Settings: https://yourwebsite.com/settings