{"id":28214753,"url":"https://github.com/hvlikk/product-catalog","last_synced_at":"2025-07-20T14:05:16.987Z","repository":{"id":290095735,"uuid":"973269134","full_name":"Hvlikk/product-catalog","owner":"Hvlikk","description":"Prosty katalog produktów zbudowany w Angularze.","archived":false,"fork":false,"pushed_at":"2025-05-01T22:35:03.000Z","size":1160,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-12T01:41:15.758Z","etag":null,"topics":["angular","type-script"],"latest_commit_sha":null,"homepage":"","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/Hvlikk.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-04-26T16:19:50.000Z","updated_at":"2025-05-01T22:31:55.000Z","dependencies_parsed_at":"2025-06-12T01:35:17.299Z","dependency_job_id":"bae16039-673f-4270-a8e3-4ac3ccf20efe","html_url":"https://github.com/Hvlikk/product-catalog","commit_stats":null,"previous_names":["hvlikk/product-catalog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Hvlikk/product-catalog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hvlikk%2Fproduct-catalog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hvlikk%2Fproduct-catalog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hvlikk%2Fproduct-catalog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hvlikk%2Fproduct-catalog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hvlikk","download_url":"https://codeload.github.com/Hvlikk/product-catalog/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hvlikk%2Fproduct-catalog/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266135685,"owners_count":23881803,"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","type-script"],"created_at":"2025-05-17T21:08:18.649Z","updated_at":"2025-07-20T14:05:16.970Z","avatar_url":"https://github.com/Hvlikk.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📦 **Product Catalog App (Angular) - in development**\n\nA simple product catalog application built with Angular, demonstrating key features such as data binding, component communication, routing, API integration, and form handling.\n\n### 🎯 **Project Overview**\nThis project allows users to view, add, and delete products in a catalog. The app uses Angular's powerful features like components, services, HTTP requests, and form handling to create a dynamic and functional web application.\n\n### 🔧 **Technologies Used**\n- **Angular** (Latest Version)\n- **TypeScript**\n- **SCSS** for styling\n- **RxJS** for handling asynchronous operations\n\n### ⚙️ **Key Features**\n- **Product List**: Dynamically rendered list of products using `*ngFor` directive.\n- **Add Product**: Form-based product creation using template-driven forms with validation.\n- **Delete Product**: Event-driven product removal from the list using `@Output` and `EventEmitter`.\n- **Product Details**: View detailed information about each product via routing (`routerLink`, `ActivatedRoute`).\n- **HTTP Requests**: Fetch products from an API using `HttpClient` (`GET`, `POST`).\n- **Form Validation**: Template-driven and reactive forms with validation (required, minlength).\n- **Error Handling**: Display loading states and handle HTTP request errors.\n\n### 🛠 **Features in Detail**\n- **Component Communication**: Use of `@Input` to pass data between components and `@Output` to emit events from child to parent components.\n- **Routing \u0026 Navigation**: Simple routing with dynamic product detail pages, including a 404 redirect.\n- **Services \u0026 Dependency Injection**: `ProductService` to manage products in the app, with methods for retrieving, adding, and deleting products.\n- **API Integration**: Data is fetched from the JSONPlaceholder API (or you can replace it with a real API for production).\n- **Form Handling**: Template-driven forms for creating new products and reactive forms for future scalability.\n\n### 🚀 **How to Run the Project Locally**\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/yourusername/product-catalog-app.git\n\n\n2. Install dependencies:\n```bash\ncd product-catalog-app\nnpm install\nRun the app:\n```\n\n\n3. Run the app:\n```bash\nng serve\nOpen your browser and navigate to: http://localhost:4200/.\n```\n\n4. Open your browser and navigate to: http://localhost:4200/.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhvlikk%2Fproduct-catalog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhvlikk%2Fproduct-catalog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhvlikk%2Fproduct-catalog/lists"}