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

vineet192

Vineet Kalghatgi

Posted on January 22, 2024

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

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!

💖 💪 🙅 🚩
vineet192
Vineet Kalghatgi

Posted on January 22, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related