🔐 SecurityApp — Verificación de Código de Seguridad (React + CRA)

Aplicación web interactiva desarrollada con React para verificar y confirmar acciones sensibles mediante un código de seguridad configurable. Incluye estados de carga, manejo de intentos, mensajes de error y flujo de confirmación/eliminación.

---

🧭 Módulos / Rutas principales

• /security-verification — Flujo principal de verificación y confirmación.
• useState demo — (Opcional) Ejemplo de implementación con useState.
• useReducer demo — (Opcional) Ejemplo de implementación con useReducer.

Nota: La app no requiere enrutador; el flujo se gestiona por estados.

---

🌟 Características

• Verificación de código con retardo configurable (simulación de validación asíncrona).
• Manejo de intentos máximos y mensajes de error claros.
• Flujo completo: ingreso de código → confirmación → eliminación → reset.
• Configuración mediante variables de entorno sin exponer credenciales en código.
• Arquitectura modular con hooks, servicios y componentes reutilizables.

---

🖼️ Vista previa

(Agrega aquí una imagen o GIF de la app cuando tengas una build estable)

![Demo](./src/assets/preview.png)

---

🚀 Demo en Vivo

💡 Próximamente (deployment en progreso).

---

🛠️ Tecnologías utilizadas

• React 18 — Biblioteca para interfaces de usuario.
• Create React App — Configuración rápida para React.
• Testing Library — Pruebas de componentes.
• Web Vitals — Métricas de rendimiento.

---

📁 Estructura general del proyecto

SecurityApp/
├── .env                      # Configuración del código y parámetros
├── .env.example              # Ejemplo de variables de entorno
├── public/
│   └── index.html
└── src/
    ├── App.js               # Entrada de la app
    ├── components/
    │   ├── SecurityVerification/   # Componente principal de verificación
    │   └── common/                  # UI reutilizable (Button, Input, Spinner)
    ├── hooks/
    │   └── useSecurityVerification.js
    ├── services/
    │   └── validationService.js
    ├── utils/
    │   └── constants.js
    ├── index.js
    └── styles/

---

⚙️ Instalación y uso

Requisitos: Node.js >= 18 y npm.

1. Instalar dependencias:

   npm install

2. Iniciar servidor de desarrollo:

   npm start

   Abre http://localhost:3000 en tu navegador.

3. Construir para producción:

   npm run build

4. Ejecutar pruebas (opcional):

   npm test

---

🎯 Funcionalidades clave

• Ingreso y validación de código de seguridad configurable.
• Estados de carga y feedback de error.
• Límite de intentos máximos (evita fuerza bruta básica en UI).
• Flujo de confirmación antes de eliminar.
• Reset del proceso para reiniciar la verificación.

---

⚠️ Consideraciones y límites actuales

• Los cálculos y validaciones son locales en el navegador (sin backend).
• Las variables de entorno (REACT_APP_*) se inyectan en build.
• El código de seguridad no debe considerarse un mecanismo robusto en producción.
• Se recomienda configurar el código vía .env y evitar exponerlo públicamente.

---

🔧 Posibles mejoras

• Validar formato/longitud del código y sanitizar entrada.
• Añadir modo oscuro.
• Internacionalización (ES/EN).
• Tests unitarios e integración adicionales.
• Memoización y optimización de renders.
• Migración a TypeScript para mayor seguridad de tipos.
• Error Boundaries y manejo de excepciones.
• Analizador de bundle y mejoras de build.

---

💡 Aprendizajes

• Patrones modernos con hooks (useState, useReducer, hook personalizado).
• Separación de lógica (hooks/servicios) y presentación (componentes).
• Configuración segura con variables de entorno en React.

---

📄 Licencia

Actualmente sin licencia.
Si deseas reutilizar, puedes aplicar la licencia MIT y añadir el archivo LICENSE.

---

🤝 Contribuciones

Las contribuciones son bienvenidas:

1. Fork del repositorio.
2. Crea una rama: git checkout -b feature/mi-mejora.
3. Commit: git commit -m "feat: añade mejora X".
4. Push: git push origin feature/mi-mejora.
5. Abre un Pull Request.

---

👨‍💻 Autor

Charles Castillo (FROSTYLAN)

• 🌐 https://github.com/FROSTYLAN
• 💼 https://linkedin.com/in/charles-castillo-772968234

---

⭐ Si te resultó útil, considera dar una estrella al repositorio.
🚀 ¡Verifica, confirma y gestiona acciones sensibles con seguridad!

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify