Live: Sky High Tramplines
This project is a CMS and appointment booking system for a fake trampoline park named Sky High Trampolines. It was the result of four, week-long Agile sprints enacted by four international devlopers.
This repository is a fork of the original with some added features and updated styling.
Table of contents (click to expand)
* [Tech Stack](#TechStack) * [Frontend](#Frontend) * [Backend](#Backend) * [CI / CD](#CICD) * [Features](#Features) * [Booking UI](#BookingUI) * [Stripe](#Stripe) * [Admin UI](#AdminUI) * [Screenshots](#Screenshots) * [Customer UI](#CustomerUI) * [Admin UI](#AdminUI-1) * [CI / CD](#CICD-1) * [Staging](#Staging) * [Production](#Production) * [Running Locally](#RunningLocally) * [Install the Firebase CLI](#InstalltheFirebaseCLI) * [Configuration](#Configuration) * [Client](#Client) * [Cloud Functions](#CloudFunctions) * [Start the Firebase Emulator](#StarttheFirebaseEmulator) * [Open a localtunnel Instance](#OpenalocaltunnelInstance) * [Listen for Stripe Events Locally](#ListenforStripeEventsLocally) * [Start the App Server](#StarttheAppServer)
The app has a customer-facing UI for booking reservations in two different rooms. Customers can choose between multiple rooms and book dates and times for each. If a room is at maximum capacity for a particular time range, those times will be unavailable for selection by other customers.Customers must sign a waiver and the image of their signature is stored in the database with their purchase data.
Purchases are sent to Stripe using Firebase serverless functions. Stripe stores a record of the purchase, generates a receipt and sends it back to Firebase using Stripe's webhooks. The receipt is then is emailed to the customer using Firebase serverless functions.
Note: When testing the purchase, use the fake data provided by Stripe. The credit card number should be
4111 1111 1111 1111. This indicates to Stripe that is a fake purchase for testing purposes. only The rest of the billing information can receive arbitrary values.
The admin UI allows administrators to view existing bookings, quickly visual ticket availablity for each room and to view, edit, create or delete rooms, products and add-ons which will then appear in the Booking UI.
| Booking Wizard | ||
|---|---|---|
|
|
|
|
|
|
| Bookings List | Daily Availability (Cloud Jumper Room) | Daily Availability (Cosmic Leap Room) |
|---|---|---|
|
|
|
Github Action workflows exist for both staging and production environments.
When a branch is pushed and a pull request is created, a build will be created and deployed to Firebase in the staging environment for inspection.
When a pull request is merged with the main branch, a build will be created and deployed the Firebase in the production environment.
This project uses Node 16.17.0 via nvm and yarn as the package manager.
$ nvm use 16.17.0 && npm i g yarn
$ npm i g firebase-tools
The local environment will require an active Firebase project setup for configuration and authentication. This app utilizes the Stripe, SendGrid and Google Places APIs and will therefore require accounts and keys for those services. If you intend on receiving emailed receipts from the app, a SendGrid email template will have to be created that accepts values to dynamically create the email. The template's id will be included in the cloud functions' .env.local file.
Create a .env.local file in the project's root directory with a value for each variable.
# .env.local
REACT_APP_FIREBASE_AUTH_DOMAIN=<YOUR_PROJECT>.firebaseapp.com
REACT_APP_FIREBASE_API_KEY=<YOUR_API_KEY>
REACT_APP_FIREBASE_PROJECT_ID=<YOUR_PROJECT_ID>
REACT_APP_FIREBASE_STORAGE_BUCKET=<YOUR_PROJECT>.appspot.com
REACT_APP_STRIPE_PUBLISHABLE_KEY=pk_test_<YOUR_STRIPE_PUBLISHABLE_KEY>
REACT_APP_GOOGLE_PLACES_API_KEY=<YOUR_GOOGLE_PLACES_API_KEY>
This app uses the Google Secrets Manager in production to handle secret values, but the cloud functions are configured to use .env.local in developement. Create .env.local in the functions folder and add values for the following variables:
# functions/.env.local
SENDGRID_API_KEY=<YOUR_SENDGRID_API_KEY>
SENDGRID_TEMPLATE_ID=<YOUR_SENDGRID_TEMPLATE_ID>
STRIPE_SECRET_KEY=sk_test_<YOUR_STRIPE_SECRET_KEY>
STRIPE_HANDLE_EVENT_SECRET=whsec_<YOUR_STRIPE_CLI_WEBHOOK_SECRET>
NODE_ENV=DEVELOPMENT
$ firebase emulators:start --import ./emulator/data
In order to communicate with Stripe webhooks locally, a localtunnel url will be used. See this blog post for more details. The port number is the number used by the Firebase emulator to serve the Firebase functions.
$ npx localtunnel --port 5001
Copy the generated URL.
Install the Stripe CLI and login. Use the localtunnel URL to forward Stripe events to the local machine.
$ stripe listen --forward-to https://<YOUR_LOCAL_TUNNEL_URL>.loca.lt/<YOUR_PROJECT_NAME>/us-central1/handleStripeEvent
$ yarn start