🐾 Citas React Móvil

Administrador de citas veterinarias desarrollado con React Native. Este proyecto es una versión móvil del sistema de gestión de citas veterinarias, originalmente desarrollado en React con Tailwind CSS para web.

📱 Descripción

Aplicación móvil que permite gestionar citas veterinarias de manera eficiente y sencilla. Los usuarios pueden agregar, visualizar, editar y eliminar citas de sus mascotas, manteniendo un registro organizado de todas las consultas veterinarias.

✨ Características

• 📝 Crear citas: Registra nuevas citas con información detallada de la mascota
• 👀 Visualizar citas: Lista completa de todas las citas programadas
• ✏️ Editar citas: Modifica la información de citas existentes
• 🗑️ Eliminar citas: Elimina citas que ya no son necesarias
• 💾 Persistencia de datos: Las citas se mantienen almacenadas localmente
• 📱 Interfaz responsive: Diseño optimizado para dispositivos móviles

🛠️ Tecnologías Utilizadas

• React Native - Framework para desarrollo móvil
• JavaScript - Lenguaje de programación
• React Hooks - useState, useEffect para manejo de estado
• FlatList - Renderizado eficiente de listas
• StyleSheets - Estilos nativos de React Native
• AsyncStorage - Almacenamiento local de datos

📋 Prerrequisitos

Antes de comenzar, asegúrate de tener instalado:

• Node.js (versión 14 o superior)
• npm o yarn
• Expo CLI (recomendado)
• Android Studio (para emulador Android) o Xcode (para emulador iOS)
• Expo Go app (para probar en dispositivo físico)

🚀 Instalación

1. Clonar el repositorio

git clone https://github.com/BryanGallo/Citas-React-Movil.git
cd Citas-React-Movil

2. Instalar dependencias

npm install
# o
yarn install

3. Iniciar la aplicación

npm start
# o
expo start

4. Ejecutar en dispositivo/emulador

• Escanea el código QR con la app Expo Go (Android/iOS)
• Presiona a para abrir en emulador Android
• Presiona i para abrir en simulador iOS

📁 Estructura del Proyecto

Citas-React-Movil/
├── assets/              # Imágenes y recursos estáticos
├── components/          # Componentes reutilizables de React
├── helpers/             # Funciones auxiliares y utilidades
├── App.js              # Componente principal de la aplicación
├── app.json            # Configuración de Expo
├── babel.config.js     # Configuración de Babel
├── package.json        # Dependencias y scripts
└── README.md           # Documentación del proyecto

💡 Uso

1. Agregar una cita

   • Completa el formulario con los datos de la mascota
   • Incluye: nombre de la mascota, nombre del propietario, email, fecha, síntomas
   • Presiona "Agregar Cita"

2. Editar una cita

   • Toca sobre una cita existente en la lista
   • Modifica los campos necesarios
   • Guarda los cambios

3. Eliminar una cita

   • Desliza o presiona el botón de eliminar en una cita
   • Confirma la eliminación

🎨 Componentes Principales

• Formulario: Captura de datos para nuevas citas
• Cita: Muestra la información de cada cita individual
• ListadoCitas: Renderiza la lista completa de citas usando FlatList

🔄 Hooks Utilizados

• useState: Manejo del estado de las citas y formularios
• useEffect: Carga y persistencia de datos en almacenamiento local

🤝 Contribuciones

Las contribuciones son bienvenidas. Para contribuir:

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add: nueva característica')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📝 Notas de Desarrollo

Este proyecto es una adaptación móvil del proyecto original desarrollado en React para web. Se ha optimizado para dispositivos móviles utilizando componentes nativos de React Native y manteniendo la funcionalidad completa del sistema de gestión de citas.

👨‍💻 Autor

Bryan Gallo