https://github.com/gent-fella-health/cm-recipe-cards
https://github.com/gent-fella-health/cm-recipe-cards
recipe-card recipe-component vue-recipe
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/gent-fella-health/cm-recipe-cards
- Owner: gent-fella-health
- Created: 2021-09-01T18:05:29.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-11T00:12:31.000Z (almost 4 years ago)
- Last Synced: 2025-05-08T07:56:10.904Z (about 2 months ago)
- Topics: recipe-card, recipe-component, vue-recipe
- Language: JavaScript
- Homepage:
- Size: 4.11 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CM Recipe Cards
This project contains two components for vue js: `PremiumRecipeCard` and `RecipeOfTheDayCard`.
## Features
- Modules/Components organized across folders.
- Pre-configured with code quality tools: Prettier, Jest, ESLint etc.
- Axios Interceptors to handle errors from backend.
- Beautiful component like `PremiumRecipeCard` & `RecipeOfTheDayCard`.
- Vue Mixins Included.
- Unit tests for Components.
**Preview:**
**Figma Link:**
[https://www.figma.com/file/Hv0bOihxG5M40ASYsFBrVR/Interview-Assignment?node-id=0%3A1](https://www.figma.com/file/Hv0bOihxG5M40ASYsFBrVR/Interview-Assignment?node-id=0%3A1)
---
## Requirements:
### Data
- The data is served by a local HTTP server listening on `http://127.0.0.1:3000`. There are 2 endpoints:
- `http://127.0.0.1:3000/recipes` - returns recipes data. Recipes may contain energy information in `kcal` or in `kJ`. 1 `kcal` = 4.184 `kJ`.
- `http://127.0.0.1:3000/user` returns user settings. The object contains the `energyUnits` field which may be either `calories` or `kJ`. Use this field to determine user preferences for energy units display.
- Data fixtures are defined in `./server/db.js`. Do not modify them.
- The server is configured to respond with HTTP error 500 sometimes. Take it into account.
- Use that data to render a list of premium recipe cards.
### UI
- Translate the design as closely as possible to custom CSS. We've also provided hover styles for you to replicate.
- Use SVG-s for the custom icons. These can be grabbed from the Figma file.
- Make sure the Recipe title gets truncated after 2 lines
- The star ratings should be able to work with half-stars.
- If a recipe duration is longer than 60 minutes, the format should be `x hr x min`
- Make sure that energy information is displayed based on user settings (either as `calories` or `kJ`)
### Interactions
- The whole card will be clickable. Make sure that the event is working properly.
- 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.
### Tests
There 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.
**Hint:** The calorie -> kilojoules conversion will be a good test case to make sure the conversion is working properly.
### Reusability
Keep in mind that there may be other variations of the Recipe Card design. Take a look at this **Recipe of the Day** card design:
Don't build out this component (unless you have extra time), but please explain how you would build out this `` component with maximum code re-use from the ``, as they mostly share the same data props with just a tweaked design.
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development.
```
yarn serve
```
### Run your unit tests
```
yarn test:unit
```