Skip to content

Project Summary

Jump to bottom
Meg Gutshall edited this page Oct 10, 2021 · 1 revision

Problem Statement

Historically, local businesses have limited resources when it comes to creating an online menu. This can be due to limited technical ability, financial budgeting, or time. As a result, many lean on paper menus.

With the rise of social distancing and caution towards physical contact in public, many customers are wary of touching a paper menu. In addition, many customers opt to have their items ordered via carryout or delivery. Without a dedicated site, customers may not find the business due to a lack of SEO presence.

Some businesses manage to create an online menu, however, this is often lacking key features that their customers may be looking for. Such features include photos, prices, or a description. In other cases, businesses will resort to taking a picture of their existing menu and uploading the .jpg file to their site. This negatively impacts both SEO and readability.

image image

Project Goal

To give small local restaurants a platform where their customers can view their menu items without having to touch a physical menu. Restaurant owners are given a pre-generated QR Code that they place on their tables so customers have an easy way to reach their site.

User Stories

This project has two users in mind: Restaurant Owners and Restaurant Customers.

User stories follow an "As a {user}, I {what they want}, so that {why they want it}" flow.

  • As a restaurant owner...
    • I would my customers to view my menu online, so that I can save on printing costs
    • I would like my customers to view my menu online, so that they can browse my products before entering the store, or while they are waiting.
    • I would like my customers to view my menu on a website so that I can drive traction to my business outside of a Facebook page
  • As a customer...
    • I would like to view a restaurant's online menu so I can have a more readable (accessible) experience.
    • I would like to view a restaurant's online menu so I don't have to touch a used menu.
    • I would like to scan a QR Code to view an online menu, so I don't have to manually type in a restaurant.

Project Stack

  • Frontend Framework: NextJS - NextJS is the leading frontend react framework that comes with many production practices baked in, while also having a leading DX (developer experience).

  • CSS Library: Regular CSS/Bootstrap 5 - Adding regular CSS requires the least amount of setup, but comes at the expense of recreating key elements like Grids and Cards

  • API: NextJS - NextJS comes with a API routes built in. This minimizes the dependencies that are installed, as well as allowing developers to focus on a single set of documentation.

  • Database: Static JSON file - Restaurant data is manually added to a static JSON file. This file is stored in an API Route (mentioned above).

  • Image Hosting: Cloudinary - An industry leader in image hosting due to providing a generous free tier and automatic image resizing.

  • Hosting Platform: Vercel - NextJS is a Framework by the company Vercel. In addition to the framework, Vercel also offers a free hosting solution.

Mockups

Two great examples of online menus can be seen from Applebee's and Chili's

restauarnt-sample-1

Applebee's on click/hover of an item shows additional details

image

Mobile view

image

When no product image is present

image

FAQ

Q: Why use a static JSON file? Why not a real database?

A: Starting off with a static file allows us to move to a database if the need comes up--that's a GOOD problem to have!

Q: How will businesses add their information?

A: This will be a manual process at first. We could, for example, select 2 restaurants and input their menu information. This is a great opportunity to network and show our willingness to help.

Q: What will this JSON structure look like?

A: This can change, but something like the following could work:

[{
  name: "Michael's Tacos",
  companyEndpoint: "michaels-tacos", //https://our-side/michaels-tacos
  logoID: "michaels-tacos-logo",
  products: [
    {
      displayName: 'Appetizers', // used for header
      name: 'appetizers',
      items: [{
        displayName: 'Wings', // used as product name
        name: 'wings',
        imageID: 'michaels-tacos-appetizers-wings', //companyEndpoint + category + item name
        description: '5 delicious bone-in wings. Served wth ranch, and celery.',
        price: '$7.99'
      }]
    }
  ]
  }]
}]

Q: What is the point of using Cloudinary? Can't we just put them in some-service and call it good?

A: We could, but when it came time to show the image, we would be serving a potentially large file. Using Cloudinary with React, we can get the exact size we need by using their built-in component:

<Image publicId="sneaker.png" >
	<Transformation crop="scale" width="150" />
</Image>

Q: What about ordering from the site? Charging businesses to upload their menu? Adding in delivery options?

A: Let's see if we can get this off the ground first 😉

Q: How do we create a QR code for the business owner?

A: Easy! Right-click any webpage in Chrome and select "create QR code for this page". It also gives the option to download the code. This can be emailed to the owner for them to print out and give to their customers.

Q: How do we create the business endpoints like /michaels-tacos?

A: NextJS handles this for us too! Remember how that static JSON file is put into an API route? Well when the site builds, we can tell NextJS to create an endpoint for every item in the array. Specifically, we can tell it to use the companyEndpoint as the page name! If you want to learn more, the docs have a full walkthrough!

Clone this wiki locally