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
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 cheapestmedium
: moderatehigh
: the most expensive
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.
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.
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 :)
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.
A page that welcomes the user and describes the restaurant, its methods and purposes briefly.
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.
This page can include the details of the meals. A rough simple design is shown below.
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).
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"
}
]
}
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 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.
- For instance, using a medium-quality ingredient results in a
An example quality and price calculation:
- For instance, say
Rice and chicken bowl
has120 grams rice
and85 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 of30
, assuminglow
andhigh
quality correspond to10
and30
scores, respectively.
- 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
orReact 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:
- GitLab:
Dear applicants, please do not comment on the tasks on Gist. Instead, please discuss any concerns or feedback via email. This will help us stay organized and maintain clear communication throughout the process. Thank you for your understanding and cooperation.