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

Initial scaffold

“Initial commit - Vet Soft application” — ~17,000 lines across 58 files, including:

  • Full React app with 7 pages (Dashboard, Appointments, Calendar, Clients, Pets, Settings, Login)
  • Complete UI component library (Button, Card, Modal, DatePicker, TimePicker, Select, etc.)
  • Layout with sidebar navigation and header
  • Dexie database schema with typed models and React hooks
  • Zustand stores for all entities
  • Google OAuth, Calendar, and Gmail service modules with centralized error handling and token refresh
  • FullCalendar appointment calendar with custom event rendering
  • Forms for creating/editing clients, pets, and appointments
  • Electron main process with tray, notifications, and IPC handlers
  • SPEC.md — comprehensive technical specification (~1,200 lines)
  • Vite + Electron build configuration and Windows installer setup
  • .env.example for Google API credentials

The entire clinic management platform was architected and implemented as a cohesive v1.0 release rather than incremental commits.

Blog

recent-work

Building Smartclic Demo

Modern landing page for a Mexican web development agency — React 19, Vite, Tailwind v4, GSAP scroll, 3D viewer, and bilingual ES/EN.

Read more →

Smartclic Demo

Landing page for a Mexican web agency — React 19, Tailwind v4, GSAP scroll, 3D viewer, and bilingual ES/EN.

How it was built →
border-home1