umutozd/task.md

## task.md

      
    Raw
  

              task.md
            
          
    Transparent Restaurant

In this task, you're going to create a simple web application with React.js or mobile app with React Native for interacting with a menu of a restaurant. We are providing you a simple API which you will parse and perform operations on. The required features will be listed below. You may create a new react project following guide in this link: https://reactjs.org/docs/create-a-new-react-app.html for web application.
If you like to use typescript(recommended) you may use these commands:
npx create-react-app transparent-restaurant --template typescript
cd transparent-restaurant
yarn start # or npm start
for React Native follow: https://reactnative.dev/docs/environment-setup
Description

In this restaurant, honesty is extremely promoted. So extreme, that the restaurant declares that differing quality of ingredients are used in their meals. Like that's not enough, it also allows the customers to choose the ingredients of each meal in different qualities. Each ingredient has the following quality levels:

low: the cheapest
medium: moderate
high: the most expensive

Main Features and Requirements

The restaurant owners take pride in their perspective of transparency. However, they are worried that taking orders from the customers may take too long for a handful of waiters to catch up to all customers. The minimum requirements demanded by the restaurant are as follows:


View a list of the meals with the following filtering and sorting options:

Items in the list should contain the name of the meal
Sort by name
Filter by dietary preferences (such as vegetarian or vegan, check Vegetarian and Vegan Definition for reference )


Get details of a single meal

Ingredients should be listed with their levels of quality options.
Customers should be able to choose between different levels of quality options for each ingredient.
The price and the quality of the meal should be dynamically calculated and updated when a customer chooses between different qualities of each ingredient.
Find out the highest-quality version of a meal for a given budget


Random meal selection for a given budget (aka. Kendimi şanslı hissediyorum :) ) on the meal list page.


Optional (Bonus) Features

The following requirements are optional.

Find out the highest-quality meal for a given budget (see Quality and Price Calculation)
More sorting options such as average price, you can be creative and add more sorting options
List the cheapest or most expensive versions of the meals
List the highest or lowest quality versions of the meals.

Implementation Notes

There are many points of extensions to this system, so feel free to do it your own way. You may add your own bonus features as long as the main requirements are completed. There are no restrictions in terms of the UI of your application. Feel free to be creative :)
Possible Pages

Some sample pages of the application are listed below as recommendation. You may create your application UI as you like, you don't need to stick to these sample pages.
The backend developer who created API is too lazy so some features like price calculation and filtering are not implemented. So it is up to the frontend developer to add these features. Also the API is created such a weird way therefore you need to work on it to make it useful.
1) Welcome Page

A page that welcomes the user and describes the restaurant, its methods and purposes briefly.
2) Menu Page

This page can include the list of meals. A rough sample design is shown below.

Since API does not provide filtering due to some lazy developer, you need implement this on the frontend.
3) Meal Page

This page can include the details of the meals. A rough simple design is shown below.

Error Handling

If in any case your code encounters an error, a proper error message should be displayed on the screen (an error with message Something went wrong is discouraged).
API

List Meals

GET https://apis.career.otsimo.xyz/api/restaurant/listMeals
List Ingredients

GET https://apis.career.otsimo.xyz/api/restaurant/listIngredients
Get A Menu

GET https://apis.career.otsimo.xyz/api/restaurant/get/{MENU_ID}

Example Response
curl https://apis.career.otsimo.xyz/api/restaurant/get/1

{
  "id": 1,
  "name": "Rice and chicken bowl",
  "ingredients": [
    {
      "name": "Rice",
      "groups": ["vegan", "vegetarian"],
      "options": [
        {
          "name": "Long grain white rice",
          "quality": "high",
          "price": 3,
          "per_amount": "kilogram"
        },
        {
          "name": "Medium grain brown rice",
          "quality": "medium",
          "price": 2,
          "per_amount": "kilogram"
        },
        {
          "name": "Quick cooking white rice",
          "quality": "low",
          "price": 1.5,
          "per_amount": "kilogram"
        }
      ],
      "quantity": 120,
      "quantity_type": "gram"
    },
    {
      "name": "Chicken",
      "options": [
        {
          "name": "Organic, free-range chicken",
          "quality": "high",
          "price": 10,
          "per_amount": "kilogram"
        },
        {
          "name": "Conventional chicken",
          "quality": "medium",
          "price": 7,
          "per_amount": "kilogram"
        },
        {
          "name": "Frozen chicken",
          "quality": "low",
          "price": 4,
          "per_amount": "kilogram"
        }
      ],
      "quantity": 85,
      "quantity_type": "gram"
    }
  ]
}


Vegetarian and Vegan Definition

In this system, a vegetarian meal is one that contains only vegetarian or vegan ingredients and a vegan meal is one that contains only vegan ingredients.
Quality and Price Calculation

Quality calculation is performed in the following way:

Each quality level has a corresponding score (e.g. low->10, medium->20, high->30).
The scores of each ingredient used in a meal are summed and divided to the number of ingredients to find the overall score of the meal.
This overall score represents the quality of the meal.

Price calculation is performed in the following way:

Prices of all ingredients used in the meal are summed together.
In addition, each degraded level of ingredient adds a $0.05 cost to the restaurant as it becomes harder prepare a meal with a lower-quality ingredient.

For instance, using a medium-quality ingredient results in a $0.05 extra cost while low-quality results in a $0.10 extra cost.


An example quality and price calculation:

For instance, say Rice and chicken bowl has 120 grams rice and 85 grams chicken as ingredients.
Say, low-quality rice and high-quality chicken are used, which correspond to $1.5 and $10 for a kilogram respectively.
Low-quality rice means two levels of degredation, which adds $0.10 to the overall cost.
For 120 grams rice, the cost is (120 / 1000)*1.5 = $0.18
For 85 grams chicken, the cost is (85 / 1000)*10 = $0.85
Total cost becomes 0.18 + 0.85 + 0.10 = $1.13
Overall quality of the food becomes (30 + 10) / 2 = 20 out of 30, assuming low and high quality correspond to 10 and 30 scores, respectively.


Additional Notes and Rules


Don't forget to provide a simple README file explaining how to run your code. You should also explain the features you have implemented.
You must put your implementation in a private repository on GitHub or GitLab and name it <name>-<surname>-otsimo-frontend-task-2023.
You must use React.js or React Native to create your application. Using typescript is optional but recommended.
Once you finish your implementation, you must send an e-mail informing that you've completed your task and include the link to the repository. Add all of the following collaborators to your repository depending on your platform. Add the collaborators only after you finished the task.

GitHub:

sercand
gozdecoban


GitLab:

sercand
gozdecoban