https://github.com/dehyabi/foodmate
FoodMate is an easy-to-use app for restaurants, making ordering food faster and smoother.
https://github.com/dehyabi/foodmate
docker glassmorphism nextjs restaurant shadcn socket-io tailwindcss tanstack-query typescript zod
Last synced: 4 months ago
JSON representation
FoodMate is an easy-to-use app for restaurants, making ordering food faster and smoother.
- Host: GitHub
- URL: https://github.com/dehyabi/foodmate
- Owner: dehyabi
- Created: 2025-05-16T20:36:00.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-05-24T10:01:51.000Z (5 months ago)
- Last Synced: 2025-05-24T11:18:09.342Z (5 months ago)
- Topics: docker, glassmorphism, nextjs, restaurant, shadcn, socket-io, tailwindcss, tanstack-query, typescript, zod
- Language: TypeScript
- Homepage:
- Size: 820 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🍽️ FoodMate
**FoodMate** is a modern food ordering dashboard built with **Next.js 15**, **gRPC**, **WebSocket (Socket.IO)**, and **TanStack Query**. It supports real-time order updates and data fetching from gRPC and local mock APIs.
---
## 🛠️ Tech Stack
* **Frontend:** Next.js 15+ (App Router), TypeScript, TailwindCSS
* **gRPC Backend:** Node.js with `@grpc/grpc-js`
* **WebSocket:** Socket.IO for real-time updates
* **State Management:** TanStack Query (React Query)
* **Dockerized:** Multi-service environment with Docker
* **Mock Data:** JSON files (Favorites, Orders, Menus)
* **Form Validation:** Zod & React Hook Form
* **UI Components:** TailwindCSS & ShadCN UI
---
## 📁 Project Structure
```
/grpc-server - gRPC backend with mock data
/socket-server - WebSocket server with Socket.IO
/src/app/api - API routes that bridge frontend and gRPC/backend
/src/app/admin/dashboard - Admin dashboard interface
/src/app/dashboard - Main user dashboard
/src/lib - gRPC + WebSocket client setup
/public - Static assets
```
---
## ✨ Features
* 📦 **gRPC Integration** – Fetch orders & favorites using gRPC
* 🔁 **WebSocket (Socket.IO)** – Real-time updates for dashboard
* ⚡ **TanStack Query** – Cache and revalidate data efficiently
* 📦 **Mock APIs** – Load JSON data (orders, favorites, menus)
* 💅 **Glassmorphism UI** – Clean, modern, and responsive dashboard
* 🔢 **Form Validation** – Powered by Zod & React Hook Form
* 📏 **Component UI** – Built using TailwindCSS and ShadCN
---
## 🧑💻 Local Development
### 1. Clone the repository
```bash
git clone https://github.com/yourusername/foodmate.git
cd foodmate
```
### 2. Start gRPC server
```bash
cd grpc-server
npm install
npm run dev
```
### 3. Start WebSocket server
```bash
cd ../socket-server
npm install
npm run dev
```
### 4. Start Next.js frontend
```bash
cd ..
npm install
npm run dev
```
---
## 🚩 First Time Usage
1. **Login as Admin:**
* Email: `admin@foodmate.com`
* Password: `admin123`
2. **Register as Customer**, then login with the registered credentials.
3. Now the customer can access the dashboard and features.
---
## 🐳 Docker (Optional)
Build and run all services using Docker:
```bash
make docker-build-clean-prod # First time build
make docker-build-prod # For subsequent updates
```
> Ensure Docker is running and internet connectivity is available during image pulls.
---
## 📂 Sample Mock Data
Located in: `grpc-server/mock`
* `favorites.json`
* `orders.json`
---
## 🔌 WebSocket Events
| Event Name | Payload Example | Description |
| ------------------- | --------------------------- | ------------------------ |
| `order-updated` | `Array` | Broadcast updated orders |
| `favorites-updated` | `Array` | Broadcast favorites |
---
## 📷 Dashboard Preview
> View your orders and favorite restaurants in real time!
---
## 📽️ Demo
[FoodMate Live Demo](https://dehyabi.github.io/foodmate)
---
## 📬 Contact
- Email: dehyafullstack@gmail.com
- LinkedIn: linkedin.com/in/dehyabi
- GitHub: github.com/dehyabi
---
## 📄 License
MIT © 2025 FoodMate