Este proyecto está orientado a comprender y aplicar los principios SOLID, una guía de buenas prácticas para escribir código más limpio, mantenible y escalable. Cada tarjeta de la aplicación representa uno de los principios
Demo del Proyecto
Tecnologías
Áreas de Estudio
Este proyecto es tu primer acercamiento práctico a React usando Vite, diseñado para aprender conceptos esenciales mientras construyes un proyecto funcional:
S — Single Responsibility Principle (SRP) Cada clase o módulo debe tener una única responsabilidad.
Es decir, debe existir por un solo motivo para cambiar.
En el proyecto se muestra cómo separar modelo, servicio, lógica y UI.
O — Open/Closed Principle (OCP) Las clases deben estar abiertas para extensión pero cerradas para modificación. El código se puede extender con nuevas funcionalidades sin cambiar lo ya existente.
L — Liskov Substitution Principle (LSP) Las clases derivadas deben poder sustituir a sus clases base sin alterar el comportamiento del sistema. Si una subclase rompe el funcionamiento esperado, no cumple LSP.
I — Interface Segregation Principle (ISP) No se deben forzar clases a implementar métodos que no usan.
Es mejor crear interfaces pequeñas y específicas, no una grande y general.
D — Dependency Inversion Principle (DIP) Las clases de alto nivel no deben depender de implementaciones concretas,
sino de abstracciones (interfaces). Esto permite intercambiar comportamientos sin cambiar el código principal.
Instalación
- Requisitos Previos
- Descargar Proyecto.
- Tener Docker y Docker Compose instalados.
- Make: Utilizado para automatizar procesos y gestionar contenedores de manera más eficiente.
- Pasos de Instalación
- Clona el repositorio desde GitHub.
- Dentro del repositorio, encontrarás un archivo Makefile que contiene los comandos necesarios para iniciar y gestionar tu aplicación.
- Usa los siguientes comandos de Make para interactuar con la aplicación:
- make init-app: Inicializa la aplicación, copiando .env, creando symlinks, levantando contenedores, instalando dependencias y levantando el servidor de desarrollo.
- make up: Levanta la aplicación y sus contenedores asociados.
- make down: Detiene los contenedores y apaga la aplicación.
- make shell: Ingresa al contenedor para interactuar directamente con el sistema en su entorno de ejecución.
- make npm-install: Instala todas las dependencias definidas en package.json.
- make npm-host: Levanta el servidor de desarrollo (npm run dev) accesible desde tu máquina local.
- makebuild-prod: Genera la versión de producción de la aplicación (npm run build) y mueve los archivos compilados a la raíz del proyecto.
- Accede a los siguientes URL:
- Aplicación Web: http://localhost:5173/
