Open Source Restaurant Menus with Next.js, Express.js and MongoDB

Vineet Kalghatgi - Jan 22 - - Dev Community

Check out the live app here

Motivation

A bulk of the adopters of digital menus since the pandemic were full-service operators, with 54% of casual dining, 50% of fine dining and 48% of family dining restaurants shifting their menus online, according to the National Restaurant Association’s 2021 State of the Restaurant Industry report. Forty percent of operators also added a contactless or mobile payment option last year, according to the NRA.

It’s not likely that operators are going to shift back. Forty-seven percent of owners or managers that already offer digital menus through a URL or online platform said they are “very likely” to switch to all digital menus, according to Square’s survey.
-- 88% of restaurants considering swapping to digital menus, survey says

However, most of the SaaS models for digital menus today are pay-to-use ranging from $15/month to $100/month for their lowest tiers, granted the expensive ones offer more end-to-end features.

I hypothesize that some, if not most, restaurants would be satisfied with a simple mapping of their physical paper menus into a read-only digital version. So, I built an open-source app to solve this.

Live menu example

The main features

Users, the target demographic of whom are "Restaurant owners", can:

  • Create/Delete/Search Menus

Homepage

  • Update them by
    • Adding categories like "Appetizers", "Main Course" etc.
    • Adding dishes (with a price, description, and title)
    • Updating the Restaurant title

Editing a Menu

  • Generate and share a public link for each menu created
  • Generate a QR code for the aforementioned public link

Options for each menu

Authentication

User authentication is handled by Google Firebase. The app currently implements:

  • Signup/Login with an email, password combo
  • Anonymous guest logins
  • Account deletion
  • Password recovery via Email
  • Email verification on signup

Frontend

I used Next.js + React. The codebase is currently all Javascript. I'm planning on migrating it to Typescript soon.

Middleware

The RESTful APIs are served by a Node.js + Express.js server. The server performs CRUD operations on a MongoDB Atlas instance. Object modeling with Mongoose Js helped simplify things.

Database

The database is a MongoDB instance running on the MongoDB Atlas SaaS. A single collection maps each user with their respective menu information.

Source Code

Upcoming Features

  • Images for dishes (probably on a free tier AWS S3 account)
  • Toggle to make menus private/public
  • Custom fonts
  • Custom banner backgrounds
  • User-provided logos as opposed to Text titles
  • Custom color palettes
  • More sign-in options like Google, Facebook, etc.

Let me know what you think, and thanks for reading!

. . . . . .
Terabox Video Player