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

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

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

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

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

• Next.js Frontend
• Node.js Server

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!