Petcare
Los dueños de mascotas buscan una plataforma digital que les permita registrar y controlar información clave sobre la salud de sus mascotas, como vacunación, alimentación, citas veterinarias y recordatorios.
Permitir a los dueños de mascotas gestionar de forma centralizada la salud y el bienestar de sus animales mediante:
- Perfiles por mascota.
- Registro de vacunaciones y visitas.
- Plan de alimentación.
- Recordatorios automáticos para eventos médicos y nutricionales.
- Registro e inicio de sesión con correo y contraseña.
- Recuperación de contraseña.
- Crear, editar y eliminar perfiles de mascotas.
- Campos: nombre, especie, raza, edad, peso, foto.
- Cargar información de vacunación, desparasitación y visitas al veterinario.
- Adjuntar documentos o imágenes (opcional).
- Registrar comidas o dietas.
- Recordatorios de horarios de alimentación.
- Sistema de alertas por correo o notificación in-app.
- Calendario de eventos próximos.
- Vista general con resumen del estado de salud, próximas vacunas y alertas activas.
- Usabilidad: interfaz intuitiva y mobile-first.
- Escalabilidad: preparada para futuras funcionalidades (actividad física, integración con wearables, etc.).
- Seguridad: cifrado de contraseñas y validación de datos.
- Performance: tiempos de respuesta ágiles incluso con múltiples registros.
- Ficha de producto / flujo UX con pantallas clave (registro, perfil mascota, formulario de evento, calendario, dashboard).
- API contract: lista de endpoints con ejemplos de request/response.
- Prototipo interactivo o demo funcional: registro → crear mascota → añadir vacuna → ver recordatorio.
Este proyecto frontend está construido con las siguientes tecnologías clave:
- React: Biblioteca de JavaScript para construir interfaces de usuario.
- Vite: Herramienta de construcción rápida para proyectos web.
- React Router DOM: Para la navegación y el enrutamiento dentro de la aplicación.
- CSS Modules: Para encapsular estilos CSS a nivel de componente.
- BEM Naming Convention: Metodología para nombrar clases CSS de forma organizada y escalable.
El backend (API) utiliza tecnologías como Express.js, PostgreSQL (con Prisma ORM), JWT para autenticación, Cloudinary para almacenamiento de archivos, y Zod para validación de datos.
La estructura del proyecto frontend sigue una organización modular para mejorar la mantenibilidad y escalabilidad. Para una descripción detallada, consulta:
Principales directorios:
src/pages/: Componentes que representan las vistas principales (rutas).src/layouts/: Componentes que definen la estructura general de las páginas (ej. cabeceras, pies de página).src/components/: Componentes reutilizables de UI (botones, modales, etc.).src/services/: Módulos para interactuar con la API del backend.src/styles/: Estilos globales y variables CSS.src/assets/: Archivos estáticos como imágenes e iconos.
Se utiliza una combinación de CSS Modules y la metodología BEM (Block Element Modifier) para la gestión de estilos. Esto asegura que los estilos sean scoped a cada componente y que la nomenclatura de clases sea clara y consistente.
Para más detalles sobre la implementación de BEM, consulta:
Las variables CSS globales se definen en src/styles/globals.css para mantener una paleta de colores y tipografías consistentes.
Sigue estos pasos para configurar y ejecutar el proyecto localmente:
-
Clona el repositorio (si aún no lo has hecho):
git clone <URL_DEL_REPOSITORIO> cd PetHealthTracker-WebApp-Frontend/frontend
-
Instala las dependencias:
npm install
-
Inicia el servidor de desarrollo:
npm run dev
La aplicación estará disponible en
http://localhost:5173/.
La API del backend cuenta con una documentación exhaustiva que detalla todos los endpoints, sus métodos, parámetros de request, cuerpos de respuesta, códigos de estado HTTP y flujos de trabajo comunes.
Puedes encontrar la documentación completa de la API aquí:
Además, la API expone una interfaz interactiva de Swagger UI en http://localhost:3000/api/doc (asumiendo que el backend está corriendo en el puerto 3000) para explorar y probar los endpoints.
Última actualización: Diciembre 23, 2025 Versión Frontend: 1.0.0 Contacto: [Agregar información de contacto del equipo]