项目作者: amamenko

项目描述 :
MERN stack application for appointment booking and employee/client management
高级语言: JavaScript
项目地址: git://github.com/amamenko/GlowLabs.git
创建时间: 2019-10-28T23:10:28Z
项目社区:https://github.com/amamenko/GlowLabs

开源协议:MIT License

下载


MIT License
LinkedIn




Logo


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



Glow Labs Skin Care Responsiveness Demo Screenshots





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:

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.
    1. git clone https://github.com/amamenko/GlowLabs.git
  8. Install all client-side NPM packages.
    1. cd Client
    2. npm install
  9. Enter your Google Maps API token and Square Sandbox application details as client-side environment variables.
    1. REACT_APP_GOOGLE_MAPS_API_KEY=YOUR GOOGLE MAPS API KEY
    2. REACT_APP_SQUARE_SANDBOX_APPLICATION_ID=YOUR SQUARE SANDBOX APPLICATION ID
    3. REACT_APP_SQUARE_SANDBOX_LOCATION_ID=YOUR SQUARE SANDBOX LOCATION ID
    4. REACT_APP_SQUARE_SANDBOX_ACCESS_TOKEN=YOUR SQUARE SANDBOX ACCESS TOKEN
  10. Install all server-side NPM packages.
    1. cd ..
    2. 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.
    1. SQUARE_SANDBOX_ACCESS_TOKEN=YOUR SQUARE SANDBOX ACCESS TOKEN
    2. TWILIO_ACCOUNT_SID=YOUR TWILIO ACCOUNT SID
    3. TWILIO_AUTH_TOKEN=YOUR TWILIO AUTH TOKEN
    4. GLOW_LABS_TEXT_NUMBER=YOUR TWILIO TEXTING NUMBER
    5. TWILIO_TEST_TEXT_NUMBER=YOUR OUTBOUND TEST TEXT NUMBER
    6. FACEBOOK_APP_ID=YOUR FACEBOOK APP ID
    7. FACEBOOK_APP_SECRET=YOUR FACEBOOK APP SECRET
    8. JWT_SECRET_KEY_DUMMY=YOUR DUMMY JWT KEY
    9. JWT_SECRET_KEY_ACCESS=YOUR ACCESS JWT KEY
    10. JWT_SECRET_KEY_REFRESH=YOUR REFRESH JWT KEY
    11. MONGO_DB_USERNAME=YOUR MONGODB USERNAME
    12. MONGO_DB_PASSWORD=YOUR MONGODB PASSWORD
    13. GOOGLE_PUB_SUB_PROJECT_ID=YOUR GOOGLE CLOUD PUB/SUB PROJECT ID
    14. GOOGLE_PUB_SUB_CLIENT_EMAIL=YOUR GOOGLE CLOUD PUB/SUB CLIENT EMAIL
    15. GOOGLE_PUB_SUB_PRIVATE_KEY_PART_ONE=PART ONE OF YOUR GOOGLE CLOUD PUB/SUB PRIVATE KEY
    16. GOOGLE_PUB_SUB_PRIVATE_KEY_PART_TWO=PART TWO OF YOUR GOOGLE CLOUD PUB/SUB PRIVATE KEY
    17. GLOW_LABS_EMAIL=YOUR EMAIL
    18. GLOW_LABS_EMAIL_APP_PASSWORD=YOUR EMAIL PASSWORD
  12. Build for production.
    1. 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