Construyendo SoftVet

SoftVet (también documentado como VetSoft) es un sistema de gestión para clínicas veterinarias orientado a agendar citas, administrar clientes y mascotas, y automatizar la comunicación mediante Google Calendar y Gmail. Funciona como app web o como aplicación de escritorio Electron para Windows.

Qué hace

La app le da al personal de la clínica un solo espacio de trabajo para las operaciones del día a día:

  • Dashboard — Estadísticas generales: citas de hoy, total de clientes, total de mascotas y conteo mensual de citas.
  • Appointments — CRUD completo para agendar con tipos (consultation, vaccination, surgery, grooming, emergency, follow-up) y estados (scheduled, confirmed, in-progress, completed, cancelled, no-show).
  • Calendar — Integración con FullCalendar con vistas de día, semana y mes para programación visual.
  • Clients — Registros de dueños con datos de contacto, dirección y notas.
  • Pets — Perfiles de pacientes vinculados a clientes: especie, raza, género, peso, microchip y notas médicas.
  • Settings — Preferencias de la clínica y configuración de integración con Google.
  • Authentication — Login con Google OAuth 2.0, rutas protegidas y manejo de refresh de tokens.

Cuando se crea o actualiza una cita, el sistema puede sincronizarla con Google Calendar y enviar notificaciones por correo vía la Gmail API — manteniendo calendarios del personal y comunicación con clientes al día sin copiar y pegar manualmente.

Stack técnico

CapaElección
FrontendReact 18 + TypeScript
BuildVite 5
DesktopElectron 28 (bandeja del sistema, notificaciones nativas, instalador Windows)
EstadoZustand
RoutingReact Router 6
DB localDexie.js (IndexedDB)
UI de calendarioFullCalendar 6
Google APIsOAuth 2.0, Calendar API, Gmail API
EstilosTailwind CSS 3 + Headless UI / Radix UI
HTTPAxios

Arquitectura

El proyecto sigue una arquitectura en capas del lado del cliente documentada en 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)

Los stores de Zustand gestionan citas, clientes, mascotas, auth y estado de UI. Dexie persiste todos los registros localmente para operación con capacidad offline. La capa de servicios de Google (src/services/google/) centraliza OAuth, sincronización de eventos de Calendar, envío por Gmail, refresh de tokens y manejo de errores.

El shell de Electron (electron/main.ts) agrega gestión nativa de ventanas, bandeja del sistema con acciones mostrar/salir, notificaciones de escritorio vía IPC e instalador NSIS para Windows mediante electron-builder.

Funcionalidades clave en detalle

Sincronización Cita ↔ Google Calendar

Cada cita puede almacenar un googleCalendarEventId. Al crear o actualizar una cita, los cambios se envían al Google Calendar conectado, para que los veterinarios vean los horarios de la clínica junto con sus calendarios personales.

Notificaciones Gmail

El servicio Gmail compone y envía correos automatizados para confirmaciones y recordatorios de citas, con banderas (emailSent, reminderSent) registradas en cada cita.

Modelo de datos completo

Interfaces tipadas en src/db/types.ts definen Users (roles admin, veterinarian, receptionist), Clients, Pets (8 tipos de especies), Appointments (6 tipos, 6 estados) y Settings — todo almacenado en IndexedDB con hooks de Dexie para actualizaciones reactivas de UI.

Despliegue de escritorio

npm run electron:dev ejecuta Vite + Electron en paralelo. electron:build:win produce un instalador NSIS para Windows con directorio de instalación configurable.

Proceso de desarrollo

SoftVet se entregó como v1.0 cohesiva en un solo commit grande (~17k líneas) — UI React + Vite, shell de escritorio Electron, Dexie.js para IndexedDB y APIs de Google Workspace para calendario y correo.

Arquitectura de la aplicación

  • Spec completa documentada en SPEC.md (~1,200 líneas) cubriendo páginas, modelos de datos y flujos de integración Google.
  • 7 páginas scaffolded: Dashboard, Appointments, Calendar, Clients, Pets, Settings y Login.
  • Kit UI compartido (Button, Card, Modal, DatePicker, TimePicker, Select, etc.) con Tailwind CSS y primitivos Headless UI / Radix.
  • Sidebar y header cableados con React Router 6.

Capa de datos local

  • Esquema Dexie con modelos tipados para clientes, mascotas y citas.
  • Hooks React para operaciones CRUD contra IndexedDB (registros clínicos offline-first).
  • Stores Zustand por entidad para estado de UI y actualizaciones optimistas.

Agenda y servicios Google

  • FullCalendar integrado con renderizado personalizado de bloques de cita.
  • Módulos Google OAuth 2.0, Calendar API y Gmail API con manejo centralizado de errores y refresh de tokens — ver documentación OAuth de Google.
  • Formularios para crear/editar clientes, mascotas y citas con validación.

Shell de escritorio Electron

  • Proceso principal Electron con bandeja del sistema, notificaciones y handlers IPC para funciones nativas.
  • electron:dev (Vite + Electron concurrente) y electron:build:win para instalador NSIS en Windows.
  • .env.example documentando credenciales requeridas de Google API.

Blog

recent-work

Construyendo Galena AI

Dashboard de detección de voz sintética — seis detectores ONNX detrás de un servicio FastAPI, confianza del veredicto, historial de llamadas y métricas interactivas del modelo.

Leer más →

Galena AI

Dashboard de detección de voz sintética — seis detectores ONNX vía FastAPI, confianza del veredicto, historial de llamadas y métricas interactivas.

Cómo se construyó →
border-home1