📑 Table of Contents

1. Description
2. Purpose
3. Technologies
4. Features
5. Screenshots
6. Implementation
7. Setup
8. ToDo
9. Attributions
10. License

🌟 Description

Cheers!🍻 A fullstack WebApp for browsing and ordering from the Menu at a Pub. Users can place and view their orders and Admin can manage the Menu, process incoming Orders, view Order History, manage Users and Staff accounts.

🌱 Purpose

An Open-source and online solution for local pubs.

🌐 Technologies

🧮 Features

• Browse the menu with an interactive UI.

• Add Items from menu to cart and place an order.

• View placed order status and order history.

  Admin

• View incoming orders; mark them as fulfilled or cancelled.

• View all past orders by date and chart for earnings for (x) number of days.

• View all users and their order history.

• Add Items to menu, delete items and mark as out-of-stock.

• Add/Delete staff accounts.

🎬 Demo Video

🖥️ Screenshots

Users

• Homepage

• Auth

• Menu

• Menu Out-of-Stock

• Orders

• UI Dialogs

• Others

Admin Dashboard

• Admin Auth

  

• Admin Orders

  Pending Orders
  

  

  Completed Orders
  

  

  Cancelled Orders
  

  

• Menu Manage

  Menu
  

  

  Add to menu
  

  

  Deleted Menu
  

  

• Accounts

  User Accounts
  

  

  Staff Accounts
  

  

  Delete staff account
  

  

  Add staff account
  

  

⚗️ Implementation

• 📡 Axios for API calls.

• 📈 ChartJS for plotting data on charts.

• 🔐 Authentication & Authorization with Passport in backend.

• 🛡️ Common Security safeguards

  Frontend

  • 🧼 Vee-Validate

  Backend

  • 👮 Joi Validations
  • ⛑️ Helmet
  • 🧼 SanitizeHTML
  • 🧼 ExpressMongoSanitize

🛠️ Setup

1. Install MongoDB.
2. Install NodeJS.
3. Run mongod.
4. In your terminal run command npm install from project root folder to install all the dependencies for the backend.
5. In your terminal run command npm install from frontend folder, to install all the dependencies for the frontend.
6. In the project root folder create a dotenv file with PORT,DB_URL,SESSION_SECRET variables with Port number, Database URL & a string for session secret, respectively.
7. In vite.config.js file, change the API port number to match the one you entered.
8. To start the server run npm run server from root.
9. To start the client run to npm run client from root.
10. In your browser head to the local link provided by Vite.

Optional

• You can run the JS file inside the /backend/seeds folder with node command to create an Admin account and Menu seeds.

🎯 To-do

• Write unit tests with vitest.
• Improve category & sub-category. Make it more dynamic.
• Add search functionality to menu.
• Edit menu items with help of vee-validate.

📣 Attributions

• Vuetify for building UI.
• A classic American sitcom; Cheers for the logo and example branding.
• BingAI for images.

📋 License

This project is licensed under the MIT License.