{"id":25448020,"url":"https://github.com/pedroditersimon/angular-veggie-shop","last_synced_at":"2026-04-27T11:31:35.395Z","repository":{"id":277913816,"uuid":"933895829","full_name":"pedroditersimon/angular-veggie-shop","owner":"pedroditersimon","description":"Proyecto de práctica sobre una tienda de vegetales - Angular v16","archived":false,"fork":false,"pushed_at":"2025-03-09T15:29:19.000Z","size":2417,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-16T07:09:01.962Z","etag":null,"topics":["angular","angular16","routing","shop"],"latest_commit_sha":null,"homepage":"https://angular-veggie-shop.vercel.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/pedroditersimon.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-02-16T23:16:21.000Z","updated_at":"2025-03-09T15:29:22.000Z","dependencies_parsed_at":"2025-02-17T00:24:19.205Z","dependency_job_id":"53e4ed2e-f9d1-43f5-8738-f58ff5969836","html_url":"https://github.com/pedroditersimon/angular-veggie-shop","commit_stats":null,"previous_names":["pedroditersimon/angular-veggie-shop"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pedroditersimon/angular-veggie-shop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroditersimon%2Fangular-veggie-shop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroditersimon%2Fangular-veggie-shop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroditersimon%2Fangular-veggie-shop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroditersimon%2Fangular-veggie-shop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pedroditersimon","download_url":"https://codeload.github.com/pedroditersimon/angular-veggie-shop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedroditersimon%2Fangular-veggie-shop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32335295,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"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","angular16","routing","shop"],"created_at":"2025-02-17T19:18:32.766Z","updated_at":"2026-04-27T11:31:35.376Z","avatar_url":"https://github.com/pedroditersimon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VeggieShop\n\nProyecto de práctica sobre una tienda de vegetales, construido con Angular v16 🚀.\n\nEsta aplicación permite navegar entre diferentes vistas de productos,\nagregar artículos al carrito, cambiar entre temas, y realizar compras\nenviando los detalles por WhatsApp.\n\n## Instalación\n\nPara correr este proyecto localmente en tu máquina, sigue estos pasos:\n\n1. Necesitas Angular CLI `v16.2.16`. Si no lo tienes instalado, puedes hacerlo con el siguiente comando:\n\n   ```bash\n   npm install -g @angular/cli@16.2.16\n   ```\n\n2. Clona el repositorio:\n\n   ```bash\n   git clone https://github.com/pedroditersimon/angular-veggie-shop.git\n   ```\n\n3. Instala las dependencias:\n\n   ```bash\n   npm install\n   ```\n\n4. Corre el servidor de desarrollo:\n\n   ```bash\n   ng serve\n   ```\n\n   O con npm:\n\n   ```bash\n   npm start\n   ```\n\n5. Accede a `http://localhost:4200` para ver la aplicación.\n\n## Features y conceptos\n\nLista de features y conceptos aplicados en este proyecto:\n\n- Navegación: Rutas, redirecciones, rutas no definidas, parámetros y query params.\n- RouterData: Para el hint de home.\n- Servicios.\n- Inyección de dependencias (DI): @Injectable y providers para inyectar servicios.\n- Componentes Standalone.\n- Reactividad de componentes por medio de getters.\n- Temas: Variedad de temas con un selector.\n- Mobile responsive.\n- Mensajes Toast.\n- Variables de entorno: Leer variables de sistema y `.env`.\n- Mensajes por WhatsApp: Apertura de enlaces de chat de WhatsApp con el contenido del carrito.\n\n## TODO\n\nLista de tareas pendientes y completadas del proyecto.\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick para expandir!\u003c/summary\u003e\n\n- [x] Hacer vista Home\n- [x] Hacer vista Shop\n- [x] Usar componentes standalone\n- [x] Agregar un layout para las paginas\n- [x] Organizar el proyecto en carpetas\n- [x] Agregar servicio de vegetales\n- [x] Hacer vista de detalles de un vegetal en /shop/:id\n- [x] Agregar aspect-ratio para evitar salto de carga en las imagenes\n- [x] Agregar servicio de carrito\n- [x] Agregar indicadores de cantidad en carrito\n- [x] Mover el indicador de cantidad a una esquina de la imagen del item\n- [x] Agregar vista de carrito\n- [x] La vista carrito no se actualiza cuando los datos cambian\n- [x] Temas claro y oscuro\n- [x] Selector de temas en navbar\n- [x] Estilizar scrollbar\n- [x] Generar las opciones del selector de tema en base a `ThemeTypes`\n- [x] Las interfaces quitarles sufijos 'type'\n- [x] Añadir mobile responsive\n- [x] Utilizar el dinamic viewport para mobile\n- [x] Aumentar tamaños del carrito para mobile\n- [x] Enviar listado de carrito por whatsapp\n- [x] Configurar .env y variables de entorno\n- [x] Añadir Toasts para mostrar mensajes al usuario\n- [x] Formatear un buen mensaje de carrito para whatsapp\n- [x] Añadir en este README una lista de las features y conceptos aplicados en el proyecto\n- [x] Crear pagina con la lista de features y conceptos aplicados en el proyecto\n- [ ] Aplicar temas al toast\n- [ ] Agregar un favicon\n- [ ] Al boton de \"Mira mi github\" ponerle mi foto de perfil\n\u003c/details\u003e\n\n## Docs\n\nInvestigaciones de los temas y conceptos aplicados en este proyecto:\n\n- [Rutas y Navegación en Angular 16](./docs/Rutas%20y%20Navegacion.md)\n\n- [Servicios y DI en Angular 16](./docs/Servicios%20y%20DI.md)\n\n- [Reactividad de componentes](./docs/Reactividad%20de%20componentes.md)\n\n- [Observables](./docs/Observables.md)\n\n- [Variables de entorno en Angular v16](https://github.com/pedroditersimon/angular-env-config)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedroditersimon%2Fangular-veggie-shop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedroditersimon%2Fangular-veggie-shop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedroditersimon%2Fangular-veggie-shop/lists"}