/Office-Cafeteria-App

StackHack 2.0 #This is a food cafeteria App where you can place an order. There are many features like payment method, real-time order status, admin panel. You can see a live demo👇

Primary LanguageJavaScript

Office-Cafeteria-App

Cafeteriaa is a full-stack, food and drink ordering system. The app is split into two front ends: one for the customer to order their drink(s) and/or food (Cafeteria Customer, or Cafeteria-C ), and one for the Cafeteria shop to receive and manage orders as they come in (Cafeteria Admin, or Cafeteria-A).

To see Cafeteriaa live in action, open a browser tab for Cafeteriaa customer and a tab for Cafeteriaa-Admin. All you have to do is place an order on Cafeteriaa app, and then watch Cafeteriaa Admin receive the order.


Cafeteriaa Employee

Orderspagelightmode

Cafeteriaa Admin

adminorderslightmode

Features

User:

  1. Server-side rendering
  2. Login & register
  3. Responsive design
  4. Add to cart
  5. filter items using search
  6. Delete from cart
  7. Checkout
  8. Session based on localStorage and tokens
  9. Get a list of orders.
  10. Fetch a specific order.
  11. Real-time order status using socket.io
  12. Contact page

Admin:

  1. Login
  2. Responsive design
  3. Orders lists based on status
  4. Change order status
  5. View order
  6. Products list
  7. View product
  • Authentication system guarding the app core.
  • Customers can browse the menu, Add/remove items to cart, track the order and can make payment online.
  • admin can control orders and can change the order status.
  • Data stored in a MongoDB database
  • Friendly user interface with ejs

Technical

• The front end of the app is built using SASS, tailwind CSS as a CSS extension language, and webpack as a module bundler.
• The back end is built in Node.js with Express, and uses MongoDB with Mongoose as a database.
• The app uses passport.js for authenticate the user.

  1. Once the user opens the app, see loader and redirect to the home page.
  2. As soon as a user click on their menu, and add items to cart.
  3. As soon as a user clicks on cart, user can placed order with COD & Payment with card. After successful order placed then redirest to order status.
  4. As finally, Cafeteria get realtime order update from admins, who can control order status using Socket.io.

• Submitted orders are sent to the database along with the user's username, to allow the display of previous and favorited orders and for Cafeteriaa-Admin to fetch the orders.
• Cafeteriaa-Admin uses Ajax to fetch orders from the database every second & using socket.io to get real-time order updates.


Snapshots

homelightmode1 homedarkmode1 menudarkmode1 OrderSummarypage image image



Setup

Prerequisites

  • Install Node.js >= 10
  • Install MongoDB
  • Install npm/yarn

Run Locally on Your Machine

You need Node, NPM and MongoDB properly installed.

Setup the environment variables replacing with your mongodb port, usually is 27017.

    export MONGO_CONNECTION_URL=mongodb://localhost:<MONGODB-PORT>/food
    Add menus collection manually and import menu.json file.

Install dependencies

    npm install

Seed the Database (for the very first run only)

    node server.js

Run the Server

    npm start

Technologies

Back-end

NodeJS, Express, MongoDB, Mongoose.

Fron-end

ejs, Taileindcss, scss.