{"id":21769662,"url":"https://github.com/haiilo/fe-coding-challenge-public","last_synced_at":"2025-10-26T15:44:56.089Z","repository":{"id":109456803,"uuid":"577899038","full_name":"haiilo/fe-coding-challenge-public","owner":"haiilo","description":"Haiilo FE coding kata","archived":false,"fork":false,"pushed_at":"2024-07-31T10:11:14.000Z","size":19001,"stargazers_count":0,"open_issues_count":3,"forks_count":24,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T07:21:14.803Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"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/haiilo.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}},"created_at":"2022-12-13T19:28:53.000Z","updated_at":"2024-07-11T07:10:31.000Z","dependencies_parsed_at":"2023-05-17T20:30:34.917Z","dependency_job_id":null,"html_url":"https://github.com/haiilo/fe-coding-challenge-public","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haiilo%2Ffe-coding-challenge-public","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haiilo%2Ffe-coding-challenge-public/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haiilo%2Ffe-coding-challenge-public/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haiilo%2Ffe-coding-challenge-public/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haiilo","download_url":"https://codeload.github.com/haiilo/fe-coding-challenge-public/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741862,"owners_count":21154393,"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":[],"created_at":"2024-11-26T14:09:29.829Z","updated_at":"2025-10-26T15:44:55.978Z","avatar_url":"https://github.com/haiilo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Products | Coding Kata\n\nWelcome to this little coding kata. Your task is to implement a small set of\nfeatures covering HTML \u0026 (S)CSS, JavaScript \u0026 Typescript as well as Angular \u0026\nRxJS. Don't worry, there is no perfect solution. Take five minutes to read\nthrough this README to get you started and know the requirements.\n\n## General setup\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli).\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The\napplication will automatically reload if you change any of the source files.\n\nThe project is in a very basic state, only consisting of the `AppComponent` and\nthe `AppModule`. Additionally, you will find a `ProductService` in `/products`\nthat you should be using for your implementation. You don't need to change its\nimplementation though. The `ProductService` exposes a single method `get()`,\nwhich returns an [RxJS](https://rxjs.dev/) Observable holding a paginated list\nof product entities.\n\n## Your task\nYour task is threefold and involves different areas of our frontend development.\n\n### HTML \u0026 CSS\nImplement a card-based layout for the product view. This is not about building\na pixel-perfect replica of the design we are handing out, but more about getting\nthe overall design right. Here are a few requirements / guidelines that you\nshould consider while building your solution:\n\n* The card displays all contents of a product:\n  - The product **image** in a 2:1 ratio on the top or a placeholder if it is\n  not available.\n  - The full product **title**.\n  - The product **description**, with a max. of three lines and an ellipsis if\n  it is longer.\n  - The inline list of product **categories**. Categories are always displayed\n  on the bottom of the card.\n* When clicking a card, the product **URL** is opened in a new tab.\n* Cards are aligned on a responsive layout with cards filling the available\nspace while always maintaining a minimum width of `16rem`.\n\nBelow you can find a screenshot and animation of the final result.\n\n![Cards](./docs/cards.png)\n\n![Responsive Cards](./docs/cards.gif)\n\n### RxJS\n\nAs of now, the current solution only displays the first page of products. A\n\"Read More\" button is already in place though. Utilize the power of RxJS to\nimplement this button and load the next page (and append it to the content)\nwhenever the user clicks it. Give the user feedback while loading data and\nhandle errors gracefully.\n\n### Angular\n\nThere is no specific Angular task, but we do expect you structure your\nimplementation into Angular modules / components / services how you see fit.\n\n## Submitting your solution\n\nYou can simply provide your solution by creating a pull request for this\nrepository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaiilo%2Ffe-coding-challenge-public","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaiilo%2Ffe-coding-challenge-public","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaiilo%2Ffe-coding-challenge-public/lists"}