{"id":28208831,"url":"https://github.com/darcdev/marvel-app","last_synced_at":"2026-05-09T04:31:13.404Z","repository":{"id":293471622,"uuid":"982832967","full_name":"darcdev/Marvel-App","owner":"darcdev","description":"Aplicación web de Marvel Fans","archived":false,"fork":false,"pushed_at":"2025-05-15T14:06:04.000Z","size":4354,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-15T14:31:52.003Z","etag":null,"topics":["angular","primeng","single-page-app","tailwind"],"latest_commit_sha":null,"homepage":"https://sensational-sunburst-63c910.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/darcdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-13T13:25:09.000Z","updated_at":"2025-05-15T14:06:15.000Z","dependencies_parsed_at":"2025-05-15T14:42:49.049Z","dependency_job_id":null,"html_url":"https://github.com/darcdev/Marvel-App","commit_stats":null,"previous_names":["darcdev/marvel-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/darcdev/Marvel-App","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darcdev%2FMarvel-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darcdev%2FMarvel-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darcdev%2FMarvel-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darcdev%2FMarvel-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darcdev","download_url":"https://codeload.github.com/darcdev/Marvel-App/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darcdev%2FMarvel-App/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259438816,"owners_count":22857596,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","primeng","single-page-app","tailwind"],"created_at":"2025-05-17T15:12:49.639Z","updated_at":"2026-05-09T04:31:08.377Z","avatar_url":"https://github.com/darcdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Proyecto Marvel Fans App : Prueba técnica Tecnofactory\n\n## Url de la aplicación Web  \nhttps://sensational-sunburst-63c910.netlify.app/discover\n\n## Stack Tecnológico\n\n- Angular 19.1.0: Framework de aplicaciones web single page application  \n- Node 22: Ejecución de javascript en el servidor.  \n- NGXS 19.0.0: Gestión de estado de la app  \n- PrimeNG 19.1.2: Componentes UI para Angular  \n- Tailwind CSS 4.0.6 : Framework CSS de utilerías  \n- Supabase JS 2.49.4: Backend como servicio (BaS)  \n- RxJS 7.8.0: Programación reactiva con observables  \n- TypeScript 5.7.2: Para tipar el javascript  \n- ESLint 9.15.0: Analizador estático de código (detectar errores)  \n- Prettier : Formatear código.  \n- Karma 6.4.0: Ejecutor de pruebas JavaScript  \n- Jasmine 5.6.0: Framework para pruebas unitarias  \n- Docker: empaquetar aplicación con sus dependencias.  \n\n**Nota : La aplicación es Responsive**\n\n---\n\n## Manual de Instalación – Marvel App\n\n### Requisitos\n\nSe debe tener Node.js versión 18 o superior instalado (https://nodejs.org/en)\n\n- Verifica que tengas node y la versión correcta con el comando  \n  `node -v`  \n- Asegúrate que tengas el gestor de dependencias de node (viene por defecto con Node).  \n  Si Node no lo instaló, no funcionara la instalación de paquetes, usa el comando  \n  `npm -v`\n\n### Pasos\n\n### Instalación local\n\n- Coloca el código fuente en una carpeta local  \n- Abre una terminal en esa carpeta  \n- Ejecuta `npm install` para instalar dependencias  \n- Ejecuta `ng serve` para levantar el proyecto  \n- Abre el navegador en http://localhost:4200\n\nPara ejecutar los test realizados, ejecuta `ng test` en la raíz principal del proyecto.  \nDebe aparecer las pruebas hasta el momento:\n\n### En caso de error\n\n- Si hay errores con paquetes, ejecuta:  \n  `npm cache clean --force`\n  `npm install`\n\n- Si el puerto 4200 está ocupado en tu computadora, usa:  \n  `ng serve --port 4201`\n\ny abre http://localhost:4201  \n**Nota:** coloca en `--port` un puerto que tengas libre, para evitar problemas de puertos ya usados.\n\n### Instalación con Docker\n\n1. Dentro de la carpeta del proyecto (en la raíz), ejecuta `docker build -t marvel-app .`.\n2. Luego, ejecuta `docker run -d -p 8080:80 --name marvel-container marvel-app`, para correr el contenedor donde está alojada la aplicación.\n3. Entra en tu computador a `http://localhost:8080`.\n\n---\n\n### Instalación de estático\n\n1. Ir a la carpeta de la compilación del proyecto, que contiene los archivos estáticos.\n2. Ejecutar el comando `npm run build`.\n3. Entra a la carpeta `dist` luego `marvel-app/browser`.\n4. Instalar un servidor http local, en Python o `http-server` es un paquete que sirve para correr un server local, ejecutamos el comando de acuerdo al lenguaje o librería usada y el proyecto ya debería ejecutarse sin problemas en el puerto especificado.\n\n\u003e Nota: si tienes el compilado, no necesitas entrar al `dist`, solo ingresa a la carpeta donde tienes ese paquete de archivos javascript, html y ejecuta el paso 4.\n\n\n---\n\n## Patrón de Arquitectura : Clean Architecture\n\nEl proyecto está organizado en capas para separar las responsabilidades, este patrón está orientado al dominio del negocio, y a los casos de uso que permiten cumplir las necesidades del mismo.\n\n### Core\n\nEsta capa es la base del proyecto y contiene elementos fundamentales que se usan en todo el sistema:\n\n- `base/`: Clases abstractas y bases que otros componentes van a heredar.  \n- `config/`: Configuraciones globales como URLs, constantes o variables que se usan en toda la app.  \n- `factories/`: Creadores de objetos siguiendo el patrón Factory para facilitar la instanciación.  \n- `guards/`: Protección de rutas, controlando acceso y permisos.  \n- `interceptors/`: Interceptores HTTP que manejan las peticiones y respuestas de forma centralizada.  \n- `models/`: Modelos base que otras capas extienden para sus propias necesidades.  \n- `utils/`: Funciones auxiliares y utilitarias usadas en varias partes del código.  \n- `validations/`: Sistema de validaciones centralizado para manejar errores y reglas comunes.  \n\n### Data\n\nAquí se maneja todo lo relacionado con los datos, tanto desde APIs como almacenamiento:\n\n- `interfaces/`: Contratos que definen cómo se debe interactuar con las fuentes de datos.  \n- `mappers/`: Encargados de transformar datos de las APIs a modelos que usa la aplicación.  \n- `models/`: Modelos específicos para esta capa, representando los datos tal cual vienen o se necesitan.  \n- `repositories/`: Implementaciones concretas que hacen la conexión con las fuentes de datos.  \n- `services/`: Servicios que realizan llamadas directas a APIs o manejan operaciones externas.  \n\n### Domain\n\nEsta capa contiene la lógica de negocio pura, independiente de tecnología o frameworks:\n\n- `entities/`: Los objetos principales que representan el negocio.  \n- `interfaces/`: Contratos para definir cómo debe funcionar la lógica de negocio.  \n- `usecases/`: Casos de uso que implementan reglas y procesos específicos, organizados por funcionalidad (por ejemplo, cómics, personajes o favoritos).  \n\n### Presentation\n\nAquí se maneja todo lo relacionado con la interfaz y experiencia de usuario:\n\n- `components/`: Componentes reutilizables, como botones o tarjetas.  \n- `constants/`: Valores fijos para UI, como estados o mensajes.  \n- `directives/`: Directivas personalizadas para Angular.  \n- `layouts/`: Plantillas base que forman la estructura visual, como encabezados o barras laterales.  \n- `pages/`: Componentes que representan páginas completas.  \n- `pipes/`: Transformadores que modifican datos para mostrarlos en pantalla.  \n- `services/`: Servicios específicos para la UI.  \n- `shared/`: Recursos compartidos, incluyendo componentes comunes, modelos y utilidades.\n\n---\n\n## Mejoras a la APP\n\n- Más test para cubrir más casos  \n- Patrón de diseño, command para separar responsabilidad del invocador y su operación de la vista.  \n- Mejora en la accesibilidad  \n- Optimización de imágenes  \n- Quizás, un cambio de fuente de letra?  \n- Detalles en el responsive, más avanzados.\n\n---\n\nMuchas gracias !\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarcdev%2Fmarvel-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarcdev%2Fmarvel-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarcdev%2Fmarvel-app/lists"}