PBJ Scheduling

An easy-to-use, easy-to-implement solution for small businesses to allow their customers to book appointments online.

Description

An all-in-one scheduling plugin for business owners (eg. hair salons, massage therapists, auto mechanics, etc). Includes:

• a customer-facing popup widget that allows customers to select services and timeslots, and pay with credit card online
• a business-owner-facing admin page which shows all bookings, displays the widget setup instructions, and provides an interface to changes services, hours, and other options
• a server which can automatically process online payments, create calendar events and invites, and send email/SMS notifications and confirmations Also included for demo purposes are a sample landing page for this widget and sample business website which integrates the widget in "Book now" links

This repo contains the server code and Business-owner frontend code. See this repo for customer-facing widget.

Screenshots

Business admin page

• Appointment agenda view
• Calendar view
• Editing services
• Editing business hours
• Notification settings
• Analytics and reports
• Simple setup to add widget to existing webpage

Customer-facing widget

• Selecting services
• Valid appointment time
• Invalid appointment time
• Online credit card payment with Stripe

About

This project began as a Final Group Project for Lighthouse Labs full-time web development bootcamp. It was designed and built over 12 days by @pgoshulak, @apatheticking, and @benyoo222.

Features

The business-owner-facing Admin page allows business owners to setup and change business data displayed in the customer widget, and view incoming appointments.

• Calendar view: view existing appointments in monthly, weekly, daily, or agenda views
  • Agenda view displays the full info for the day's appointments, including customer name, contact information, services chosen, and if payment is received or due
• Services page: add, edit, and delete services offered by the business, including price and duration
• Hours page: edit business hours
• Notifications page: Change how and when the business receives notifications for new appointments and summary reports
• Reports page: generate analytics charts to show service peak times, popular services, etc
• Information page: Update business contact info, and generate a setup URL
  • the setup URL is a single-line <a> tag which opens a popup window with the business's widget. It can be placed anywhere in a business's existing website and styled as desired.
  • WIP: the business may set a maximum number of 'concurrent appointments', eg. three hairstylists may service up to three customers at a time.

The customer-facing Widget is a popup window that can be easily integrated into a business's existing website, allowing customers to book services and timeslots, and providing the option to pay online.

• Services view: a checklist of services offered by the business, including price and duration. The customer can select any combination of appointments to book.
• Calendar view: a calendar view which allows the customer to select the exact time to book their appointment.
  • the calendar obfuscates customer data on existing events, simply displaying the time as 'booked'
  • the customer can drag-and-drop their appointment to any available time. The appointment turns green when the appointment is valid, and red when a conflict occurs (eg. existing appointment or after business hours)
  • appointment duration is automatically calculated from the services selected
• Customer info view: customer enters their name, phone number, and email address
• Payment screen: the customer pay choose to 'Pay now' with credit card (via Stripe) or to 'Pay later' at the business location
  • the customer may select if they would like an SMS or email confirmation of their booking

The backend server and database contains business logic and processes transactions.

• exposes the expected CRUD endpoints for business information such as hours, services, contact info, etc
• exposes a POST endpoint which requires the business ID as /business/<BUSINESS_ID>/appointment with which the customer widget interacts
• upon receiving a new appointment request, the server:
  • validates and processes the Stripe credit card payment, if included
  • generates an event to the business's Google Calendar
  • sends a calendar event invitation to the customer's email
  • sends SMS/email notification to the business owner, if selected in Notifications admin page
  • sends SMS/email confirmation to the customer, if selected in Payment widget screen

Setup

• clone this repo and the customer-facing widget repo to separate folders (eg. /business and /widget)
• generate API keys and accounts with the appropriate services and add to the following files (use the corresponding *.sample.json files to confirm correct file location and format):
  • /business/.env: MongoDB URI (can use default from .env.sample for dev/testing)
  • /business/src/calendar_secrets.json: Google Calendar API KEY
  • /business/server/calendar_secrets.json: Google Calendar API KEY
  • /business/server/gmail_password.json: Email password (note: you can change mailer accounts in /business/server/Modules/nodeMailerModule.js)
  • /business/server/service_account_secrets.json: Google Calendar authentication (email and private key)
  • /business/server/stripe_secrets.json: Stripe API key
  • /business/server/twilio_secrets.json: Twilio account ID and auth tokens
  • /widget/src/calendar_secrets.json: Google Calendar API KEY (see note below)
  • /widget/src/stripekeys.json: Stripe API key (see note below)
• inside /business folder, run npm run seed to seed the MongoDB database (ensure mongodb is installed first)
• run npm run server to start the Node/Express server
• inside either /business or /widget run npm run start to run the React development server. Both rely on the backend Node/Express server to read/update data

Note: the customer-facing widget is hosted statically on Github Pages. However, it still requests data from the backend Node/Express server (localhost:5000)

Dependencies

• MongoDB
• Express
• Node
• React
• Material UI
• ChartJS
• Nodemailer
• React Big Calendar

3rd Party APIs:

• Google Calendar / authentication
• Stripe
• Twilio