GlowLabs

Glow Labs Facial Bar - CRUD Application

MERN stack appointment scheduling and employee/client management application

View Demo · Watch Video Demo · Report Issue

Background

Glow Labs, a small business, has been using Square for booking appointments, managing clients and employees, and as a point of sale (POS) system. Its website, built by using Wix, displays its Square booking workflow in an iframe. It has also been using WaiverForever for handling consent forms - clients are not able to receive copies.

Square Appointments does not charge a monthly subscription fee if there is only one staff member. However, a monthly charge of $50 for 2-5 members and $90 for 6-11 members (and even more for even larger teams) is incurred. Glow Labs has several staff members and therefore has to pay a monthly fee. Square's POS system is free to use and there are no setup fees or monthly subscription fees.

Ideally, appointments, consent forms, and profile management would all be handled on the same domain. Also, sensitive client-entered credit card information should be handled securely and integrated with Square's POS system.

Functionality

This is a MERN (MongoDB, Express, React, Node.js) stack application that uses Redux for state management and Apollo Client to fetch data from a MongoDB database via GraphQL. It has some of the following features:

Responsive design, SEO, and performance optimizations by means of:

• Custom, effective meta tags with metatags.io and favicons with favicon.io.
• SVG compression using SVGOMG, static site image compression using Squoosh, and user-uploaded image compression using browser-image-compression and LZString).
• Lazy loading and SVG stroke-dashoffset animation triggers and animation on landing page with the Intersection Observer API and react-spring.
• Code-splitting along shopping cart routes and authenticated user routes.

Guest clients are able to:

• Add and remove facial treatments and add-ons (certain combinations disallowed) from their shopping cart.
• Select a staff member they would like their service with (or, if no preference, select a random staff member).
• Choose an available time and date for their appointment.
• Fill out contact information and any appointment notes.
• Submit credit card information securely through a Square Payment Form to hold their appointment. This form is an iframe (no credit card information is stored on Glow Labs' MongoDB database. Rather, this information goes to Square's POS).
• Book selected appointments and receive:
  • Confirmation and reminder texts via Twilio and node-cron (to which they can reply to confirm their appointment).
  • Confirmation emails (created using the MJML markup language) via Nodemailer.
  • Link to fill out and sign a consent form.
• Log in or create an account by entering details or using Passport to authenticate with Facebook via OAuth 2.0. Authentication is done by JSON Web Tokens and HttpOnly access and refresh cookies, as well as an additional client-visible "dummy" cookie after validation.

Authenticated clients are able to do all of the above, as well as:

• See upcoming and past appointments.
• Cancel an upcoming appointment.
• Save their credit card information for future bookings, if they wish (again, this card information is not saved to Glow Labs' MongoDB database, but is queried from Square).
• Download PDF copies of their latest consent forms via React-PDF.

Authenticated staff members are able to:

• Receive real-time relevant activity updates such as new bookings or cancellations in their employee dashboard via GraphQL subscriptions powered by Google Cloud Pub/Sub.
• View all clients and staff members and each individual's upcoming and past appointments, as well as PDF copies of client consent forms, if present.
• Update client and their own profile photos by uploading a photo or taking a photo with a webcam.
• Add, delete, or update appointments and personal events in their own calendar.

Authenticated staff members with "admin" status are also able to:

• Add new staff members.
• Delete clients and staff members.
• Update all clients' and staff members' profile photos.
• View and manage all staff members' calendars.

Deployment

Server deployed via AWS EC2 instance with NGINX and SSL secured with Let's Encrypt. Client-side deployed with Vercel. Custom domain from Freenom with DNS routing by Cloudflare.

Local Development

To develop this project locally, follow the steps below.

Prerequisites

You will need to have the following software installed:

• npm
• Git
• Node.js

Installation

1. Create a Google Maps Platform billing account, create a project, enable the Google Maps API, and get an API key.
2. Enable the Google Pub/Sub API for that same project, add a new topic with a name of your choosing, and then add a new subscription with the name "getUpdatedEmployee." Leave the delivery type as "Pull."
3. Create a new Square Developer account, create a new application, and get its Sandbox credentials.
4. Create a Twilio account and get its account SID and authorization token.
5. Create a Facebook for Developers account, register a new application, and get its ID and secret.
6. Create a MongoDB account, create a new database, and get its connection string to connect to Mongoose.
7. Clone the Github repository.

   git clone https://github.com/amamenko/GlowLabs.git

8. Install all client-side NPM packages.

   cd Client
   npm install

9. Enter your Google Maps API token and Square Sandbox application details as client-side environment variables.

   REACT_APP_GOOGLE_MAPS_API_KEY=YOUR GOOGLE MAPS API KEY
   REACT_APP_SQUARE_SANDBOX_APPLICATION_ID=YOUR SQUARE SANDBOX APPLICATION ID
   REACT_APP_SQUARE_SANDBOX_LOCATION_ID=YOUR SQUARE SANDBOX LOCATION ID
   REACT_APP_SQUARE_SANDBOX_ACCESS_TOKEN=YOUR SQUARE SANDBOX ACCESS TOKEN

10. Install all server-side NPM packages.

    cd ..
    npm install

11. Enter your Square Sandbox, Twilio, Facebook for Developers, Google Cloud, and MongoDB credentials as server-side environment variables. Also enter your own Nodemailer email/password combinations and JSON Web Token secret keys as environment variables.

     SQUARE_SANDBOX_ACCESS_TOKEN=YOUR SQUARE SANDBOX ACCESS TOKEN
     TWILIO_ACCOUNT_SID=YOUR TWILIO ACCOUNT SID
     TWILIO_AUTH_TOKEN=YOUR TWILIO AUTH TOKEN
     GLOW_LABS_TEXT_NUMBER=YOUR TWILIO TEXTING NUMBER
     TWILIO_TEST_TEXT_NUMBER=YOUR OUTBOUND TEST TEXT NUMBER
     FACEBOOK_APP_ID=YOUR FACEBOOK APP ID
     FACEBOOK_APP_SECRET=YOUR FACEBOOK APP SECRET
     JWT_SECRET_KEY_DUMMY=YOUR DUMMY JWT KEY
     JWT_SECRET_KEY_ACCESS=YOUR ACCESS JWT KEY
     JWT_SECRET_KEY_REFRESH=YOUR REFRESH JWT KEY
     MONGO_DB_USERNAME=YOUR MONGODB USERNAME
     MONGO_DB_PASSWORD=YOUR MONGODB PASSWORD
     GOOGLE_PUB_SUB_PROJECT_ID=YOUR GOOGLE CLOUD PUB/SUB PROJECT ID
     GOOGLE_PUB_SUB_CLIENT_EMAIL=YOUR GOOGLE CLOUD PUB/SUB CLIENT EMAIL
     GOOGLE_PUB_SUB_PRIVATE_KEY_PART_ONE=PART ONE OF YOUR GOOGLE CLOUD PUB/SUB PRIVATE KEY
     GOOGLE_PUB_SUB_PRIVATE_KEY_PART_TWO=PART TWO OF YOUR GOOGLE CLOUD PUB/SUB PRIVATE KEY
     GLOW_LABS_EMAIL=YOUR EMAIL
     GLOW_LABS_EMAIL_APP_PASSWORD=YOUR EMAIL PASSWORD

12. Build for production.

    npm run build

Contributing

Contributions are welcome!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/MyFeature)
3. Commit your Changes (git commit -m 'Add my feature')
4. Push to the Branch (git push origin feature/MyFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Avraham (Avi) Mamenko - avimamenko@gmail.com

Project Link: https://github.com/amamenko/GlowLabs

Acknowledgements

• Glow Labs
• Square Developer
• Facebook for Developers
• Twilio
• Nodemailer
• MJML
• Moment.js
• Google Maps API
• React-PDF
• React Icons
• react-spring
• Tippy.js for React
• React Burger Menu
• node-cron
• Best-README-Template