Sky Hut Cafe – Frontend 🍽️

Frontend of Sky Hut Cafe | Built with React.js + Ant Design

Live Demo: Sky Hut Cafe

---

📌 Overview

Sky Hut Cafe is a full-featured restaurant management web application built with the MERN stack. Designed to serve as a complete digital solution for restaurant operations, it includes role-based access for admins, staff, and users, enabling functionalities such as online ordering, real-time order management, event bookings, payments, reviews, and more.

This is the frontend application of the Sky Hut Cafe Restaurant Management System. It offers a dynamic and interactive interface for users, staff, and admins to manage orders, reservations, events, and more.

---

🔧 Tech Stack

• Frontend Framework: React.js
• Styling: Tailwind CSS
• State Management: React Context API
• Routing: React Router DOM
• Realtime: Socket.io-client
• Payment Integration: Razorpay
• Other Tools: QR Code Generator, Audio Alerts

---

🚀 Features

👤 User Panel

• Book huts and tables
• Order food online with real-time updates
• Event/party reservation
• Earn points and badges
• View order history
• Review and feedback submission

🛠️ Admin Panel

• Dashboard with statistics
• Staff and user management
• Menu, reservation, and order control
• Notifications and real-time order tracking
• Audio alerts and analytics

👨‍🍳 Staff Panel

• View and manage orders
• Get live updates
• Notifications for new bookings

📱 QR Code Ordering

• Generate and scan QR codes for instant table ordering (offline accessible)

---

📸 UI Screenshots

---

⚙️ Getting Started

Prerequisites

• Node.js
• React CLI

Installation

1. Clone the repository

   git clone https://github.com/HARIOM317/Restaurant-Management-System.git
   cd frontend
   

2. Install frontend dependencies

   cd frontend
   npm install
   

3. Environment Variables

   Create a .env file in the frontend directory:

   VITE_RAZORPAY_KEY_ID=your_rezorpay_key_id
   

4. Start the frontend

   npm run dev
   

---

📢 Real-time Updates

• Integrated with Socket.io for real-time order/reservation notifications.
• Audio notifications play when new activity is received.

---

🔐 Role-based Access

Role-based login system:

• Admin

• Staff

• User

Secure access and routing based on roles ensure data privacy and operational efficiency.

---

📱 QR Code Ordering

• Each table/hut has a unique QR code.

• Scan to place offline orders directly via the mobile interface.

---

💳 Payments Integration

Integrated with Razorpay to securely handle online payments for:

• Food orders

• Event bookings

• Reservation fees

---

📈 Admin Dashboard

The admin dashboard provides visual insights into:

• Total Orders

• Total Revenue

• Upcoming Events

• User Feedback

• Real-time activity log with audio cues

---

⭐ Future Enhancements

• Customer-facing mobile app (Flutter-based)

• Inventory and kitchen management

• SMS/Email notifications

• AI-based sales forecasting

---

📬 Feedback

If you find this project useful or have suggestions, feel free to raise an issue or contribute.

---

🧑‍💻 Author

Hariom Singh Rajput : Founder of GitNexa

• B.Tech CSE | Software Developer | MERN Stack | DSA with C++
• Portfolio | LinkedIn | GitHub

Harsh Kamde : Founder of TrySoft

• B.Tech CSE | Software Developer | MERN Stack | DSA with C++
• LinkedIn | GitHub

---

📝 License

This project is licensed under the MIT License. You can view full license here.

---

📞 Contact

🌐 Website: https://www.skyhutcafe.com 📧 Email: support@skyhutcafe.com

---

"Innovation distinguishes between a leader and a follower." – Steve Jobs