Building SoftVet

SoftVet (also documented as VetSoft) is a veterinary clinic management system for scheduling appointments, managing clients and pets, and automating communication through Google Calendar and Gmail. It runs as a web app or as an Electron desktop application for Windows.

What it does

The app gives clinic staff a single workspace for day-to-day operations:

  • Dashboard — Overview stats: today’s appointments, total clients, total pets, and monthly appointment count.
  • Appointments — Full CRUD for scheduling with types (consultation, vaccination, surgery, grooming, emergency, follow-up) and statuses (scheduled, confirmed, in-progress, completed, cancelled, no-show).
  • Calendar — FullCalendar integration with day, week, and month views for visual scheduling.
  • Clients — Owner records with contact info, address, and notes.
  • Pets — Patient profiles linked to clients: species, breed, gender, weight, microchip, and medical notes.
  • Settings — Clinic preferences and Google integration configuration.
  • Authentication — Google OAuth 2.0 login with protected routes and token refresh handling.

When an appointment is created or updated, the system can sync it to Google Calendar and send email notifications via the Gmail API — keeping staff calendars and client communication in sync without manual copy-paste.

Tech stack

LayerChoice
FrontendReact 18 + TypeScript
BuildVite 5
DesktopElectron 28 (system tray, native notifications, Windows installer)
StateZustand
RoutingReact Router 6
Local DBDexie.js (IndexedDB)
Calendar UIFullCalendar 6
Google APIsOAuth 2.0, Calendar API, Gmail API
StylingTailwind CSS 3 + Headless UI / Radix UI
HTTPAxios

Architecture

The project follows a layered client-side architecture documented in SPEC.md:

Electron Shell (window, tray, IPC, notifications)
        ↓
Vite + React (pages, components, hooks)
        ↓
Business Logic (Zustand stores, Google services)
        ↓
Data Layer (IndexedDB via Dexie + Google APIs)

Zustand stores manage appointments, clients, pets, auth, and UI state. Dexie persists all records locally for offline-capable operation. The Google services layer (src/services/google/) centralizes OAuth, Calendar event sync, Gmail sending, token refresh, and error handling.

The Electron shell (electron/main.ts) adds native window management, a system tray with show/quit actions, desktop notifications via IPC, and an NSIS Windows installer through electron-builder.

Key features in detail

Appointment ↔ Google Calendar sync

Each appointment can store a googleCalendarEventId. Creating or updating an appointment pushes changes to the connected Google Calendar, so veterinarians see clinic schedules alongside their personal calendars.

Gmail notifications

The Gmail service composes and sends automated emails for appointment confirmations and reminders, with flags (emailSent, reminderSent) tracked on each appointment record.

Full data model

Typed interfaces in src/db/types.ts define Users (admin, veterinarian, receptionist roles), Clients, Pets (8 species types), Appointments (6 types, 6 statuses), and Settings — all stored in IndexedDB with Dexie hooks for reactive UI updates.

Desktop deployment

npm run electron:dev runs Vite + Electron concurrently. electron:build:win produces a Windows NSIS installer with configurable install directory.

Development process

SoftVet was delivered as a cohesive v1.0 in a single large commit (~17k lines) — React + Vite UI, Electron desktop shell, Dexie.js for IndexedDB, and Google Workspace APIs for calendar and email.

Application architecture

  • Documented the full spec in SPEC.md (~1,200 lines) covering pages, data models, and Google integration flows.
  • Scaffolded 7 pages: Dashboard, Appointments, Calendar, Clients, Pets, Settings, and Login.
  • Built a shared UI kit (Button, Card, Modal, DatePicker, TimePicker, Select, etc.) with Tailwind CSS and Headless UI / Radix primitives.
  • Wired sidebar layout and header navigation with React Router 6.

Local data layer

  • Defined Dexie schema with typed models for clients, pets, and appointments.
  • Created React hooks for CRUD operations against IndexedDB (offline-first clinic records).
  • Added Zustand stores per entity for UI state and optimistic updates.

Scheduling and Google services

  • Integrated FullCalendar with custom event rendering for appointment blocks.
  • Implemented Google OAuth 2.0, Calendar API, and Gmail API modules with centralized error handling and token refresh — see Google OAuth docs.
  • Built forms for creating/editing clients, pets, and appointments with validation.

Electron desktop shell

  • Configured Electron main process with system tray, notifications, and IPC handlers for native features.
  • Set up electron:dev (Vite + Electron concurrently) and electron:build:win for NSIS Windows installer output.
  • Added .env.example documenting required Google API credentials.

Blog

recent-work

Building Galena AI

Synthetic voice detection dashboard — six ONNX detectors behind a FastAPI service, verdict confidence, call history, and interactive model metrics.

Read more →

Galena AI

Synthetic voice detection dashboard — six ONNX detectors via FastAPI, verdict confidence, call history, and interactive model metrics.

How it was built →
border-home1