Javascript Restaurant Food Ordering System (With Code Download)

Welcome to a tutorial on how to create a restaurant food ordering system with Javascript. Yes, you read that right, Javascript-only. There are no server-side databases, and only minimal NodeJS involved. But be warned, this is not a “complete ordering system”, but more of an experiment of mine to see how far we can go with client-side technologies.

There are quite a number of experimental (as at the time of writing) and advanced stuff used in this project, and it is not intended for the beginner code ninjas. Brace yourselves, this is not going to be as easy, but exciting nonetheless. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

Download & Notes Server-Side Useful Bits & Links
The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

  • An HTTP web server and NodeJS must be installed.
  • Run npm i peer to install the peer server, then node 4a-peer-server.js to start it.
  • Access 4b-manager.html to start the order manager.
  • Open another tab and access 2a-cart.html to act as the ordering kiosk.
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

JAVASCRIPT FOOD ORDERING

All right, let us now get into the mechanics of the ordering system itself.

 

PART 1) PRODUCTS

1-products.js
var products = {
  1: {
    name : "Banana",
    desc : "Yellow curved fruit.",
    img : "banana.png",
    price : 1.2
  },
  2: {
    name : "Hamburger",
    desc : "Meat between buns.",
    img : "hamburger.png",
    price : 5.7
  },
  ...
}

First, we will start by defining the available products. But remember that there is no database? So this is the only way to store the products, in a Javascript object.

 

PART 2) FRONT-END ORDERING PAGE

The next step is rather Captain Obvious, build a front-end page to display the products and a shopping cart. As this is a literal carbon copy of my Javascript Shopping Cart tutorial, go ahead and head over there if you want more details.

 

 

PART 3) MAKING A PROGRESSIVE WEB APP

3A) CREATE A MANIFEST FILE

3a-manifest.json
{
  "short_name": "Ordering Demo",
  "name": "Ordering Demo",
  "icons": [{
    "src": "images/favicon.png",
    "sizes": "64x64",
    "type": "image/png"
  }, {
    "src": "images/ico-512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "/2a-cart.html",
  "scope": "/",
  "background_color": "white",
  "theme_color": "white",
  "display": "fullscreen"
}
2a-products.html
<link rel="manifest" href="3a-manifest.json">

This is the part that gets interesting – You guys who are still thinking along the lines of “webpages” and “web 2.0”, it’s time to upgrade your thinking. Because web 3.0 is a lot more capable than “webpages”, we can create web apps that can be installed and make them look just like native apps.

Just how do we create an installable web app? First, we are going to need a manifest file. In simple terms, this is the “metadata for your web app” – The name, icons, colors, settings, and more. Then, just insert this manifest file into the <head> section of the HTML page.

 

3B) OFFLINE CAPABILITIES WITH CACHING & SERVICE WORKER

3b-worker.js
// (A) FILES TO CACHE
const cName = "orderdemo",
cFiles = [
  // (A1) IMAGES
  "images/favicon.png",
  "images/ico-512.png",
  "images/banana.png",
  "images/hamburger.png",
  "images/hotdog.png",
  "images/salmon.png",
  "images/sandwich.png",
  "images/taco.png",
 
  // (A2) PAGES + SCRIPTS
  "1-products.js",
  "2a-cart.html",
  "2b-cart.js",
  "2c-cart.css",
  "2d-manifest.json"
];
 
// (B) CREATE/INSTALL CACHE
self.addEventListener("install", (evt) => {
  evt.waitUntil(
    caches.open(cName)
    .then((cache) => { return cache.addAll(cFiles); })
    .catch((err) => { console.error(err) })
  );
});
 
// (C) LOAD FROM CACHE FIRST, FALLBACK TO NETWORK IF NOT FOUND
self.addEventListener("fetch", (evt) => {
  evt.respondWith(
    caches.match(evt.request)
    .then((res) => { return res || fetch(evt.request); })
  );
});

For the uninitiated, service workers are just Javascript that runs in the background; They can run even when the user is offline and not on the website. The uses of workers are very wide, but in this one, we save and serve the static files from the storage cache to support offline capabilities. Essentially, “saving” a copy of the webpage into the user’s device.

 

 

3C) INSTALLABLE APP & KIOSK MODE

When everything is done right, the browser should offer an option to install the web app. This will create an icon on the desktop (or home screen for mobile devices), making it work like a native app. But one more small trick for those who are using Chrome on Windows/Linux/Mac, edit the shortcut and append this behind:

--fullscreen --kiosk

This will make Chrome run in fullscreen kiosk mode (you need to close all current Chrome windows and tabs first).

 

PART 4) ORDER MANAGEMENT

4A) PEER SERVER

4a-peer-server.js
const { PeerServer } = require("peer");
const peerServer = PeerServer({
  port: 9000,
  path: "/"
});

So far so good? The frontend ordering is complete, we will now deal with the backend order management. Since this is a so-called “de-centralized” setup, the idea is to dedicate another device as the “order manager”.

But here comes the problem, while we can do peer-to-peer exchanges between the kiosks and order manager, we still need a peer server to facilitate the communications… Not to worry though, it is as simple as npm i peer and the few lines of code above – This will deploy the peer server at http://localhost:9000/.

 

 

4B) ORDER MANAGER PAGE

4b-manager.html
<div id="orders-list"></div>
4c-manager.js
// (A) HANDSHAKE WITH PEER SERVER
const peer = new Peer("MANAGER", {
  host: "localhost",
  port: 9000,
  path: "/"
});
 
// (B) ON RECEIVING MESSAGE FROM OTHER PEERS
peer.on("connection", (conn) => {
  conn.on("data", (data) => {
    // (B1) GENERATE NEW HTML ORDER
    let order = document.createElement("table");
    order.className = "order";
    order.onclick = () => { order.remove(); };
 
    // (B2) ADD ITEMS
    data = JSON.parse(data);
    for (let [pid, qty] of Object.entries(data)) {
      let row = order.insertRow();
      let cell = row.insertCell();
      cell.innerHTML = qty;
      cell = row.insertCell();
      cell.innerHTML = products[pid]["name"];
    }
 
    // (B3) ADD ORDER TO HTML LIST
    document.getElementById("orders-list").appendChild(order);
 
    // (B4) DONE!
    conn.close();
  });
});

Yep, I have kept the manager page as simple as possible.

  1. “Register” with the peer server.
  2. Accept order data from the kiosk devices, draw it in HTML, close the connection thereafter.

 

 

USEFUL BITS & LINKS

That’s all for this project, and here is a small section on some extras and links that may be useful to you.

 

LIMITATIONS & MISSING PIECES

Yes, this little experiment worked. But as you can see, there are many missing bits and pieces.

  • No security – No staff login, any device can become the manager.
  • No table number, quite an easy fix though.
  • No database to store the orders (it is possible to build one with indexed databases).
  • No payment processor. This is going to be difficult without a “full-fledged” server.

Otherwise, I will say that modern Javascript is pretty darn good enough. It may not reach the performance level of native apps, but web apps are powerful in their own ways – Any customer can just scan a QR code to access the frontend, turn their own devices into ordering kiosks. Instantly.

Business owners are no longer limited to expensive ordering and POS systems as well. Any web-enabled device can be turned into an ordering kiosk essentially.

 

COMPATIBILITY CHECKS

Works well in all modern browsers. If you want to be safe, use Modernizr to do feature checks and even load polyfills.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.