Cipherhub es una SPA construida con React + TypeScript + TailwindCSS y orquestada con Vite que implementa algoritmos criptográficos clásicos con una arquitectura modular, escalable y visualmente clara. Este proyecto nace de la necesidad de migrar una implementación previa en HTML/CSS/JS con mucho código boilerplate hacia un entorno más profesional que permita continuidad, portabilidad y evolución técnica.
- 🔄 Cifrado y descifrado dinámico con algoritmos como César, Vigenère y Playfair
- 🧩 Arquitectura modular con separación clara entre lógica, configuración, vistas y componentes
- 🎨 Interfaz responsiva optimizada para móviles y escritorio
- 🧠 Validación semántica en formularios con expresiones regulares y tooltips explicativos
- ⚙️ Sistema de configuración individual para cada algoritmo
- 🚀 Preparado para escalar con animaciones, temas, historial y cualquier cosa que mejore la UI/UX
| Algoritmo | Descripción |
|---|---|
| César | Desplaza letras según una clave numérica |
| Vigenère | Usa una clave alfabética para enmascarar texto |
| Playfair | Codifica un texto mediante digramas (pares de letras) utilizando una matriz 5x5 generada por clave |
src/
├── algorithms/ # Lógica de cifrado tipada y modular
├── config/ # Configuraciones por algoritmo (nombre, campos, validaciones)
├── components/ # Componentes reutilizables (formulario, layout, resultado)
├── views/ # Vistas por algoritmo
├── types/ # Tipos e interfaces compartidas
├── hooks/ # Hooks personalizados para estado y lógica
├── context/ # Contextos para manejo de estados globales de los cifrados
├── styles/ # Contiene el CSS base de Tailwind
└── App.tsx # Enrutamiento de la homepage y algoritmos
Para una documentación exhaustiva (en inglés) que cubre la arquitectura, patrones de diseño y guías de desarrollo, consulta la wiki oficial del proyecto.
git clone https://github.com/codebyhilde/cipherhub.git
cd cipherhub
npm install
npm run dev- Migración completa a React + TypeScript
- Modularización de estilos y componentes (Resuelto con la migración a TailwindCSS)
- Botón de limpieza global de inputs y resultados (Cleanup Button)
- Configuración centralizada de algoritmos
- Historial de cifrados con persistencia local
- Modo educativo con simulador visual
- Posibilidad de elegir entre varios temas (personalización visual)
Nota: este roadmap es una guía evolutiva. Es posible que algunas ideas no se cumplan al pie de la letra, pudiendo cambiar y adaptarse según el rumbo del proyecto.
Este proyecto está en constante evolución y se agradecen comentarios así como sugerencias para seguir mejorandolo. Puedes contribuir haciendo cosas como proponer nuevos algoritmos, mejoras en la UI/UX o refactorización de componentes. Saludos y gracias de antemano.