Open Source Restaurant Menus with Next.js, Express.js and MongoDB
Tags: webdev, nextjs, react, opensource
Published: 2024-01-22 01:58:46

# Check out the live app [here](https://restaurant-emenu.vercel.app/)


## 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.
> -- <cite>[88% of restaurants considering swapping to digital menus, survey says](https://www.restaurantdive.com/news/88-of-restaurants-considering-swapping-to-digital-menus-survey-says/595558/)</cite>

However, most of the SaaS models for digital menus today are pay-to-use ranging from <b>$15/month</b> to <b>$100/month</b> 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](https://restaurant-emenu.vercel.app/menu/6598bbb8e7c555b008b3ba72)

## The main features
Users, the target demographic of whom are "Restaurant owners", can:
- Create/Delete/Search Menus

![Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfywvtf90m0t4o0xb4xi.png)

- 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dg61ssqaz9ca4w8tm930.png)
- Generate and share a public link for each menu created
- Generate a QR code for the aforementioned public link

![Options for each menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mt31mzemv6b7zwpkkuy.png)

## Authentication
User authentication is handled by [Google Firebase](https://firebase.google.com/). 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](https://nextjs.org/) + [React](https://react.dev/). 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](https://nodejs.org/en) + [Express.js](https://expressjs.com/) server. The server performs CRUD operations on a [MongoDB Atlas](https://www.mongodb.com/atlas/database) instance. Object modeling with [Mongoose Js](https://mongoosejs.com/) helped simplify things.

## Database
The database is a MongoDB instance running on the MongoDB Atlas SaaS. A single collection maps each <b>user</b> with their respective <b>menu</b> information.

## Source Code
- [Next.js Frontend](https://github.com/vineet192/Restaurant-Emenu/)
- [Node.js Server](https://github.com/vineet192/restaurant-emenu-backend)

## 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!