{"id":18763326,"url":"https://github.com/eiberham/carb-manager","last_synced_at":"2026-03-19T06:15:39.928Z","repository":{"id":114971321,"uuid":"381084407","full_name":"eiberham/carb-manager","owner":"eiberham","description":"Card Component ","archived":false,"fork":false,"pushed_at":"2021-06-28T15:48:09.000Z","size":4456,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-20T19:22:28.521Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/eiberham.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":"2021-06-28T15:46:30.000Z","updated_at":"2023-03-09T04:28:24.000Z","dependencies_parsed_at":"2023-03-13T13:04:14.699Z","dependency_job_id":null,"html_url":"https://github.com/eiberham/carb-manager","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/eiberham/carb-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eiberham%2Fcarb-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eiberham%2Fcarb-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eiberham%2Fcarb-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eiberham%2Fcarb-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eiberham","download_url":"https://codeload.github.com/eiberham/carb-manager/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eiberham%2Fcarb-manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270702562,"owners_count":24630877,"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-16T02:00:11.002Z","response_time":91,"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":[],"created_at":"2024-11-07T18:25:45.565Z","updated_at":"2025-10-17T19:17:47.268Z","avatar_url":"https://github.com/eiberham.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Carb Manager Dev Assignment\n\n## Design\n\n**Card:**\n\n\u003cimg src=\".github/PremiumRecipeCard.png\" width=\"500\"\u003e\n\n**Hover:**\n\n20% opacity white fill when hovering over the card.\n\n\u003cimg src=\".github/Hover.png\" width=\"500\"\u003e\n\n**Figma Link:**\n\n[https://www.figma.com/file/Hv0bOihxG5M40ASYsFBrVR/Interview-Assignment?node-id=0%3A1](https://www.figma.com/file/Hv0bOihxG5M40ASYsFBrVR/Interview-Assignment?node-id=0%3A1)\n\n---\n\n## Assignment Requirements:\n\n### Data\n\n- Retrieve the recipe JSON data via HTTP from https://60c10ba2b8d367001755666e.mockapi.io/recipe/1\n- Transform the data if required\n- Use that data to render the `\u003cPremiumRecipeCard\u003e` component\n\n### UI\n\n- Translate the design as closely as possible to custom CSS. We've also provided hover styles for you to replicate.\n- Use SVG's for the custom icons. These can be grabbed from the Figma file.\n- Make sure the Recipe title gets truncated after 2 lines\n- The star ratings should be able to work with half-stars.\n- If a recipe duration is longer than 60 minutes, the format should be `x hr x min`\n- Add an `energy-units` prop which will take either `calories` (default) or `kilojoules`. This will determine which energy value/unit to display. 1 calorie = 4.184 kJ. The number value passed in as a prop will always represent calories, so if `kilojoules` is selected, a conversion needs to take place.\n\n### Interactions\n\n- The whole card will be clickable. Make sure that the event is working properly. You should see a \"clicked\" message in the Storybook \"actions\" tab when clicking on the component.\n- Because the whole card is clickable, the \"heart\" icon in the top right won't be interactive. Instead, it should be empty or filled in depending on a certain prop value.\n\n### Storybook\n\nCreate a Storybook story to view the component in isolation and to be able to interact with all available props.\n\nThere is a `PremiumRecipeCard.stories.js` placeholder file that you can use to get started. Take a look at the [addon-knobs](https://www.npmjs.com/package/@storybook/addon-knobs) documentation to help you get started if you are unfamiliar with Storybook.\n\n### Tests\n\nThere is a `PremiumRecipeCard.spec.js` file which you can use to write some tests. These tests are completely up to you. Try to come up with some useful test cases.\n\n**Hint:** The calorie -\u003e kilojoules conversion will be a good test case to make sure the conversion is working properly.\n\n### Other Notes\n\n- **Clone** the repo (not fork) to get started. Please don't create everything with just one commit. We would love to see how you structure your commits.\n- Don't feel like you have to stay within the placeholder files. If you want to create some helper/utility functions, go ahead and create the appropriate file/folders for that.\n- If you see any elements inside of this Recipe Card design that could be useful to re-use in other areas, feel free to split them out into their own sub components. Don't overengineer it by breaking every single element out, but there might be some that would be better off as small, re-usable components.\n- If you do decide to create sub components, bonus points for creating their own stories \u0026 tests :)\n- Macro dots\n  - Red: Carbs\n  - Blue: Protein\n  - Yellow: Fats\n- If you are unclear about something or want to run something by the team, please feel free to reach out. We like to get a sense of how you would work/collaborate on a real task.\n- Send us over the GitHub URL when you are complete so we can check it out!\n\n### Reusability\n\nKeep in mind that there may be other variations of the Recipe Card design. Take a look at this **Recipe of the Day** card design:\n\n\u003cimg src=\".github/ROTD.png\" width=\"500\"\u003e\n\nDon't build out this component (unless you have extra time), but please explain how you would build out this `\u003cRecipeOfTheDay\u003e` component with maximum code re-use from the `\u003cPremiumRecipeCard\u003e`, as they mostly share the same data props with just a tweaked design.\n\nYou can send that over to us via email/Slack when you are done with the assignment, or you can just include it in the README file, whatever works best!\n\n## Project setup\n\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n\n```\nyarn serve\n```\n\n### Run Storybook\n\n```\nyarn storybook\n```\n\n### Run your unit tests\n\n```\nyarn test:unit\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feiberham%2Fcarb-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feiberham%2Fcarb-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feiberham%2Fcarb-manager/lists"}