|
1 | | -# React + TypeScript + Vite |
| 1 | +# 🏨 Plataforma de Gestión de Hoteles y Reservas |
2 | 2 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | +## 📌 Descripción del Proyecto |
| 4 | +Este proyecto es una **plataforma web** desarrollada con **React y TypeScript** que permite a los usuarios **gestionar hoteles y realizar reservas**. Se diseñó con un enfoque en la administración de hoteles, habitaciones y clientes, proporcionando una interfaz intuitiva y funcional. |
4 | 5 |
|
5 | | -Currently, two official plugins are available: |
| 6 | +## 🚀 Funcionalidades Principales |
| 7 | +- Creación, edición y eliminación de hoteles. |
| 8 | +- Administración de habitaciones (precios, capacidad, estado). |
| 9 | +- Realización de reservas con validaciones detalladas. |
| 10 | +- Gestión de estados de hoteles y habitaciones (habilitar/deshabilitar). |
| 11 | +- Visualización de reservas con filtros por hotel y fecha. |
| 12 | +- Despliegue automatizado con **GitHub Actions**. |
6 | 13 |
|
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 14 | +## 🛠️ Desarrollo del Proyecto |
| 15 | +### 1️⃣ **Manejo del API con Mocks** |
| 16 | +No se desarrollaron servicios web reales para el API. En su lugar, utilizamos **MirageJS** para simular las respuestas del servidor y manejar los datos de manera local sin necesidad de un backend real. |
9 | 17 |
|
10 | | -## Expanding the ESLint configuration |
| 18 | +### 2️⃣ **Pruebas Automatizadas** |
| 19 | +Se implementaron pruebas automatizadas con **Jest** para validar la renderización básica de los componentes. **Las pruebas son sencillas**, enfocadas en verificar que los componentes se montan correctamente y que los elementos clave existen en la UI. |
11 | 20 |
|
12 | | -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: |
| 21 | +> ⚠️ **Nota**: No se realizaron pruebas avanzadas de integración o end-to-end debido a la naturaleza del proyecto. |
13 | 22 |
|
14 | | -- Configure the top-level `parserOptions` property like this: |
| 23 | +### 3️⃣ **Despliegue con GitHub Actions** |
| 24 | +El proyecto se despliega automáticamente en cada `push` o `pull request` utilizando **GitHub Actions**. Se configuró un flujo de trabajo que: |
| 25 | +- Instala dependencias. |
| 26 | +- Ejecuta las pruebas automatizadas. |
| 27 | +- Facilita la integración y la entrega continua. |
15 | 28 |
|
16 | | -```js |
17 | | -export default tseslint.config({ |
18 | | - languageOptions: { |
19 | | - // other options... |
20 | | - parserOptions: { |
21 | | - project: ['./tsconfig.node.json', './tsconfig.app.json'], |
22 | | - tsconfigRootDir: import.meta.dirname, |
23 | | - }, |
24 | | - }, |
25 | | -}) |
26 | | -``` |
| 29 | +🔗 **URL del despliegue**: [Hotel System](https://hotel-system-blue.vercel.app/) |
| 30 | + |
| 31 | +### 4️⃣ **Patrones de Diseño Implementados** |
| 32 | +Durante el desarrollo del código, aplicamos algunos patrones de diseño clave: |
| 33 | +- **Store Pattern** con Zustand para la gestión del estado global. |
| 34 | +- **Componentes Reutilizables** para la UI, como formularios y modales. |
| 35 | +- **Separación de Responsabilidades** con hooks personalizados y utilidades externas. |
| 36 | + |
| 37 | +### 5️⃣ **Envío de Correos Electrónicos** |
| 38 | +El requerimiento de enviar correos electrónicos **no se implementó** porque habría sido necesario **exponer la llave del servicio de correo**, lo cual comprometería la seguridad del sistema. Si hubiéramos implementado esta funcionalidad, habríamos optado por crear un **servicio en Express** para manejar el envío de correos desde el backend, asegurando una mejor gestión de credenciales y seguridad. |
27 | 39 |
|
28 | | -- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` |
29 | | -- Optionally add `...tseslint.configs.stylisticTypeChecked` |
30 | | -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: |
31 | | - |
32 | | -```js |
33 | | -// eslint.config.js |
34 | | -import react from 'eslint-plugin-react' |
35 | | - |
36 | | -export default tseslint.config({ |
37 | | - // Set the react version |
38 | | - settings: { react: { version: '18.3' } }, |
39 | | - plugins: { |
40 | | - // Add the react plugin |
41 | | - react, |
42 | | - }, |
43 | | - rules: { |
44 | | - // other rules... |
45 | | - // Enable its recommended rules |
46 | | - ...react.configs.recommended.rules, |
47 | | - ...react.configs['jsx-runtime'].rules, |
48 | | - }, |
49 | | -}) |
| 40 | +## 📂 Estructura del Proyecto |
50 | 41 | ``` |
| 42 | +📦 src |
| 43 | + ┣ 📂 components # Componentes reutilizables |
| 44 | + ┣ 📂 pages # Páginas principales (Home, Login, Hotels, Reservations) |
| 45 | + ┣ 📂 services # API y lógica de negocio |
| 46 | + ┣ 📂 store # Gestión de estado con Zustand |
| 47 | + ┣ 📂 types # Tipado y modelos de datos |
| 48 | + ┣ 📂 Mocks # Simulación del backend con MirageJS |
| 49 | + ┣ 📂 __tests__ # Pruebas automatizadas con Jest |
| 50 | + ┗ 📜 main.tsx # Punto de entrada de la aplicación |
| 51 | +``` |
| 52 | + |
| 53 | +## 📜 Conclusión |
| 54 | +Este proyecto demuestra el uso de **React con TypeScript** para construir una plataforma de gestión de hoteles sin necesidad de un backend real. Se implementaron **pruebas automatizadas, mocks de API y despliegue continuo** para garantizar una mejor calidad del software. Aunque no se desarrolló la funcionalidad de envío de correos electrónicos, se dejó documentado cómo podría integrarse en un futuro con una API en **Express**. |
| 55 | + |
| 56 | +> **🚀 Próximos pasos:** |
| 57 | +> - Mejorar las pruebas automatizadas con más validaciones. |
| 58 | +> - Optimizar la experiencia de usuario en el flujo de reservas. |
| 59 | +> - Implementar un backend real para manejar datos de manera persistente. |
0 commit comments