Recipe App
We'd like a very simple mobile app for using our recipes. It should allow users to search for recipes and view them.
Essential requirements
- Built using React Native and modern JavaScript. Do not use ClojureScript, Dart, Elm, F#/Fable, Go, ....1
- Works on both iOS and Android devices
- Makes good use of the viewport on mobiles and tablets in portrait and landscape
- Provides a simple, but responsive, recipe search using our GraphQL API (details at the end of this document)
Guidance
The goal of this test is for you to demonstrate your experience and abilities for building cross-platform mobile apps. Show us an app that's simple to maintain and behaves well on different mobile devices. We may test your app on real or emulated mobile devices, running Android, iOS or iPadOS; you needn't support smart watches!
Your app should look good, perform smoothly, and not consume gigabytes of storage on the device.
More recipes are added all the time.
Use whatever third-party modules you feel are appropriate, but be prepared to justify your choices.
Sophisticated searching, e.g. using facets, is out-of-scope; you can use whatever results the API returns from a simple text search.
Submission
Please host your submission on GitHub by forking this repository. Let me know when you're happy with it by emailing a link to richardturner@riverford.co.uk; when you do so, please give me an indication of how long you spent on the test.
Have fun!
API
Use our recipe_search
and recipe
API queries to fetch recipe information. The API uses GraphQL, and is accessible at https://next.riverford.co.uk/graphql.
The recipe
query takes a slug as its sole parameter; the recipe_search
query takes the following parameters, where q
is the search query string:
recipe_search
params
Param | Type | Default |
---|---|---|
page | Int | 1 |
page_size | Int | 100 |
q | String | - |
Relevant response types:
RecipeSearchResultField | Type |
---|---|
total_hits | Int |
hits | [RecipeSearchHit] |
Field | Type |
---|---|
recipe | Recipe |
score | Decimal |
Field | Type |
---|---|
cook_time | Duration |
ingredients | [RecipeIngredientSection] |
introduction | String |
media | [Media] |
method | [RecipeMethodSection] |
name | String |
notes | String |
prep_time | Duration |
serves | Long |
short_description | String |
slug | String |
tags | [String] |
total_time | Duration |
Field | Type |
---|---|
component | String |
ingredients | [String] |
Field | Type |
---|---|
component | String |
steps | [String] |
Field | Type |
---|---|
alt | String |
caption | String |
content_type | String |
height | Int |
master_uri | String |
optimised | Boolean |
tags | [String] |
uri | String |
width | Int |
1 Much as I might like to see these, they're not appropriate for this test.