RestoManager - React Restaurant POS CRM

🚀 RestoManager 2.0 - The Ultimate React Restaurant POS, CRM & Marketing Engine Are you a developer or entrepreneur looking to sell a high-quality POS system to local restaurants, cafes, and bars? RestoManager is not just a POS; it’s a complete Customer Retention and Marketing Engine built with modern tech (React 18, Vite, TypeScript, Tailwind CSS, and Firebase). With our new Zero-Code White Label feature, you can rebrand this app for your clients in seconds directly from the interface—no coding required! Sell it to your local clients and keep 100% of the profits. No monthly API fees, no subscriptions. 🌓 The Smart Dual-Mode System Demo Mode (Offline): Works instantly out-of-the-box using your browser's LocalStorage. Perfect for testing the UI immediately. Production Mode (Online): Syncs in real-time across multiple devices (Waiter Phone ↔ Kitchen Tablet ↔ Cashier PC) using Google Firebase. 🔥 What's New in Version 2.0 (Key Features) ⚙️ 1. Zero-Code White Label Customization You no longer need to be a programmer to rebrand this app. Everything is done directly through the In-App Settings Panel: Change App Name & Slogan with a simple text input. Pick Brand Colors using the visual color picker. Upload Logos directly from your device. 💬 2. The WhatsApp Marketing & Automation Suite Automate customer communication with one click: 🛵 Delivery Updates: "Hi , your order is out for delivery!" 🛍️ Takeaway Alerts: "Your food is hot and ready for pickup!" 📅 Reservation Reminders: Send automated friendly reminders with the Date & Time. ⭐ Google Reviews Booster: When an order is completed, a button appears to request a 5-star Google Maps review via WhatsApp. 🔄 3. Smart Customer Retention Engine Stop losing clients. Absent Customer Alert: Anyone who hasn't ordered in more than 30 days gets a visual badge. Recovery Campaign: Click one button to send a "We miss you" WhatsApp message with a special offer. 🛍️ 4. Advanced POS & Visual Menu Interactive Visual Menu: Grid layout with photos for blazing-fast order punching. Dynamic Pricing: Support for Full Dose, Half Dose (½), or custom kitchen notes. 🛠️ Easy to Install & Well Documented Getting started is incredibly easy. You can run the app locally in seconds using Demo Mode, or connect it to your own free Firebase project for Real-time Online Sync. Please check the Instructions tab for the complete step-by-step installation guide. Note: This is a standalone React (Vite) Frontend Application with Firebase BaaS. No complex Node.js/PHP backend required to host! Built-in Menu Builder (CRUD): Add or edit Categories and Products directly inside the app. Google Maps Integration: Click on a delivery address to instantly open the fastest route on Maps. 📅 5. Reservation Workflow & Financials Visual Reservations: Track tables (Scheduled → Arrived → Completed). Pulsing red alerts warn you if a guest is late. Instant Dashboards: View Daily/Monthly sales totals, and automatically see your Top 10 Best Customers.

Features

Modern Tech Stack: Built with React 18, Vite, TypeScript, and Tailwind CSS.

PWA Ready: Installable as a native app on iOS, Android, and Windows.

Zero-Code White Label: Change app colors, name, and logo directly from the in-app settings panel.

WhatsApp Automation: 1-click automatic messages for Delivery, Takeaway, and Reservation reminders.

Google Reviews Booster: Automated WhatsApp requests for 5-star reviews after order completion.

Smart CRM & Retention: Automatically flags customers absent for >30 days to send recovery offers.

Dual-Mode Database: Runs offline via LocalStorage (Demo) or online in real-time via Google Firebase.

Interactive Visual POS: Fast order punching with image-based categories and products.

Dynamic Pricing: Built-in support for Full Dose / Half Dose (½) and custom kitchen notes.

In-App Menu Builder: Add, edit, and delete categories and menu items without touching the database.

Google Maps Integration: 1-click delivery routing straight from the customer's profile.

Financial Reports: Auto-generated Daily/Monthly sales dashboards and "Top 10 Customers" list.

Multi-Language: Ready to use in English, Portuguese, and Spanish.

No Monthly Fees: Standalone frontend with free Firebase BaaS (No expensive servers needed).

Requirements

Node.js: Version 18.0 or higher (Required to install dependencies and run the local development server).Package Manager: npm or yarn.Code Editor: Visual Studio Code (VS Code) is highly recommended.Database (Online Mode): A free Google Firebase account (Only required if you want to activate the real-time cloud sync feature).Web Hosting (Super Easy & Free): You can host this app for FREE on modern static platforms like Vercel, Netlify, or Firebase Hosting. Since it is a React frontend application, you do NOT need to pay for expensive cPanel, PHP, or Node.js backend servers!Mobile App Ready (PWA): No App Store or Google Play developer accounts required! Once you host it on Vercel/Netlify, your clients can simply open the link on Safari (iOS) or Chrome (Android) and click "Add to Home Screen" to install it. It will function exactly like a native full-screen mobile app.

Instructions

🛠️ RestoManager 2.0 - Complete Setup Guide Prerequisites: > Make sure you have Node.js (v18 or higher) and npm installed on your computer.

Step 1: Run Locally (Demo Mode) Want to test the UI immediately? You don't even need a database yet.

Extract the downloaded ZIP folder.

Open your Terminal (Command Prompt) and navigate into the folder: cd restomanager

Install dependencies by running: npm install

Start the server: npm run dev (The app will open in your browser. Any data you create will be saved locally in the browser's LocalStorage).

Step 2: Connect to Firebase (Real-time Online Mode) To unlock real-time synchronization between multiple devices (e.g., Waiter Phone and Kitchen Tablet), you must connect the app to a free Google Firebase database.

Go to the Firebase Console and create a new project.

Enable Firestore Database (Set rules to public for testing, or require Auth for production).

Open the src/firebase.ts (or firebase.js) file in your code editor (like VS Code).

Replace the placeholder configuration with your real Firebase SDK keys:

JavaScript const firebaseConfig = { apiKey: "YOUR_API_KEY", // <--- Adding this activates Online Mode! authDomain: "your-project.firebaseapp.com", projectId: "your-project-id", storageBucket: "your-project.appspot.com", messagingSenderId: "123456789", appId: "1:12345:web:67890" }; Save the file. The app will automatically detect your keys and switch from LocalStorage to the Live Database.

Step 3: Zero-Code White Label (Customization) You no longer need to edit the code to change the branding!

Run the app in your browser.

Click on the Settings button (Gear icon).

Use the interface to change the App Name, choose your Brand Colors, and upload your own Logo.

Step 4: Build for Production When you are ready to upload the app to a real web hosting (like Vercel, Netlify, or a cPanel with Node support):

Run: npm run build

Upload the generated dist folder to your server.