Skip to content

Latest commit

 

History

History
79 lines (51 loc) · 2.99 KB

README.md

File metadata and controls

79 lines (51 loc) · 2.99 KB

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:

Preview

Figma Link:

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 <RecipeOfTheDay> component with maximum code re-use from the <PremiumRecipeCard>, 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