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.
The Main Features
Users, the target demographic of whom are “Restaurant owners”, can:
- Create/Delete/Search Menus
- Update them by
- Add 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.
Server
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!
