Skip to content

Instantly share code, notes, and snippets.

@cianclarke
Created July 16, 2018 18:17
Show Gist options
  • Save cianclarke/4222fe9cb3585d9ef05b845612acb4a8 to your computer and use it in GitHub Desktop.
Save cianclarke/4222fe9cb3585d9ef05b845612acb4a8 to your computer and use it in GitHub Desktop.

ServisBOT Recruitment Challenge: React & Redux Cookbook

Design a CookBook application using React and Redux. This exercise should consume ~2 hours of time - we realise you have a busy day-job, and don’t want to make unreasonable demands on your time. We want to offer the opportunity to illustrate knowledge of React & Redux with the pressure of a live coding interview. Our expectations are calibrated to this being a very short exercise.

The cookbook should be capable of storing recipes. Each recipe will consist of:

  • Ingredients
  • Preparation Steps
  • Preparation Time
  • Equipment
  • Hints & Tips related to the ingredients/equipment

All recipes which contain certain ingredients or cooking equipment should display the related hint text at the bottom of the recipe.

The React cookbook application should consist of

  • A flat list of all recipes in the system. Clicking on a recipe presents...
  • A detailed view of any given recipe.

It should be possible to support the following scenarios:

  • Listing recipes which can be cooked with gochujang & an onion in the fridge
  • Listing recipes which take less than 30 minutes to prepare
  • Listing recipes which require a rice cooker
  • Deleting recipes
    (To save time, feel free to hardcode selector params to buttons, e.g. a button which reads List recipes with Gochjujang & Onion.

The user interface of this exercise is unimportant - we are looking for:

  • Design of Redux state tree via reducers, with little duplication of state
  • Clever use of actions, selectors
  • Use of appropriate react lifecycle hooks

Make sure you:

  • Use a git repository for this exercise.
  • Use as many shortcuts to generate a react application quickly as possible (e.g. react create app)
  • Feel free to use an existing template application you’ve used before, but illustrate clearly what is boilerplate code by an initial commit
  • Your application should be run-able by a combination of npm install and npm start

A simplified recipe to use as an example follows:

Korean Tteok

Ingredients

  • 1x yellow onion
  • 1x piece ginger
  • 1 tbsp Gochujang
  • 3/4 cup white rice
  • 1 tbsp vegetable oil
  • 1 1/2 cups water

Equipment

  • Rice Cooker
  • Large Wok

Preparation Steps

  1. Peel and small dice the onion. Peel and mince the ginger. Preheat the wok with vegetable oil.
  2. Add the ginger, onion. Cook, stirring occasionally, 2 to 3 minutes, or until softened and fragrant.
  3. Add 1 1/2 cups water, and all of the rice to the rice cooker.

Useful Hints

Gochujang

Gochujang or red chili paste is a savory, sweet, and spicy fermented condiment made from chili powder, glutinous rice, meju powder, yeotgireum, and salt

Rice Cooker

A rice cooker or rice steamer is an automated kitchen appliance designed to boil or steam rice. It consists of a heat source, a cooking bowl, and a thermostat. The thermostat measures the temperature of the cooking bowl and controls the heat.

/This recipe is an abridged version of Blue Apron’s Korean Tteok, which is absolutely fantastic - try it :-)/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment