Meal Roulette App Mobile Pagination - Level 3

Your task is to build a meal roulette app that integrates with the Meal Roulette API and presents the retrieved data. Please agree with your hiring team regarding the tech stack choice.

The app should have a meal selection view and a meal details view.

Tapping on the refresh button should present a selection of the next 4 meals.

Tapping on a meal on the list should open the details view for that meal.

There should also be a way to navigate back to the list view from the details view.

When finished developing make sure to add a screen recording + executable (.apk or .app depending on the platform choice) to the repo.

Mockup

meal-roulette

API

Make sure to check with your hiring team whether you need to integrate with the GraphQL API or the REST API.

REST

Click to expand the request examples.

Get all meals

https://playground.devskills.co/api/rest/meal-roulette-app/meals

Get 4 meals starting from index 4

https://playground.devskills.co/api/rest/meal-roulette-app/meals/limit/4/offset/4

Get the meal with id 4

https://playground.devskills.co/api/rest/meal-roulette-app/meals/4

GraphQL

Click to expand the request examples.
Endpoint: https://playground.devskills.co/v1/graphql

Get all meals

query GetAllMeals {
  meal_roulette_app_meals {
    id
    title
    picture
    description
    ingredients
  }
}

Get 4 meals starting from index 4

query MealsWithOffset {
  meal_roulette_app_meals_aggregate(limit: 4, offset: 4) {
    nodes {
      id
      title
      picture
      description
      ingredients
    }
  }
}

Get the meal with id 5

query SingleMeal {
  meal_roulette_app_meals_by_pk(id: 5) {
    id
    title
    picture
    description
    ingredients
  }
}

GraphiQL Sandbox

Here you can play with the Meal Roulette GraphQL API. Start by copy-pasting an example from above.

Before you get started

If you run into a problem

Need help? Head over to our community on GitHub to get assistance.

Import boilerplate

Import a project boilerplate for your selected tech stack.

What we expect from you

  1. Use the API with the assumption that the full meal list wouldn't eventually fit the device. It's up to you to define the strategy. We want to see your approach to dealing with large data sets.
  2. Implement error handling for cases when the API cannot be reached or returns a server error.
  3. Ensure that the app remains responsive (i.e. doesn't block the UI) while the data is being loaded.
  4. Avoid duplication and extract re-usable components where it makes sense. We want to see your approach to creating a codebase that is easy to maintain.
  5. Unit test one component of choice. There is no need to test the whole app, as we only want to understand what you take into consideration when writing unit tests.
  6. Add instructions describing how to run your app locally.
  7. Make a screen recording of your working app and add the recorded screencast to the repo (see how).
  8. Upload a compiled version of the app (debug mode) to the repo. For iOS this needs to be a .app file that is build for the simulator and for Android it needs to be an apk debug file. For projects created in Flutter or React Native you can choose which platform is most convenient for you. Click here for more detailed instructions.
  9. Push your code to the implementation branch. We encourage you to commit and push your changes regularly as it's a way for us to understand your thinking process.
  10. Create a new pull request, but please do not merge it.
  11. Document the tech decisions you've made by creating a new review on your PR (see how). In particular, document how you've made your app responsive and how you've implemented server error handling.
  12. Answer the questions you get on your Pull Request.

Time estimate

About 3 hours depending on your experience level + the time to set up the project/environment (go with one of the provided boilerplates to move faster).

Also, there is no countdown. The estimate is for you to plan your time.

Authored by Rémon Helmond via DevSkills.

How was your experience? Don't hesitate to give us a shout.