Multi-tenant SaaS / Real-time Service

Pet Palace (PixelPulse SaaS Solution)

A comprehensive real-time booking application for pet grooming businesses (Pet Palace). It allows shop owners to manage bookings, employees, and customers in real-time. Features include a dynamic booking flow, Twilio-powered SMS alerts, and deep behavioral tracking for pets.

ReactFirebaseTwilioTailwind

View Repository

Technical Specifications

Language

TypeScript

Architecture

Serverless / Multi-tenant

Key Interface

Firebase Firestore

Platform

Web App (Next.js)

Key Engineering Achievements

Multi-tenant data isolation
Real-time grooming status tracking
Automated Twilio SMS integration
Comprehensive pet behavioral profiles

Technical Deep Dives

A granular analysis of the engineering hurdles encountered during development and the architectural decisions made to resolve them at scale.

Challenge 01

Race Condition Resolution

The Problem

Simultaneous booking attempts for the same time slot by different customers could lead to overbooking during peak hours.

Engineering Decision

Implemented Firestore transactions (runTransaction) to ensure slot availability is checked and reserved as an atomic operation.

Implementation

The booking engine wraps the slot validation and document creation in a single transaction blocks, failing gracefully if the state changed.

Tech Stack snippet

await runTransaction(db, async (transaction) => {
  const slotDoc = await transaction.get(slotRef);
  if (slotDoc.data().isBooked) throw "Slot already taken";
  transaction.update(slotRef, { isBooked: true });
  transaction.set(bookingRef, newBooking);
});

Challenge 02

Dynamic Service Logic

The Problem

Engineered a flexible state machine to calculate pricing and duration across multiple pet sizes and add-on services without hardcoding values.

Engineering Decision

Built a centralized selection matrix context that derives complex billing states from raw configuration metadata.

Implementation

The selection engine handles the atomic update of complex nested service fields while maintaining UI responsiveness.

Tech Stack snippet

const updateBookingData = useCallback((data: Partial<BookingData>) => {
  setBookingData((prev) => ({ 
    ...prev, 
    ...data,
    includeSpaWithGrooming: data.spaServices ? data.spaServices.length > 0 : prev.includeSpaWithGrooming
  }));
}, []);

Challenge 03

Real-time Status Sync

The Problem

Optimized listener patterns to ensure all staff devices reflect pet status changes (e.g., 'In Bath' to 'Ready') instantly without excessive API usage.

Engineering Decision

Leveraged Firestore's onSnapshot with targeted document listeners instead of collection-wide polls for the current shift's dashboard.

Implementation

The admin dashboard uses a reactive state management hook that merges incoming server events with active UI blocks in O(1) time.

Tech Stack snippet

const upsertBooking = (updatedBooking: Booking) => {
  setBookings(prev => {
    const next = [...prev];
    const index = next.findIndex(b => b.id === updatedBooking.id);
    if (index >= 0) next[index] = updatedBooking;
    else next.unshift(updatedBooking);
    return next;
  });
};