mirainc / wholefoods-menu-app

A Whole Foods Market inspired menu powered by the On-Brand Menu API, built with NextJS and hosted on Vercel.

Home Page:https://wholefoods-menu-raydiant-app.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

NextJS Custom Menu App

URLs Note: Instructions on how to fetch menuIds for a given API key are available in the "Multi-location support" section below.

Example menuId: 5ffd5ad4-d853-48cd-a19b-421490314676

Localhost:

Production:

Prerequisities

  • Node (version defined in .nvmrc)
  • Yarn
  • .env file populated with values listed in .env.sample

Development

Start the development server

yarn dev

Adding App to Raydiant Platform

See here for a comprehensive guide to building Raydiant apps.

Builder Inputs

There is one builder input for this project. Builder inputs can be configured after creating a new app in Raydiant's Developer portal

  • Location (select input) - Corresponds to a menu ID Menu Board
  • Menu Board (select input) - Corresponds to a NextJS route Menu Board
  • Footnote (text input) - Corresponds to a query param Footnote

Multi-location/menu support

A couple of additional steps are required for multi-location/menu support.

  1. Using your API key, make a call to /v1/menus to retrieve the list of menus your API key has access to

cURL example:

curl --location --request GET 'https://menu-api.raydiant.com/v1/menus' \
--header 'x-api-key: <API_KEY>'
  1. Take note of all the menuIds required for your digital menu
  2. Go to the developer portal and select your app
  3. Creat a new "select" builder input
  4. Populate the "options" section with the aforementioned menuIds
  5. Confirm you can make an API request to fetch group data for a given menu/location
/v1/groups?tags=<tag>&menus=<menuId>depth=<depth>

Deployment

CI/CD is setup to deploy our apps using the Vercel Platform

Check out our Next.js deployment documentation for more details.

About

A Whole Foods Market inspired menu powered by the On-Brand Menu API, built with NextJS and hosted on Vercel.

https://wholefoods-menu-raydiant-app.vercel.app


Languages

Language:TypeScript 94.4%Language:JavaScript 4.5%Language:CSS 1.1%