RollingVet es un sistema de gestión veterinaria que hemos desarrollado para facilitar la administración de pacientes, reservas de turnos y proporcionar información relevante sobre nuestros servicios. El sistema ha sido diseñado con una interfaz intuitiva y atractiva, basada en React y react-bootstrap en el frontend, y en Node.js, Express y MongoDB en el backend.
En nuestra página principal, podrás encontrar información destacada sobre nuestra veterinaria, una lista completa de los servicios que ofrecemos, algunos productos que puedes adquirir y detalles sobre las marcas con las que colaboramos. También puedes ver comentarios de nuestros clientes satisfechos y conocer a nuestros dedicados profesionales. Además, te presentamos tres planes de servicio mensual diseñados para mascotas de diferentes edades: "Primeros Pasos" para mascotas de 0 a 5 años, "Madurando" para mascotas de 5 a 10 años y "Adultos" para mascotas mayores de 10 años. Si estás interesado en alguno de estos planes, simplemente selecciona uno y serás dirigido a un formulario donde puedes obtener más información.
Si eres un administrador, podrás acceder a un área exclusiva diseñada para ti. Aquí, encontrarás una bienvenida personalizada y detalles de la versión actual del sistema. Además, podrás visualizar de manera clara los turnos ya asignados, lo que te permitirá una gestión eficiente.
En esta área, tendrás acceso a funciones adicionales:
Mediante esta función, podrás gestionar todos los detalles de los pacientes y sus dueños. Los formularios de información de los dueños y mascotas son completos, lo que nos ayuda a ofrecer un servicio personalizado y eficiente. Puedes agregar, editar y eliminar registros según sea necesario.
Aquí podrás gestionar todos los aspectos relacionados con los turnos. Desde detalles de citas y asignación de veterinarios hasta fechas y horarios. Como nuestra veterinaria cuenta con dos veterinarios que trabajan de lunes a viernes, podrás programar turnos según su disponibilidad.
Hemos agregado algunas características adicionales para mejorar tu experiencia:
Siempre es importante conocer al equipo detrás del proyecto. En la página "Acerca de Nosotros", te presentamos a los miembros del equipo con sus fotos y nombres para que puedas conocer más sobre quiénes somos.
Hemos creado una página de error personalizada para que, en caso de que encuentres enlaces rotos, la experiencia siga siendo agradable y coherente con el diseño general del sitio.
La página de contacto te permite comunicarte con nosotros de manera fácil y conveniente. Hemos asegurado que el formulario esté completamente validado para que puedas proporcionar información sin problemas.
-
@emailjs/browser: Esta librería proporciona una forma sencilla de enviar correos electrónicos directamente desde el navegador, lo que puede ser útil para notificaciones por correo electrónico en tu aplicación.
-
Bootstrap: Bootstrap es un framework CSS ampliamente utilizado que facilita el diseño y la creación de interfaces de usuario atractivas y receptivas. Proporciona componentes preestilizados y utilidades de diseño.
-
Bootstrap Icons: Esta biblioteca proporciona un conjunto de iconos listos para usar que son compatibles con Bootstrap, lo que permite agregar fácilmente iconos a tu interfaz de usuario sin tener que buscar imágenes o SVG externos.
-
Framer Motion: Framer Motion es una biblioteca para crear animaciones fluidas y atractivas en React. Proporciona una API intuitiva para agregar animaciones y efectos de transición a tus componentes.
-
Node-sass: Node-sass es un módulo que permite compilar archivos Sass en CSS. Sass es un preprocesador CSS que agrega características como variables, anidamiento y mixins, lo que facilita la escritura y el mantenimiento del código CSS.
-
React: React es una biblioteca de JavaScript ampliamente utilizada para construir interfaces de usuario interactivas y componentes reutilizables. Permite crear aplicaciones de una sola página y aplicaciones web más complejas de manera eficiente.
-
React Bootstrap: React Bootstrap es una biblioteca que integra los componentes de Bootstrap con React. Proporciona componentes preestilizados que se pueden utilizar como componentes de React, lo que facilita la creación de interfaces coherentes.
-
React Bootstrap Icons: Similar a Bootstrap Icons, esta biblioteca proporciona iconos específicamente diseñados para trabajar con React y React Bootstrap. Simplifica la adición de iconos a tus componentes.
-
React DOM: React DOM es una biblioteca que maneja la renderización de componentes React en el navegador. Es una parte esencial de la arquitectura de React.
-
React Hook Form: React Hook Form es una biblioteca que simplifica la creación y validación de formularios en React utilizando hooks. Ayuda a gestionar el estado y la validación de los formularios de manera más eficiente.
-
React Router DOM: React Router DOM es una biblioteca que permite la navegación y la gestión de rutas en aplicaciones de React. Facilita la creación de rutas y la navegación entre diferentes vistas.
-
SweetAlert2: SweetAlert2 es una biblioteca que proporciona ventanas emergentes personalizadas y atractivas para alertas, confirmaciones y mensajes de éxito. Mejora la experiencia del usuario al presentar información importante de manera más atractiva.
-
Swiper: Swiper es una biblioteca para crear carousels y sliders interactivos en tus aplicaciones. Permite la creación de elementos deslizables con imágenes y contenido que los usuarios pueden explorar de manera intuitiva.
Sigue los siguientes pasos para configurar el proyecto en tu máquina local:
-
Clona este repositorio en tu máquina local o descarga el archivo ZIP.
-
Abre una terminal y navega hasta la carpeta raíz del proyecto.
-
Ejecuta el siguiente comando para instalar las dependencias del proyecto:
npm install
Después de haber instalado las dependencias, sigue los siguientes pasos para ejecutar el proyecto:
-
En la misma terminal, ejecuta el siguiente comando para iniciar la aplicación:
npm run dev -
Abre tu navegador web y ve a la dirección que aparece en la terminal, deberia ser algo como:
http://localhost:5173/
Puedes ingresar al link del deploy o demo del proyecto:
Estamos emocionados de presentar RollingVet y esperamos que encuentres útiles todas sus características. Si bien el proyecto principal se ha completado con éxito, siempre estamos abiertos a mejoras y nuevas ideas. ¡Gracias por ser parte de la comunidad RollingVet!