Skip to content

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.

License

Notifications You must be signed in to change notification settings

naji0329/Microservices-GrowLabs

Repository files navigation

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

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.
    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 - [email protected]

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

Acknowledgements

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published