Open Source Restaurant Menus with Next.js, Express.js and MongoDB
Vineet Kalghatgi
Posted on January 22, 2024
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.
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
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!
Posted on January 22, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.