Cuidado Animal · Evaluación Final Transversal

Proyecto desarrollado para la Evaluación Final Transversal de la asignatura Frontend II.

SPA React + Vite + Tailwind para la veterinaria "Cuidado Animal". Lista clientes y mascotas, muestra fichas enriquecidas vía GraphQL y una agenda diaria consumida por REST (máx. 8 citas por día). Todo es lectura; el seguimiento de pacientes se guarda solo en localStorage.

1. Características

• APIs mock: REST (/api/clinic, /api/pets/:id) y GraphQL (/graphql) con fallback automático a datos locales.
• UI: Home con métricas, agenda filtrable por fecha, vista de clientes/mascotas y ficha detallada de paciente.
• Sin login: acceso directo al panel, sin operaciones de escritura en backend.
• Calidad: ESLint, pruebas unitarias/integración (Vitest + RTL + MSW) y E2E (Cypress).

2. Arquitectura

• Estado global en Redux Toolkit (clinicSlice) con hook useClinic (clientes, mascotas, citas, seguimiento).
• Cliente REST/GraphQL en src/api/clinic.js con datos mock en src/api/mockClinic.js.
• Rutas: / (home), /agenda, /clientes, /mascota/:id, /seguimiento.
• MSW para pruebas y Cypress para flujos end-to-end.

3. Estructura del proyecto

backend/
  clinicData.js            # Datos mock compartidos
  index.js                 # REST + GraphQL mock (Express + Apollo Server)

frontend/
  src/api/clinic.js        # Cliente REST/GraphQL con fallback mock
  src/context/ClinicContext.jsx
  src/pages/               # Home, Agenda, Clientes, PetDetail, Seguimientos
  src/components/          # Navbar, AppointmentCard
  src/utils/petMedia.js
  src/mocks/               # MSW handlers/server
  src/__tests__/           # Vitest + RTL + MSW
  cypress/                 # E2E specs (clinic.cy.js)
  vite.config.js           # base /FRONTEND2-EFT/ para gh-pages

4. Instrucciones de ejecución (local)

1. Backend (puerto 4000):

   cd backend
   npm install
   npm start

   • REST: http://localhost:4000/api/clinic
   • REST detalle: http://localhost:4000/api/pets/:id
   • GraphQL: http://localhost:4000/graphql

2. Frontend (puerto 5173):

   cd frontend
   npm install
   npm run dev

   Opcional: VITE_API_URL=http://localhost:4000 si usas el backend; si no, se usan mocks locales.

5. Pruebas

• Unitarias/integración + cobertura: cd frontend && npm test
• E2E (levanta npm run dev en otra terminal): cd frontend && npm run cypress:run
• Lint: cd frontend && npm run lint

6. Despliegue (GitHub Pages)

Base configurada en /FRONTEND2-EFT/. Para publicar:

cd frontend
npm run build
npm run deploy   # gh-pages -d dist -b gh-pages

Query de ejemplo (GraphQL)

query Pet($id: ID!) {
  pet(id: $id) {
    id
    name
    species
    breed
    history
    owner { name phone email address }
    appointments { date time vet reason status }
  }
}