POAP Kiosk

This is a kiosk app that displays QR codes based on a list of event codes uploaded by the event manager.

Product owner: @actualymentor

Live url: qr.poap.xyz

Dev url: https://qr-kiosk-dev.web.app/

Internal documentation

Requirements

• Have nvm installed as a Node.js version manager
• Have the .env.development file, it is in 1Password as a secure note called [ .env.development ] POAP Kiosk - poap-xyz/poap-qr-kiosk
• (optional) Make sure you have access to the Firebase project qr-kiosk-development if you will run the functions backend offline. Note: you never need production credentials, the continuous integration has access to it
• (optional) Use VSCode or VSCodium for automatic style formatting

Frontend usage

1. Clone this repo
2. nvm use
3. npm i
4. Populate .env.development
5. CHOICE MOMENT. Either:
   1. Run the firebase functions backend locally, see next section
   2. Comment out the REACT_APP_useEmulator line in .env.development (this will make the frontend use the live backend)
6. npm start

Backend usage

1. cd functions
2. nvm use
3. npm i
4. npm run serve

Tech stack

App code based on create-react-app, styling based on styled-components, routing using react-router.

Backend runs on a Firebase project.

🎨 Styling loosely uses atomic design implemented with the Styled Components library. The essence of this approach is that visual components are split into categories:

• Atoms are design elements that are singular but styled: e.g. a button.
• Molecules are atom combinations that commonly occur together: e.g. a label + input + button.
• Organisms are atoms/molecules that make a functional component together: e.g. an app header with a menu, search bar and logo.
• Pages are combinations of the above that we show to users, in the context of this app they are components used in a Route.

Developer flow

This app follows the POAP git flow and follows the psychopath coder principle:

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live" ~ John Woods

To prevent the psycho from pursuing you:

1. Write for clarity and comprehension.
2. Leave a "what this does" comment for every function.
3. Be as descriptive as possible in commits and PRs.

Setting up new Firebase projects

To configure Firebase services:

1. Enable firestore, functions, hosting, analytics
2. Enable app check (docs)
3. Fill out all variables in .env

To Configure backend:

1. Set keys using firebase functions:config:set key=value:
   • auth0.audience
   • auth0.client_id
   • auth0.client_secret
   • auth0.endpoint
   • sendgrid.fromemail
   • sendgrid.apikey
   • poap.apikey
   • recaptcha.secret
   • kiosk.publicUrl
2. firebase functions:config:get > .runtimeconfig.json