Zackly-Rite Appointment Booking App Project

A React Based Single Page massage therapist booking application for small business exposure and engagement with clients.

General Websites Collection

Angular Sites
Wordpress site

React SPA

Introduction

Github Repo: (https://github.com/cryshansen/zackly-rite-spa/) This is a React-based single-page application (SPA) designed to allow users to book massage therapy appointments with Zackly-Rite. The app provides a calendar interface to select dates, displays real-time available time slots from the PHP-API repo as a backend, and includes a secure booking form with validation. As this site is rather simplistic, SPA is the best approach.

The front end utilizes clean Bootstrap styling while the back end is powered by a structured custom PHP API, which integrates with a Java-based Bookit system for seamless cross-platform coordination.

The booking system uses GET methods for simplicity, alongside front-end and back-end token validation to prevent duplicate bookings within the same session. For administration, a FullCalendar.js interface allows for real-time appointment management, with an optional Google Calendar integration in development to offer flexible syncing and alternate administrative access.

Additional tools include PHPMailer for transactional email handling and google-api-php-client for managing calendar synchronization. The system emphasizes clarity, reliability, and modularity—ideal for solo practitioners or small teams seeking a lightweight, custom booking solution. Please visit https://zackly-rite.ca

Alternatively the system can be hooked up to the bookit java spring boot depending on the preference of deployment stack. AWS facilitates an spring backend/front end but requires DevOps experience.

🔗 Live Demo

👉 View Live Demo

✨ Features

  • 📅 Interactive Calendar: Pick a booking date
  • ⏰ Real-Time Availability: Fetches booked times from the backend and disables them
  • 📋 Client Form with Validation: Form includes Yup + react-hook-form for first name, last name, phone, and email
  • 🤖 Google reCAPTCHA: For spam protection (v2)
  • ✅ Booking Confirmation: Stores booking and redirects to a confirmation page
  • 🌐 SEO-Ready: React Helmet integration for better meta handling
  • ⚙️ Environment Config: API URLs are set through .env for flexibility

The below screenshots capture some of the modules and components built that visually help relate the modules and features designed and implemented within the site. They represent some areas that are exclusive the the Artog.co ecosystem. The list and images are non-exhaustive.

The above set of images are front end displays relative to the code behind for the links to github repository. On the left we have the header and logo of the site, Middle image is the calendar display with first days available via greyout, todays date hightligted, Right image we have the day availability screen

This site is a one page website that encompasess a booking interface for the bookit java spring boot implementation.

The most interesting thing about this website is the booking integration using a vanilla php api to connect the interface with the backend storage

🛠️ Tech Stack

  • Frontend: React + Vite
  • Routing: React Router DOM
  • Form Handling: react-hook-form + Yup
  • Backend API: PHP with REST endpoints
  • Security: Google reCAPTCHA v2
  • Meta Tags: React Helmet
  • Deployment: GitHub Pages

🚀 Getting Started

1. Clone the Repo

```bash git clone https://github.com/cryshansenn/zackly-rite-spa.git cd zackly-rite-spa