{"id":30027776,"url":"https://github.com/arturocarrillojimenez/stylehub-front-angular","last_synced_at":"2026-04-04T13:39:39.119Z","repository":{"id":285383434,"uuid":"957885901","full_name":"ArturoCarrilloJimenez/StyleHub-Front-Angular","owner":"ArturoCarrilloJimenez","description":"StyleHub-Front-Angular es el frontend de un e-commerce de moda desarrollado con Angular, diseñado para ofrecer una experiencia de compra moderna y responsiva. La aplicación está desplegada en https://stylehub-bgor.onrender.com/ y se apoya en Tailwind CSS y Daisy UI para garantizar una interfaz estética y ligera.","archived":false,"fork":false,"pushed_at":"2025-06-20T11:25:57.000Z","size":7208,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-20T12:32:44.469Z","etag":null,"topics":["angular","cd-ci","daisyui","docker","node","render","tailwindcss"],"latest_commit_sha":null,"homepage":"https://stylehub-bgor.onrender.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArturoCarrilloJimenez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-03-31T09:53:30.000Z","updated_at":"2025-06-20T11:26:00.000Z","dependencies_parsed_at":"2025-06-20T12:23:31.274Z","dependency_job_id":"5656d828-ca79-4028-921e-a4a570ded479","html_url":"https://github.com/ArturoCarrilloJimenez/StyleHub-Front-Angular","commit_stats":null,"previous_names":["arturocarrillojimenez/stylehub-front-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ArturoCarrilloJimenez/StyleHub-Front-Angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArturoCarrilloJimenez%2FStyleHub-Front-Angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArturoCarrilloJimenez%2FStyleHub-Front-Angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArturoCarrilloJimenez%2FStyleHub-Front-Angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArturoCarrilloJimenez%2FStyleHub-Front-Angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArturoCarrilloJimenez","download_url":"https://codeload.github.com/ArturoCarrilloJimenez/StyleHub-Front-Angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArturoCarrilloJimenez%2FStyleHub-Front-Angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269093029,"owners_count":24358580,"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","status":"online","status_checked_at":"2025-08-06T02:00:09.910Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","cd-ci","daisyui","docker","node","render","tailwindcss"],"created_at":"2025-08-06T13:56:55.064Z","updated_at":"2026-04-04T13:39:39.073Z","avatar_url":"https://github.com/ArturoCarrilloJimenez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ccenter\u003e\n\u003ch1\u003eStyleHub\u003c/h1\u003e\n\n![Captura de pantalla de StyleHub](https://raw.githubusercontent.com/ArturoCarrilloJimenez/StyleHub-Front-Angular/master/images/portada.png)  \n\u003c/center\u003e\n\n\n## Descripción\n\n**StyleHub-Front-Angular** es el frontend de un e-commerce de moda desarrollado con **Angular**, diseñado para ofrecer una experiencia de compra moderna y responsiva. La aplicación está desplegada en [https://stylehub-bgor.onrender.com/](https://stylehub-bgor.onrender.com/) y se apoya en **Tailwind CSS** y **Daisy UI** para garantizar una interfaz estética y ligera.\n\nEl proyecto surgió como parte de un trabajo de grado superior y actualmente utiliza el **stack MEAN** que incluye también **Docker** y **Nginx** para servir los archivos estáticos.\n\n## Tabla de contenidos\n\n1. [Tecnologías principales](#tecnologías-principales)  \n2. [Vista previa](#vista-previa)  \n3. [Requisitos previos](#requisitos-previos)  \n4. [Instalación y ejecución en desarrollo](#instalación-y-ejecución-en-desarrollo)  \n5. [Construcción para producción](#construcción-para-producción)  \n6. [Ejecutar con Docker](#ejecutar-con-docker)  \n7. [Configuración de Nginx](#configuración-de-nginx)  \n8. [Estructura del proyecto](#estructura-del-proyecto)  \nAngular 9. [Guía para contribuir](#guía-para-contribuir)  \n10. [Licencia](#licencia)  \n11. [Contacto](#contacto)  \n\n---\n\n## Tecnologías principales\n\n- **(versión 19)**: Framework de Google que proporciona un sistema de componentes, inyección de dependencias y un robusto ecosistema de pruebas .  \n- **TypeScript**: Se emplea tipado estático para mejorar la mantenibilidad y detección temprana de errores en tiempo de compilación.  \n- **Tailwind CSS**: Framework de utilidades que permite aplicar estilos directamente en clases HTML, reduciendo el peso del CSS en producción .  \n- **Daisy UI**: Complemento para Tailwind que brinda componentes predefinidos (botones, tarjetas, formularios, etc.) y soporte para temas (claro/oscuro) .  \n- **Node.js**: Entorno de ejecución y gestor de paquetes requeridos para instalar dependencias y ejecutar scripts de Angular.  \n- **Docker**: Utilizado para contenerizar la aplicación en un contenedor ligero basado en **Node.js** durante el build y en **Nginx** para servir contenido estático en producción.\n- **CI/CD (GitHub Actions)**: Configurado para automatizar las pruebas, linting y despliegue en **Render.com**.  \n\n---\n\n## Vista previa\n\n![Captura de pantalla de StyleHub](https://raw.githubusercontent.com/ArturoCarrilloJimenez/StyleHub-Front-Angular/master/images/home.png) \n*(Captura de la página principal)*\n\n![Captura de pantalla de StyleHub](https://raw.githubusercontent.com/ArturoCarrilloJimenez/StyleHub-Front-Angular/master/images/product-image.png) \n*(Captura de la página de productos*\n\n![Captura de pantalla de StyleHub](https://raw.githubusercontent.com/ArturoCarrilloJimenez/StyleHub-Front-Angular/master/images/login.png) \n*(Captura del login)*\n\nPuedes acceder a la demo en vivo en:  \n\u003e [https://stylehub-bgor.onrender.com/](https://stylehub-bgor.onrender.com/)\n\n---\n\n## Requisitos previos\n\nAntes de iniciar, asegúrate de contar con lo siguiente instalado en tu entorno de desarrollo:\n\n1. **Node.js** y **npm**  \n2. **Angular CLI** (instalable globalmente con `npm install -g @angular/cli`)\n3. **Docker** (opcional, si vas a ejecutar la aplicación mediante contenedores) \n4. Una versión moderna de **Git** para clonar el repositorio\n\n---\n\n## Instalación y ejecución en desarrollo\n\n1. **Clonar el repositorio**  \n   ```bash\n   git clone https://github.com/ArturoCarrilloJimenez/StyleHub-Front-Angular.git\n   cd StyleHub-Front-Angular\n   ```  \n\n2. **Instalar dependencias**  \n   ```bash\n   npm install\n   ```  \n   Instala Angular, Tailwind, Daisy UI, RxJS y demás librerías listadas en `package.json` \n\n3. **Levantar el servidor de desarrollo**  \n   ```bash\n   ng serve\n   ```  \n   - El servidor se ejecutará en `http://localhost:4200/` por defecto.  \n   - Cada cambio en archivos `*.ts`, `*.html` o `*.css` recargará la aplicación automáticamente (Hot Module Replacement).\n\n4. **Abrir en el navegador**  \n   Navega a `http://localhost:4200/` para interactuar con la app en modo desarrollo\n\n---\n\n## Construcción para producción\n\nPara generar los archivos optimizados listos para despliegue:\n\n```bash\nng build --configuration production\n```\n\n- El resultado se ubicará en `dist/StyleHub-Front-Angular/`.  \n- El flag `--configuration production` aplica minificación de JavaScript, extracción de CSS y Tree Shaking para reducir el peso\n\nUna vez compilada, puedes servir el contenido estático (por ejemplo, copiando `dist/StyleHub-Front-Angular/` a un servidor web) o usar el contenedor Docker que se describe a continuación.\n\n---\n\n## Ejecutar con Docker\n\nEl proyecto incluye un **Dockerfile** que define un contenedor multi-stage para build y producción:\n\n1. **Build de la imagen**  \n   ```bash\n   docker build -t stylehub-angular:latest .\n   ```  \n   - El primer stage utiliza una imagen de Node.js para compilar la aplicación Angular (`ng build`).  \n   - El segundo stage usa Nginx para servir los archivos estáticos generados.\n\n2. **Ejecutar el contenedor**  \n   ```bash\n   docker run -d -p 80:80 --name stylehub-app stylehub-angular:latest\n   ```  \n   - Expone el puerto `80` del contenedor en tu máquina local.  \n   - Accede a `http://localhost/` para visualizar la aplicación en el entorno de producción dentro de Docker\n\n3. **Dockerfile (resumen)**  \n   ```dockerfile\n   # Etapa 1: Build\n   FROM node:18-alpine AS build\n   WORKDIR /app\n   COPY package.json package-lock.json ./\n   RUN npm ci\n   COPY . .\n   RUN npm run build -- --configuration production\n\n   # Etapa 2: Servir con Nginx\n   FROM nginx:alpine\n   COPY nginx.conf /etc/nginx/nginx.conf\n   COPY --from=build /app/dist/StyleHub-Front-Angular /usr/share/nginx/html\n   ```  \n   - La configuración personalizada de Nginx (ver sección siguiente) asegura que todas las rutas Angular se resuelvan correctamente\n\n---\n\n## Configuración de Nginx\n\nEl archivo `nginx.conf` incluido está preparado para un Single Page Application (SPA) de Angular. A continuación, el contenido clave:\n\n```nginx\nserver {\n    listen 80;\n    server_name localhost;\n\n    root /usr/share/nginx/html;\n    index index.html;\n\n    location / {\n        try_files $uri $uri/ /index.html;\n    }\n\n    location ~* \\.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg)$ {\n        expires 1M;\n        access_log off;\n        add_header Cache-Control \"public\";\n    }\n\n    error_page 404 /index.html;\n}\n```\n\n- **`try_files $uri $uri/ /index.html;`** redirige todas las rutas no encontradas a `index.html`, permitiendo que Angular maneje el enrutamiento en el cliente.  \n- Puedes ajustar `server_name` y otras directivas según tu entorno de producción o dominios específicos.\n\n---\n\n## Estructura del proyecto\n\n```\nStyleHub-Front-Angular/\n├── .github/                    # Workflows de CI/CD (GitHub Actions)\n├── .vscode/                    # Configuración recomendada para VSCode\n├── images/                     # Imágenes usadas en la documentación (portada, capturas)\n├── public/                     # Archivos estáticos públicos (index.html, favicon)\n├── src/\n│   ├── app/                    # Archivo donde se encuentra todo el código de este, este esta dividido en función de lo que hace (store, admin, auth...)\n│   ├── environments/           # Variables de entorno (dev, prod)variables)\n│   └── main.ts\n├── .editorconfig               # Estándares de formato\n├── .gitignore                  # Archivos y carpetas ignorados por Git\n├── .postcssrc.json             # Configuración de PostCSS para Tailwind\n├── Dockerfile                  # Definición de contenedor multi-stage para producción\n├── LICENSE                     # Licencia GPL-3.0\n├── README.md                   # Este documento\n├── angular.json                # Configuración general de Angular\n├── nginx.conf                  # Configuración de Nginx para servir la SPA\n├── package.json                # Dependencias, scripts y metadatos del proyecto\n├── package-lock.json           # Lockfile generado por npm\n├── tsconfig.json               # Configuración global de TypeScript\n├── tsconfig.app.json           # Ajustes de TS para la aplicación\n├── tsconfig.spec.json          # Ajustes de TS para pruebas\n└── todo                         # Lista de tareas pendientes del proyecto\n```\n \n- **`shared/`**: Componentes genéricos reutilizables en distintas pantallas (botones personalizados, cards, inputs).  \n- **`environments/`**: Permite definir variables para entornos de desarrollo y producción (`environment.ts` / `environment.prod.ts`).  \n\n---\n\n## Guía para contribuir\n\nPara mantener la calidad y coherencia del código, siga estas pautas:\n\n1. **Configuración de linters y formateo**  \n   - El proyecto utiliza **ESLint** y **Prettier**. Antes de cada commit, ejecute:  \n     ```bash\n     npm run lint\n     npm run format:check\n     ``` \n\n2. **Hooks de pre-commit**  \n   - Está configurado un **pre-commit hook** que valida estilos y corre `npm test` para asegurar una cobertura mínima\n\n3. **Flujo de trabajo con Git**  \n   - Cree ramas temáticas siguiendo la convención:  \n     - `(feat / add)/\u003cdescripción\u003e` para nuevas funcionalidades  \n     - `fix/\u003cdescripción\u003e` para correcciones de errores  \n     - `chore/\u003cdescripción\u003e` para tareas menores o actualizaciones de dependencias  \n   - Use **Conventional Commits** en los mensajes (`feat:`, `fix:`, `docs:`, `refactor:`) para una mejor lectura del historial \n   - Abra Pull Requests dirigidos a la rama `dev`, incluyendo descripción clara de cambios, screenshots (si aplica) y cómo probar manualmente el nuevo código\n\n4. **Reporte de Issues**  \n   - Los problemas deben documentarse en la sección *Issues* del repositorio, con:  \n     - Título descriptivo  \n     - Pasos para reproducir el error o describir la mejora  \n     - Capturas de pantalla o logs (si es relevante)  \n     - Etiquetas apropiadas (`bug`, `enhancement`, `documentation`) \n\n---\n\n## Licencia\n\nEste proyecto está licenciado bajo **GPL-3.0**. Consulta el archivo [LICENSE](./LICENSE) para más detalles citeturn1view0.\n\n---\n\n## Contacto\n\n- **Autor**: Arturo Carrillo Jimenez  \n- **Sitio web / demo**: [https://stylehub-bgor.onrender.com/](https://stylehub-bgor.onrender.com/)\n- **GitHub**: [ArturoCarrilloJimenez](https://github.com/ArturoCarrilloJimenez)  \n- **LinkedIn**: [Arturo Carrillo Jimenez](https://www.linkedin.com/in/arturo-carrillo-jimenez/?originalSubdomain=es)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturocarrillojimenez%2Fstylehub-front-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farturocarrillojimenez%2Fstylehub-front-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturocarrillojimenez%2Fstylehub-front-angular/lists"}