🍽️ Restaurant Chatbot

A production‑grade, interactive restaurant ordering chatbot built with NestJS, WebSockets, MongoDB, and Paystack payments.
Users can browse the menu, build an order, pay securely, and view their order history – all through a real‑time chat interface. An admin dashboard lets you manage menu items without touching the database.

Live demo: https://restaurant-chatbot-8oe3.onrender.com

---

✨ Features

• Interactive Chat Interface – Clickable buttons, menu cards, quantity picker, order summaries.
• Real‑time Communication – WebSocket‑based, no page refresh needed.
• Session Management – Device‑based sessions; no login required.
• Full Order Flow – Place, modify, view, cancel, and checkout orders.
• Integrated Payments – Paystack inline (test mode) with server‑side verification.
• Admin Dashboard – Full CRUD for restaurant menu items via /admin.html.
• Order History – Past orders displayed with date, status, and total.
• DeepSeek‑inspired UI – Dark modern theme with smooth animations.

---

📦 Tech Stack

Layer	Technology
Backend	NestJS (Node.js), TypeScript
Real‑time	WebSockets (@nestjs/websockets)
Database	MongoDB with Mongoose ODM
Payments	Paystack inline (V2)
Frontend	Vanilla HTML/CSS/JS (no framework)
Deployment	Render (with static file serving)

---

🏗️ Architecture Overview

The bot behaves as a finite state machine. The server maintains a session per device (using a deviceId stored in localStorage), which tracks the current step (mainMenu, placingOrder, awaitingQuantity, checkout). Every user action sends a message over a WebSocket connection; the BotService processes it according to the current state and returns a structured response (type, text, buttons, items, etc.). The frontend renders the appropriate UI component.

Orders are stored in MongoDB with statuses: pending → placed → paid / cancelled.
Payment flow: frontend displays Paystack popup → on success, reference sent to backend → server verifies via Paystack API → order marked as paid.

---

🚀 Getting Started

Prerequisites

• Node.js ≥18
• MongoDB (local or Atlas)
• Paystack test account (for payment testing)

1. Clone the repository

git clone https://github.com/devGeorgeOwi/restaurant-chatbot
cd restaurant-chatbot

2. Install Dependencies

npm install

3. Environment variables

Create a .env file in the root:

PORT=3000
MONGO_URI=mongodb+srv://<user>:<password>@cluster0.xxxxx.mongodb.net/restaurant_chat?retryWrites=true&w=majority

PAYSTACK_SECRET_KEY=sk_test_...
PAYSTACK_PUBLIC_KEY=pk_test_...

---

4. Seed the menu (optional)

npm run seed

---

(If the seed script is moved to src/, you can run it with npx ts-node src/seed.ts.)

Start the development server

npm run start:dev

---

Open http://localhost:3000 in your browser.

---

🌐 Deployment (Render)

---

The project is ready for one‑click deployment on Render.

1. Push your code to a Git repository (GitHub, GitLab, Bitbucket).

2. Create a new Web Service on Render, connect your repo.

3. Configure:

• Build Command: npm install && npm run build

• Start Command: npm run start:prod

• Environment Variables: add MONGO_URI, PAYSTACK_SECRET_KEY, PAYSTACK_PUBLIC_KEY

4. Deploy. The app will be available at <https://restaurant-chatbot-8oe3.onrender.com>

Important: On Render, make sure your tsconfig.json includes "inlude": ["src/**/*"] and "exclude": ["node_modules", "dist", "test", "**/*spec.ts"] to avoid build path issues. A prebuild script that clears the incremental cache is already set.

---

💬 How to Use the Chatbot

1. Open the chatbot URL.

2. The main menu appears with clickable buttons:

   • 🍔 Place an Order – View menu, select items, specify quantities.

   • 🧾 Checkout – Confirm order and pay via Paystack (test card 4084084084084081).

   • 📜 Order History – See all completed orders.

   • 🛒 Current Order – View the pending / placed order.

   • ❌ Cancel Order – Cancel the current pending order.

   • 🏠 Main Menu – Return to the main menu at any time (option 100).

3. You can also type the numbers (1, 99, 98, etc.) instead of clicking.

🖥️ Admin Dashboard

Access the dashboard at /admin.html. It allows you to:

• View all menu items with prices and availability.

• Add new items (name, price in kobo, description, availability).

• Edit existing items.

• Delete items.

The dashboard communicates with the REST API at /api/menu. No authentication is required (sufficient for demo purposes).

📚 API Endpoints

Method	Endpoint	Description
GET	/api/menu	List all menu items
GET	/api/menu/:id	Get a single menu item
POST	/api/menu	Create a new menu item
PUT	/api/menu/:id	Update an existing item
DELETE	/api/menu/:id	Delete a menu item

All endpoints return JSON.

🧪 Testing Payments

Use Paystack’s test mode:

• Test card: 4084084084084081 (success)

• Expiry: any future date (e.g., 12/28)

• CVV: any 3 digits (e.g., 408)

After a successful test payment, the order will be marked as paid and the chatbot will return to the main menu.

🔧 Future Improvements

□ User authentication (optional login) □ Order scheduling □ Webhook for asynchronous payment confirmation □ More sophisticated menu with categories / images □ Unit and E2E tests □ Containerization (Docker)

📄 License

This project is for educational purposes. Feel free to adapt it for your own use.

👨‍💻 Author

Built by George Owoicho as a third semester assignment at AltSchool Africa. If you encounter any issues, please open an issue on the repository.