Skip to content

The website, backend, and dashboard for the Mustang Mug Cafe

Notifications You must be signed in to change notification settings

apc-mhs/mustang-mug

Repository files navigation

mustang-mug

The website, backend, and dashboard for the Mustang Mug Cafe. This readme serves chiefly as a contribution guide for GMHS students. If you have a question about a specific issue, please reach out to the individual who created the issue.

Site available here!

Table of Contents

Contribution Guides

If you'd like to begin contributing, there are two different pathways to help out, one being design and the other development. Before you begin with either, please read their corresponding guides.

After reading through your selected guide, please refer to the "Find Work to do" subsection within both of them to begin contributing.

Setup

Install homebrew

cd && mkdir homebrew && curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew

Install Node

brew install node

Install Firebase Tools

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

After changing your npm prefix, you need to activate it in your bash profile. Open the profile:

vi ~/.bash_profile

Add the following lines to the file:

export PATH=~/.npm-global/bin:$PATH

Then reactivate your bash profile:

. ~/.bash_profile

Now, you can install the firebase tools:

npm install -g firebase-tools

After installation, login to firebase (make sure to use your school google account):

firebase login

Configure the repository

In terminal, inside your repository's folder, install dependencies:

npm install && npm install --prefix functions

Set the firebase project

firebase use --add

Download the firebase functions config for functions emulation:

firebase functions:config:get > functions/.runtimeconfig.json

Test your code

Create a file called .env.development.local in your project's root directory. Add these lines:

GOOGLE_APPLICATION_CREDENTIALS="./src/admin/mustang-mug-firebase-adminsdk-te6ci-2af91d14d1.json"
FIRESTORE_EMULATOR_HOST="localhost:8080"
FIREBASE_AUTH_EMULATOR_HOST="localhost:9099"

Then, add one more variable to this file called MSB_API_KEY, you'll need to check the .runtimeconfig.json file you downloaded in the previous section for the value.

Next, add your service account JSON file to the admin directory inside src. You can get this file by contacting @AndrewLester. The file should be named mustang-mug-firebase-adminsdk-te6ci-2af91d14d1.json. Also ask for the MySchoolBucks API key at the same time, which you'll need to test API interactions. Now, you are ready to test. Run the firebase emulators:

firebase emulators:start

Alternatively, if you're having issues with running all the emulators you can run a limited number of emulators, which should be enough to do local development (recommended approach):

firebase emulators:start --only firestore,auth,functions

In a separate shell tab, start the dev server.

npm run dev

If you want to do a full test with the Firebase emulators, make sure to get the Firebase function config locally (run this in the functions folder): firebase functions:config:get > .runtimeconfig.json

Selected Documentation

Design

Development

Selected Administration-Sourced Information for Website

Technical Specifications

  • Only open orders up at a certain time for a set amount of time (e.g. open orders at 7:30am until 7:45am)
  • Customizable order cap that's enforced (e.g. for 6/3/1982 only allow 20 orders before shutting down order capability)
  • Two interfaces: Menu/Ordering and Dashboard/Menu setup (can be split by student workload)
  • Menu section lists all items for sale with prices, user can select items they want and see totals
  • Order section first step ensures users has an account with MSB (MySchoolBucks API) -- if they do continue, if they don't bounce them back and provide information on who to contact/how to set up an MSB account
  • Dashboard lists any orders that need to processed and allows people working at the cafe to label drinks. Could also set up "text when order is ready" feature
  • Menu setup section allows the people using the dashboard to temporarily edit the menu for a specific day
  • If success and user has MSB account continue with order, adding to cart, paying etc. This step requires use of 'Pay API' rather than the 'Pay Express'

Page graph: page graph

Menu tree: menu tree

Menu filter items

Current Mustang-Mug Order Procedure

  • Google form that's set up to only be open for a set period of time based on a conference scheduling calendar Chrome extension (tell me this isn't jank af)
  • At the end of the day Mustang Mug employee opens up Google Sheet with everyone's schoolbucks information to ensure they have accounts and charge them money, even if they didn't pick up their order
  • Employee manually creates order from form output.
  • Menu is up on a TV physically located near Mustang Mug

Benefits of an API and Order Site over a Google Form

  • Saves FCCPS employees work hours and effort to create product
  • Streamlines order process and truly ensures products are not over ordered
  • Ensures all products ordered can and will be paid for (payment happens prior to reciept of goods)

Project Timeline

Project Timeline

About

The website, backend, and dashboard for the Mustang Mug Cafe

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published