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, ....¹
• 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 [email protected]; 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:

RecipeSearchResult

Field	Type
total_hits	Int
hits	[RecipeSearchHit]

RecipeSearchHit

Field	Type
recipe	Recipe
score	Decimal

Recipe

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

RecipeIngredientSection

Field	Type
component	String
ingredients	[String]

RecipeMethodSection

Field	Type
component	String
steps	[String]

Media

Field	Type
alt	String
caption	String
content_type	String
height	Int
master_uri	String
optimised	Boolean
tags	[String]
uri	String
width	Int

---

¹ Much as I might like to see these, they're not appropriate for this test.