ESTONIAN ENTREPRENEURSHIP UNIVERSITY OF APPLIED

SCIENCES

Software Development and Entrepreneurship

Henri Saar

RECIPES AND FOOD PLANNING WEBSITE FOR

REDUCTION IN FOOD CONSUMPTION AND FOOD
WASTE
Final paper

Supervisor: Daniil Jerjomin, MSc

Tallinn 2022
RESUME

In western countries, food consumption and food waste have become a major concern. Every
day tons of food are being thrown are thrown away, from either being spoiled, since food
has not been consumed, or from other life choices, like eating out or ordering take-out food
instead, while having food in the fridge. At the same time, consumers are becoming more
eco-conscious and are looking for more sustainable ways of living in order to reduce waste
and become more sustainable.

This project aims to develop a web-based recipe book, that allows its users to plan their
weekly meals, see the prices of recipes and food items and compare the food prices in other
stores in Estonia. The usage of this prototype application will reduce the time it takes to
make a meal plan, the cost of buying food, and help with food consumption and food waste.

This paper details the implementation of this web-based application, while using the best
practices that the author has learned, to create a platform to alleviate the problems
encountered by people seeking a practical solution. Additionally the author has made a
survey based on the results and experiences of the participants of the survey, whose results
have been shared in this thesis. The front-end of the application was built using React
framework, while the backend was built with Node.js, express.js and PostgreSQL for the
database. The author chose these software solutions for the project, due their scalability,
maintainability, portability, and authors previous experience with it.
RESÜMEE

Lääneriikides on suureks murekohaks saanud toidu tarbimine ja toidu raiskamine. Iga päev
visatakse minema tonnide viisi toitu, kuna toitu on ostetud liiga palju, pole toitu õigeaegselt
ära tarbitud või on otsustatud tellida kiirtoitu. Sama aegselt on tarbijad muutunud rohkem
keskkonnateadlikumaks ja on hakanud otsima säästlikumaid eluviise, et vähendada toidu
jäätmeid ja muuta elu planeedil keskkonnasõbralikumaks.

Projekti eesmärk on välja töötada veebipõhine retseptiraamat, mis võimaldab platvormi

kasutajatel luua oma toiduplaane, näha retseptide ja toiduainete hindu. Samuti võimaldab
praktiline lahendus kasutajatele võrrelda toitainete hindasid Eestis. Prototüüprakenduse
kasutamine vähendab söögiplaani koostamiseks kuluvat aega, toidu ostmise kulusid ning
aitab vähendada toidu tarbimist ja toidu raiskamist.

Käesolevas uurimistöös kirjeldab autor praktilise lahenduse implementeerimist, uurimistöö

tulemusi ja rakenduse rakendamist. Praktilise lahenduse loomiseks kasutas autor tarkvara
arenduse parimaid tavasid, mis ta oli õppinud, et luua platvorm mis aitaks inimesi, kes
otsivad praktilist lahendust toidu planeerimiseks. Praktiline lahenduse eessüsteem ehitati
Reacti raamistiku põhjal, taga süsteem ehitati Node.js ja express.js abil. Andmebaasiks valiti
PostgreSQL. Autor valis need tarkvaralahendused projekti jaoks nende skaleeritavuse,
hooldatavuse, teisaldatavus ja autori varasemate kogemuste tõttu.
TABLE OF CONTENTS

RESUME

RESÜMEE

TABLE OF CONTENTS

LIST OF FIGURES

ABBREVIATIONS

CHAPTER 1: INTRODUCTION AND RESEARCH GOALS

1.0 Research objectives ....................................................................................................... 8

1.1 Research objectives ....................................................................................................... 9

1.2 Problem definition ......................................................................................................... 9

1.3 Existing applications ................................................................................................... 11

1.4 Proposed system and solutions .................................................................................... 12

1.5 Type of research .......................................................................................................... 12

1.6 Research methodology ................................................................................................ 13

1.7 Structure of the paper .................................................................................................. 13

CHAPTER 2: THEORETICAL BACKGROUND

2.1 React JS ....................................................................................................................... 15

2.2 Express JS framework ................................................................................................. 16

2.3 PostreSQL.................................................................................................................... 16

2.4 System architecture...................................................................................................... 16

CHAPTER 3: RESEARCH METHODOLOGY

3.1 System analysis ........................................................................................................... 18

3.1.1 User stories ..................................................................................................... 18

3.1.2 Functional requirements ................................................................................. 19

3.1.3 Non-functional requirements .......................................................................... 19

3.2 System design and wireframes .................................................................................... 20

 3.2.1 User case diagram ........................................................................................... 23

3.3 System implementation ............................................................................................... 24

3.3.1 Frontend structure ........................................................................................... 24

3.3.2 Backend structure ........................................................................................... 26

3.3.3 Database and database schema ....................................................................... 27

3.4 Survey questions .......................................................................................................... 29

CHAPTER 4: RESULTS

4.1 User pages ................................................................................................................... 30

4.2 Administrator pages ..................................................................................................... 33

4.3 Survey results .............................................................................................................. 35

CONCLUSION ................................................................................................................ 42

REFERENCES ................................................................................................................ 44

APPENDIX ...................................................................................................................... 47
LIST OF FIGURES

Figure 1: User wireframes for Recipe page and Recipe making ....................................... 20

Figure 2: User wireframes for Landing page and Ingredient page .................................... 21

Figure 3: User wireframes for History page ...................................................................... 22

Figure 4: Admin wireframes for user page and editing ..................................................... 22

Figure 5: Use case diagram ............................................................................................... 23

Figure 6: Database Schema ............................................................................................... 28

Figure 7: Landing page ...................................................................................................... 30

Figure 8: Recipes page ...................................................................................................... 31

Figure 9: Recipe making page ........................................................................................... 31

Figure 10: New Ingredient page ........................................................................................ 32

Figure 11: Admin User page ............................................................................................. 33

Figure 12: Admin Ingredient page .................................................................................... 33

Figure 13: Admin Recipes page ........................................................................................ 34

Figure 14: Age distribution of respondents ....................................................................... 35

Figure 15: Occupational status .......................................................................................... 35

Figure 16: Martial status .................................................................................................... 36

Figure 17: Grocery planning ............................................................................................. 36

Figure 18: Where and how food is consumed ................................................................... 37

Figure 19: Food waste ....................................................................................................... 37

Figure 20: User friendliness of the application ................................................................. 38

Figure 21: Usefulness of the application ........................................................................... 38

Figure 22: Application improvements ............................................................................... 39

Figure 23: Feedback and suggestions ................................................................................ 39

ABBREVIATIONS

API - Application Programming Interface

HTTPS - Hypertext Transfer Protocol Secure

HTML - HyperText Markup Language

REST - Representational state transfer

CRUD - In computer programming crud is create, read, update, and delete

CSS - Cascading Style Sheets

SQL - Structured Query Language

 RECIPES AND FOOD PLANNING WEBSITE

CHAPTER 1: INTRODUCTION AND RESEARCH GOALS

1.0 Introduction

The problem of food waste has been ever-increasing and it is under greater attention than
ever. “The environmental, economic and social impacts of food waste and food waste are
receiving increasing attention both globally, at the level of the European Union and in
Estonia.“ (Ministry of Social Affairs, 2021). We might think that people are frugal. We
might suspect that some food goes to waste, but the reality is often different from our
suspicions. “An average household generates 2.5kg of food waste per week (51.1 kg per
person). Food loss (avoidable food waste) constitutes 36% of the total food waste
generation”. (Moora et al., 2015, 5).

Research shows that the amount of food that goes to waste is quite high. Research also shows
that the amount of food that has been going to waste, has also been increasing. “Based on
the results of the household survey, it can be said that one person generates a total of
approximately 61 kg of food waste per household per year, which is 13% more than the 2014
survey. The share of wasted food is 42% or about 26 kg per year. This is a third more than
in 2014” (Piirsalu et al., 2021, 23). This food waste points to a general lack of planning,
management skills, and the availability of tools to easily manage food consumption. “The
results of the household survey show that the amount of food waste and food waste they
generate also varies depending on the type of household and income (see also Tables 5 and
6).” (Moora et al., 2015, 6) Research indicates families with higher income and younger
people tend to generate more food waste.

This thesis aims to develop a web-based application that allows its users to better plan their
food consumption and reduce food waste, in Estonia. This practical solution also aims to
simplify the process of food planning and help reduce the cost of food. Platform users will
be able to create their recipes, choose from previously made recipes to create weekly meal
plans to manage their weekly food consumption quickly and efficiently.

8
 RECIPES AND FOOD PLANNING WEBSITE

1.1 Research objectives

Based on the research problem, the author's objective is to develop a web-based Recipe book.
In order to archive this goal, the author establishes the following objectives.

1. Research, analyze and document existing solutions.

2. Analyze and document user needs and system requirements.

3. Document and research all necessary information and software requirements for the new
practical solution.

4. Design and draw wireframes to polish the new practical solution.

5. Create a demo version of the new practical solution and let other people try it.

6. Gather feedback from the demo version participants.

7. Improve the overall usability of the system, based on the user feedback.

8. Document and draw conclusions from the user feedback.

9. Provide the users the ability to easily see and make recipes and plan their food intake.

10. Provide the users the ability to see the previous plans and costs purchasing ingredients
from two different stores in Estonia.

11. Provide Administrative tools for the system administrator, to manage the system.

1.2 Problem definition

Many problems were discovered by the author, during his search for an existing practical
solution. These problems have been gathered, listed below, and explained.

1) Too many applications

Due to modern technology sharing applications like google, apple store and the search
engines that the internet provides, it has become quite easy to find applications that would
help a person in fitness, health, and other areas. There are many applications out there that
would help you on a person's journey to becoming healthy, but there isn't an application that
would help you track all the parameters. Due to the volume of applications, it has become
harder for users to find good applications to suit their needs.

9
 RECIPES AND FOOD PLANNING WEBSITE

2) Excessive advertising.

Many businesses that develop applications, use the advertisement business model. It is
understandable that the developers of an application need earn money for their work or for
the upkeep costs of the business. While it’s understandable that there is a certain amount of
advertisement in a website or an application, too much of it will hinder the overall user
experience and push away new users.

3) Paywalls

Applications found by the author often featured functions, which were gated behind
payments, like meals plans, making of grocery shopping lists, and scanning of recipes. Many
of these features were either limited to free users or completely disabled. Some of the found
application featured a trial period, where the user could test all the functionality of the
system, but they were limited in their usage.

4) Lack of good user features

The author often noticed that browser-based application, or mobile application often lacked
needed functionality, which were often found in a competitor’s application. For example,
The Kitchn web recipe website has an easy way of sharing user’s favourite recipes, but this
feature is not present in Big Oven. This kind of a problem forces users, to use multiple
websites or look for alternative solutions.

5) A good user interface

Due to an increase of online advertisement and the increase in advertisement on online

websites and in mobile applications, number of pop-ups, side panel advertisements have
increased. This has strongly affected user experience and the design of the overall website,
often leading to a worse user interface.

6) Lack of price and nutritional information.

While most of the browser-based or mobile applications have the needed information on
how to make a recipe, they won’t tell you how much nutrition you are getting and how much
the recipe is going to cost.

10
 RECIPES AND FOOD PLANNING WEBSITE

1.3 Existing applications

1) Big oven

The Big oven is a well-known platform that enables its users to make recipes, choose from
a large base of existing recipes, and plan their weekly meals. Many of their key features are
locked behind paywalls, including weekly meal planning.

2) Delish

Delish is a fantastic resource for current recipes and information on food and entertainment.
The site as a whole focuses on current events and stories that are popular with readers, users,
and the general public. The most frustrating aspect of Delish.com is that there is no way to
filter search results effectively. Delish does include a means for you to explore categories
like supper, desserts, and drinks, but it doesn't have a mechanism for you to eliminate certain
sorts of meals from those categories (Best Company, s.a.).

3) Whisk

Whisk is an application that can be both used on mobile device or in the web browser. The
application is well made and the general overview of the application is great. Whisk allows
its users to plan their weekly meals and see nutritional information about the food that users
are consuming.

4) Yummly

The Yummly blog itself will be extremely valuable to users. Yummly Dish publishes articles
on a variety of topics, including kids and family meals, entertaining, and how-to. Yummly
Lab publishes articles about food science and cooking, as well as website updates. The
downside of the application is that if a user does not sign up through one of the ways
provided, filtration, adding new recipes aren’t possible (Best Company, s.a.).

5) The Kitchn

One of the nicest things about the Kitchn's website is that it has a wide variety of recipe
types, as well as substantial online blogs covering topics like culinary techniques, reviews
and information on the latest kitchen equipment, and a section dedicated to get-togethers.

11
 RECIPES AND FOOD PLANNING WEBSITE

While it is possible to leave comments on blog entries and recipes, the website does not have
a public forum. Visitors can ask questions of the site's specialists, but there is no free
interchange of information divided into themes, as there would be in a forum (Best
Company, s.a.).

1.4 Proposed system and solutions

The great majority of programs have already covered the most important functions or
features that user may require. This project would improve on that by offering a high-quality
service to its Estonian users. This section will go through some of the outstanding flaws and
how this system plans to improve them.

1) Price

The new system will display the recipe price as well as the cost of the ingredients, which
will be calculated based on the cost of the product and the amount utilized. This will be
beneficial to students, such as the author, or families with lower income.

2) Meal plans

Users will be able to plan their food intake, as well as see their previously made plans.

3) Adding of ingredients.

In the new practical solutions users, will be able to add new ingredients to the system, from
two supermarkets in Estonia.

4) Search and filtering options.

In the system, users will be able to search and filter for recipes and ingredients in the systems
database. Additionally. Users will be able to select between different food groups easily and
quickly, as well as narrow down the items or recipes they require. This allows users to
quickly find what they need.

1.5 Type of research

The type of research will be a practical application or a practical solution. Additionally, the
author will do a survey to further confirm the usefulness of the application. This practical

12
 RECIPES AND FOOD PLANNING WEBSITE

solution will result in a web application that the users can use to plan their food usage, reduce
food waste, and reduce food consumption.

1.6 Research methodology

The research strategy is based on planned activities and the creation of a practical solution.
Additionally, the author has made a feedback survey in Google forms for the application and
general food consumption. The results of this survey will be discussed at a later chapter. The
order of the creation is as following. Firstly, the requirements are gathered into a document.
This document will include, base software needed for the creation, database schemas,
frontend requirements, backend requirements, user stories, functional and non-functional
requirements. Once these requirements have been gathered, they will be analyzed and based
on the analysis tasks they will be formed, which is the foundation of the solution. After
analysis and task making, the author will being to wireframe the new practical solution and
the creation of the demo project can start. Once the demo project has been completed, it will
be given the users to test and give feedback about the application. The author will use this
data to improve the overall experience of the application and draw conclusions for the thesis
and the usefulness of the application.

1.7 Structure of the paper

This thesis is composed of five chapters, and it contains the following.

In the first chapter of the thesis, the author will explain the research problem, project
objectives and purpose behind the proposed system and the structure of the paper.

In the second chapter of the thesis, the author will explain the theoretical side as well as the
tools that were used to make the proposed system.

In the third chapter of the thesis, the author will describe the analysis of the project, system
implementation, the designs, the designing of the system, survey questions and their
motivation behind them.

In the fourth chapter of the thesis, the author will discuss and show the results of the project
as well as the results of the survey.

13
 RECIPES AND FOOD PLANNING WEBSITE

In the fifth or the conclusion chapter of the thesis, the author will explain the conclusions
and future developments.

14
 RECIPES AND FOOD PLANNING WEBSITE

CHAPTER 2: THEORETICAL BACKGROUND

In this chapter, the author will discuss the theoretical background of the technologies and
frameworks that will be used to create a solution.

2.1 React JS

React.js is an JavaScript library that is used to create single-page user interfaces (Meta Open
Source, s.a.). It was built by Meta Platforms, Inc, formerly known as Facebook, Inc.
Developers may use React to build massive web applications that can alter data without
reloading the page. Reacts goal is to be quick, scalable, and easy to use. It accomplishes this
by allowing the software developers to make components, which are smaller collections of
written code. These components can later be used and reused to create complex user
interfaces. (Meta Open Source, s.a.). React also allows the developer to store the data from
API points and bind them in the system, this enables the developer to quickly manipulate the
data. Due to these reasons, React was chosen for the project.

Table comparison between React and Vue.js

Vue.js React

Vue uses a virtual document object model React also uses virtual dom (ReactJS, s.a).
(VDOM) because of the sheer difference in
speed and efficiency compared to the actual
DOM (Lotanna, 2020).

“While going through this process, I noticed The documentation of React, is harder to
that the support documentation of Vue.js is read compared to Vue.js and the effort
way more “developer-friendly” than required to learn about JavaScript XML
Reacts. Also, I decided to go first with (JSX.) (Atalaia, 20202)
Vue.js due to my background knowledge in
HTML“(Atalaia, 20202).

Vue.js application programming interface ReactJS, is more flexible than because it

(API) function only run once while creating can run multiple times during the rendering
its component, making it less flexible of the component (Woka, 2021).
(Woka, 2021).

15
 RECIPES AND FOOD PLANNING WEBSITE

2.2 Express JS framework

Express is a minimal and flexible Node.js web backend application framework that provides
a robust set of features for web and mobile applications (Express.js, s.a.). Express.js is part
of many existing development process stacks like MEAN. ”MEAN stands for MongoDB,
Express.js, Angular.Js, and Node.js. All these are equally important. But the duo of
Express.js and the Node.js are the backbones of the whole technology stack.” (Gor, s.a.).
The main features of Express are robust routing, high performance, HTTP helpers, content
negotiation.

“Express provides a thin layer on top of Node.js with web application features such as basic
routing, middleware, template engine and static files serving, so the drastic I/O performance
of Node.js doesn’t get compromised.” (Yang, s.a.). The main features of Express.js allows
the developer to easily write backend code, which is needed for this project.

Express was used as the project’s main framework, due to the author’s experience previously
working with it and the advantages that it provides over other frameworks and just using
Node.js on its own.

2.3 PostgreSQL

PostgreSQL is a sophisticated, open-source object-relational database system that has a solid

reputation for stability, feature robustness, and performance after more than 30 years of
active development (PostgreSQL, s.a.). PostgreSQL has several features that can assist the
developers in the development of applications, the management of data schemas, and the
database data integrity, regardless of the size of the data. PostgreSQL is very expandable, in
addition to being free and open source (PostgreSQL, s.a.).

Due to the main features of PostgreSQL and author’s previous experience with the usage of
PostgreSQL, this database management system was chosen to be the project’s database.

2.4 System architecture

The system is composed of two main components the frontend and the backend. This
architectural style has multiple benefits. The traditional approach is to keep both frontend
and backend together turning the project into a monolith. Monoliths are simple to put up, but

16
 RECIPES AND FOOD PLANNING WEBSITE

they may soon become difficult to grow and manage. This is because scaling a single
component or piece of functionality necessitates scaling up the entire program by adding
more server capacity (Molnar, 2020). The traditional approach can lead to compromises in
the development, the readability of the project, and the scalability of the system.

„In a decoupled architecture, frontend code is separated from the backend code. The frontend
and backend code communicate, but have their own server instances. Ideally, the backend
application should only serve data via an API“ (Molnar, 2020). This architectural style
allows frontend and back code to be developed separately and allows the usage of multiple
software solutions, such as React, Express, and PostgreSQL to make a robust system.

17
 RECIPES AND FOOD PLANNING WEBSITE

CHAPTER 3: RESEARCH METHODOLOGY

The research strategy is based on planned activities and the creation of a practical solution.
The author will develop a working application based on set goals.

3.1 System analysis

This section will list all the requirements that are needed to develop the needed application.
This will be composed of user stories, which are structured sentences that express the needs
of users that are going to be part of the system. The functional requirements are based on the
user stories, these requirements describe what can be done in the system. Non-functional
requirements describe how the functions are supposed to operate. The designs, wireframes,
and user flow diagrams will give an overview of the new system. Based on the following
requirements the author can make a fully functional application, that will fulfil all
requirements.

3.1.1 User stories

1. As a user I want to make my own recipes.

2. As a user I want to add new ingredients.

3. As a user I want to make weekly meal plans

4. As a user I want to edit my profile information

5. As a user I want to see my previously made meal plans.

6. As a user I want to search for recipes.

7. As a user I want to filter ingredients based on categories.

8. As an administrator I want to see, update and delete all users.

9. As an administrator I want to see, insert, update and delete all recipes.

10. As an administrator I want to see, insert, update and delete all ingredients.

11. As an administrator I want to see, insert, update and delete all weekly meal plans.

12. As an administrator I want to see, update and delete all users.

18
 RECIPES AND FOOD PLANNING WEBSITE

3.1.2 Functional requirements

1. User must be able to log in.

2. User must be able to register an account.

3. User must be able to see the landing page.

4. User must be able to see the profile page.

5. User must be able to modify personal information.

6. User must be able to add new ingredients to the database of the system.

7. User must be able to make new recipes.

8. User must be able to add recipes to their weekly meal plan.

9. User must be able to see their previously made meal plans.

10. User must be able to search for ingredients

11. User must be able to filter ingredients

12. User must be able to search for recipes

13. User must be able to filter existing recipes.

14. Administrator must be able to log in and log out of the system

15. Administrator must have an overview page of users, recipes, and ingredients

16. Administrator must be able to update and delete users.

17. Administrator must be able to update and delete recipes.

18. Administrator must be able to update and delete ingredients.

3.1.3 Non-Functional requirements

1. The user must be able to log into the system in less than a second.

2. Search results must be displayed in less than half a second.

3. Filtering results must be displayed in less than half a second.

4. The input fields must be limited.

5. All passwords must be encrypted.

6. The user interface must be modern and intuitive.

19
 RECIPES AND FOOD PLANNING WEBSITE

3.2 System design and wireframes

In every online or app project, wireframing is a crucial communication tool. It allows all
parties concerned to go through the website's structure without being distracted by design
aspects such as colors and graphics (The Segue Creative Team, s.a.). The most important
advantage of having a wireframe is that you can always refer back to the basic design,
comments, and user flow to save time later on. Wireframes can serve as a visual blueprint
for developers to identify what changes need to be done. The wireframe also depicts the
user's interaction with the system, including the required forms, buttons, and user flow. The
wireframes were created in a web application called Invisionapp.

User and administrator wireframes can be seen in the following figures.

Figure 1: User wireframes and user flows

Source: Author, 2022

20
 RECIPES AND FOOD PLANNING WEBSITE

Figure 2: User wireframes for landing page and ingredient page

Source: Author, 2022

21
 RECIPES AND FOOD PLANNING WEBSITE

Figure 3: User wireframes for history page

Source: Author, 2022

Figure 4: Admin wireframes for users page and editing

Source: Author, 2022

22
 RECIPES AND FOOD PLANNING WEBSITE

3.2.1 User case diagram

Figure 5: Use case diagram

Source: Author, 2022

The modelling tool that was used to create this UML diagram is called Creately. This tool
was used by the author to create a use case diagram. This use case diagram depicts the
system's total interaction with its users. It is a high-level diagram that doesn't delve into all
of the system's details, but it gives everyone involved a solid overview of the system. In the
figure, we can see which functions are available to both user accounts. A named oval shape
is used to illustrate use scenarios. The actors in the process are represented by stick figures,
and the actor's engagement in the system is portrayed by a line connecting the actor and the
use case.

23
 RECIPES AND FOOD PLANNING WEBSITE

3.3 System implementation

In this section, the author will explain the implementation and the architecture of the system.
This section will be divided into three smaller sections, where the author will discuss each
part in detail. In the frontend structure, the author will explain the benefits of React and how
its main features helped this project. As well as other smaller pieces of software that were
used in front end. The Backend structure will explain the usage of the Express framework
and how its software supports the frontend. Finally, the database relationship diagram will
be shown and how everything works together in the database.

3.3.1 Frontend structure

The area of a website that the user interacts with directly is called the frontend. It's also
known as the "client-side" of the program. The navigation menu, text colours and styles,
pictures, graphs and tables, buttons, colours, and the navigation menu are all included in the
frontend. The author used other smaller libraries along with React to implement and secure
the overall software from the frontend side. These smaller libraries are called Axios and
React-bootstrap, which the author will discuss in their sections.

React components

React components are self-contained, reusable code chunks. They perform the same
operations as JavaScript functions, however, they operate independently and return HTML
(HyperText Markup Language). There are two sorts of components: Class components and
Functional components.

The table will be shown to clarify the difference between the two types of components.

Functional Components Class Components

A functional component is just a plain A class component requires you to extend

JavaScript function that accepts props as from React. Component and create a
an argument and returns a React element. render function that returns a React
element.

There is no render method used in It must have the render() method returning
functional components. HTML

24
 RECIPES AND FOOD PLANNING WEBSITE

Functional Components Functional Components

Also known as Stateless components as Also known as Stateful components

they simply accept data and display them because they implement logic and state.
in some form, and they are mainly
responsible for rendering UI.

React lifecycle methods (for example, React lifecycle methods can be used inside
componentDidMount) cannot be used in class components (for example,
functional components. componentDidMount).

Hooks can be easily used in functional Implementing hook methods inside class
components. components requires different syntax.

Constructors are not used. Constructor are used as it needs to store

state.

Table source: (“Differences between Functional Components and Class Components in

React”, 2021)

Both component styles have their own pros and cons. The component style usage will depend
upon the developer and the needs of the project. Due to authors experience with class-based
components, most of the project was written using class-based components.

Axios

The project required software to transport data between the two servers because the frontend
and backend are separated and operate on two different servers. This problem was solved
with the help of Axios, which can be used to transfer data between the system's frontend and
backend. “Axios is a promise based HTTP client for the browser and Node.js. Axios makes
it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD
operations. It can be used in plain JavaScript or with a library such as Vue or React (Bodnar,
2021).” Since this project was built using React, it worked flawlessly.

React-bootstrap

The navigation menus, buttons and the overall style are made with React bootstrap, which
is a frontend Cascading Style Sheets (CSS) framework. “A framework is a structure that
you can build software on. It serves as a foundation, so you're not starting entirely from
scratch. Frameworks are typically associated with a specific programming language and
are suited to different types of tasks (“What Is a Framework?”, 2021).” A good framework

25
 RECIPES AND FOOD PLANNING WEBSITE

will help the software developer to make the needed software faster. For the frontend
styling, buttons and other navigation options, React-bootstrap was chosen, which is a
bootstrap version suited for React needs.” Bootstrap is a giant collection of handy, reusable
bits of code written in HTML, CSS, and JavaScript. It’s also a frontend development
framework that enables developers and designers to quickly build fully responsive
websites (Ouellette, 2021).” With the usage of React and React-bootstrap, the frontend
components were successfully developed.

3.3.2 Backend structure

“In the computer world, the "backend" refers to any part of a website or software program
that users do not see. It contrasts with the frontend, which refers to a program's or website's
user interface. In programming terminology, the backend is the "data access layer," while
the frontend is the "presentation layer" (“Backend”, s.a.).” The main framework for the
backend side is Express.js. It is a minimalistic framework that allows the developer to write
application programming interface (API points). „API stands for application programming
interface, which is a set of definitions and protocols for building and integrating application
software (“What is an API, 2017).“ API points allow different services to communicate with
each other. In our project frontend and backend API points would communicate with each
other and send data between each other. Express.js allows the developer to focus on writing
routes, middleware and API points which are necessary for the applications communications.

Express middleware

Express middleware functions are functions that access to the data that is coming in from
outside. After the incoming data has been modified to the systems needs it can be sent back
with a response. This allows the frontend request to be in, with some kind of data, then the
backend side would process the request and send back the need information (Express
middleware, s.a).

Express routing

Routing refers to the way how the API endpoints respond to the frontend requests. Meaning
the developer can define unique routes and how to respond to the incoming request that has
been made on the frontend side. (Express routing, s.a).

26
 RECIPES AND FOOD PLANNING WEBSITE

Express route methods

A route method is a way to define method of what is requested. For example a get request
would send back data that was requested, a delete request would inherently carry data that
would be needed in order to delete a piece of data in the database. (Express.js, s.a).

Express route Paths.

Routes can be defined by developers in specific ways. These Route paths can be words or
with special characters like +, * or equivalent (Express.js, s.a).

Express parameters.

Route parameters, are pieces of stored that are sent together from a specific point. For
example an a request maybe sent from the frontend side to the backend with a request to get
all the information about a user. In order to process this on the backend a user identification
number would be needed, this information would be stored in the route parameter.
(Express.js, s.a).

Express response methods.

Response methods are way to end the request-response cycle. They are used to mark and
send the data back in a specific manner. (Express.js, s.a).

3.3.3 Database and database schema

The storage of data in a database is represented by a database schema, which is an abstract

design. Database schema explains the way data is organized as well as the relationships
between tables in a database. Developers create a database schema ahead of time so that they
know what components are required and how they will interact.

27
 RECIPES AND FOOD PLANNING WEBSITE

Figure 6: Database Schema

Source: Author, 2022

The database schema clearly illustrates the connections between database tables. Database
tables are connected through foreign keys. “A foreign key is a column or group of columns
in a table that acts as a constraint. The foreign key enforces that data from one column
(referencing) must exist in another column (referenced). Each value of the foreign key
column should have a corresponding value in the linked table. The referenced column can
only be a primary key or unique column (Wise Coders GmbH, s.a.).“ In total there are four
foreign key types, one to many, one to zero or one, one to many and one to one. Each foreign
key type comes with its own constrains and attributes. For our project one to many and one
to one foreign key types were used. Additionally the database has been Normalized.
“Normalization is a database design technique that reduces data redundancy and eliminates
undesirable characteristics like Insertion, Update and Deletion Anomalies. Normalization
rules divides larger tables into smaller tables and links them using relationships. The purpose

28
 RECIPES AND FOOD PLANNING WEBSITE

of Normalisation in SQL is to eliminate redundant (repetitive) data and ensure data is stored
logically.” (Peterson, 2022).

3.4 Survey questions

This research employs a quantitative research strategy. A survey was performed, using
Google forms in order to obtain direct information from users about the demo version of the
application, its usefulness and general food consumption. Additionally, it was used to gather
user feedback what should be improved next. The survey questions used in the research are
listed below.

1. What is your gender?

2. What is your age?

3. What is your occupational status?

4. What is your marital status?

5. Do you plan your grocery trips?

6. Do you cook at home or…?

7. Do you feel or know that food that you buy goes to waste?

8. Rate the user friendliness of the application.

9. Rate the usefulness of the application in food planning.

10. What should be improved the most in Cookbook application for food planning?

11. Overall feedback about the cookbook web application and suggestion?

29
 RECIPES AND FOOD PLANNING WEBSITE

CHAPTER 4: RESULTS

In this chapter that author will discuss and show the results for the project development and
the survey results. In addition, the chapter has been sub-divided into three parts, user’s pages,
administrator pages and survey results.

4.1 User pages

User landing page

This is the main page that is being shown once a user is logged in. From here the user can
navigate the system using the navigation buttons in the main navigation bar.

Figure 7: Landing Page

Source: Author, 2022

User recipes page

The recipes page where the user can add existing recipes into a new weekly meal plan. On
the right side of screen all the information is displayed about the recipe. So that the user
could easily see what they are going to be eating.

30
 RECIPES AND FOOD PLANNING WEBSITE

Figure 8: Recipes Page

Source: Author, 2022

User make recipes page

The recipes making pages allows the user to make new recipes. Ingredients can be selected
from the left side of screen, where all information is available to them. Once a user has
selected all the ingredients that he or she needs, the user can then add a recipe name and a
small description on how to make the dish.

31
 RECIPES AND FOOD PLANNING WEBSITE

Figure 9: Recipe making page

Source: Author, 2022

User add ingredient page

The add ingredient page allows the users to copy and paste in URLs from stores in Estonia,
currently only eCoop and Prisma is available to the users. After pasting in the ingredient
URL the user will add the weight of the product and select the weigh type of the product.
After clicking submit the user will be shown details about the product that they are about to
insert into the database.

Figure 10: New Ingredient Page

Source: Author, 2022

4.2 Administrator pages

Administrator users page

In the users page the administrator is able to change all the information about the users. The
systems administrator is also able to delete users as well. The administrator can quickly
search for the users in the system with the help of a search bar.

32
 RECIPES AND FOOD PLANNING WEBSITE

Figure 11: Admin User Page

Source: Author, 2022

Administrator ingredients page

In the ingredients page the administrator is able to see, change and delete all the information
that has been inserted into the ingredients table in the database. Additionally, the
administrator can search for ingredients that are in the system with the use of the search bar.

Figure 12: Admin Ingredients Page

Source: Author, 2022

33
 RECIPES AND FOOD PLANNING WEBSITE

Administrator recipes page

In the recipes page the administrator is able to see, change and delete all the information that
has been inserted into the recipes table in the database. Additionally, the administrator can
search for all the recipes that are in the system with the use of the search bar.

Figure 13: Admin Recipes Page

Source: Author, 2022

4.3 Survey results.

The finding of authors survey are described in this section. The author shared the survey and
the demo application with his friends, family and acquaintances. In total 27 participants (15
male and 12 female) took part of the survey.

The survey was done in two parts. In the first parts, users were introduced to the system and
how to use it. After an introduction of the system the users were given a week to test it and
see if it helped them at all. In the second part the participants were sent a survey and asked
to fill it based on their experience.

The results that have been listed below, show answers to survey questions, where the
participants share their the overall experience of the application, its usefulness, general food
consumption, direct user feedback and suggestions.

34
 RECIPES AND FOOD PLANNING WEBSITE

Age distribution

The age distribution of the survey participants is depicted in the figure below. The author
surveyed 27 people, the majority of whom were between the ages of 20 and 29.

Figure 14: Age distribution of respondents

Source: Author, 2022

Occupational status

Most respondents of the survey were either employed, students or living with their families

Figure 15: Occupational status

Source: Author, 2022

35
 RECIPES AND FOOD PLANNING WEBSITE

Martial status

Figure 16 shows that 57,7 % of the respondents were single, 19.2% were married and have
one child, 11.5% of the respondents were married and have two children and 11.5% are just
married.

Figure 16: Martial status

Source: Author, 2022

Survey participants who plan their grocery trips

Figure 17: Grocery planning

Source: Author, 2022

36
 RECIPES AND FOOD PLANNING WEBSITE

Survey participants preferences where and how they consume food.

Figure 18: Where or how food is consumed

Source: Author, 2022

Food waste

Figure 19: Food waste

Source: Author, 2022

37
 RECIPES AND FOOD PLANNING WEBSITE

User friendliness of the application

Figure 20: User friendliness of the application

Source: Author, 2022

Usefulness of the application

Figure 21: Usefulness of the application

Source: Author, 2022

38
 RECIPES AND FOOD PLANNING WEBSITE

Application improvements

Figure 22: Application improvements

Source: Author, 2022

Overall feedback and suggestions

Figure 23: Feedback and suggestions

Source: Author, 2022

39
 RECIPES AND FOOD PLANNING WEBSITE

Summary of the survey

To summarize the findings most survey participants found the demo version of the
application useful to them in their food planning and recipe making. This may be due the
fact that 50% out of the survey participants generally plan before going to the supermarkets.
The survey also revealed that 9 participants were students, 3 participants were un-employed
and 4 were pensioners, which may indicate that they are not earning enough money and need
to be more frugal with their lifestyle. Surprisingly the participants of the survey know that
some of their food goes to waste. This indicates the need for further research in future, how
much exactly would an practical solution like the author made has helped. While most users
found the application helpful in food planning, it doesn’t exactly say how much did it help
prevent food waste.

While the overall look of the application needs to be greatly improved before being fully
released. The survey revealed a real need for more features like prices being shown from
more supermarkets around Estonia, calendar view, adding of pictures and many other
features. These features will be developed over the course of 6 months, in authors free time.

40
 RECIPES AND FOOD PLANNING WEBSITE

CONCLUSION

The problem of food waste is a troubling issue and an ever-increasing issue. It is an issue
that the author of this thesis has struggled with as well. The author of this project has looked
for solutions online to better his living situation and not to waste food. Due to a lack of a
good solution, the author decided to build the solution that he needed.

That’s the main reason why the author chose this project in the first place. The main purpose
of this project was to create an application that allows its users to create recipes, see their
prices and help users efficiently plan their weekly meals plans. With the help of the various
software solutions the author was able to create an application that meets the requirements
that were set up in the beginning of the thesis. The solution can be found in the appendix of
the thesis, with the source code that has been posted to Github, which is a code repository.
The full application has been to Heroku, which is a cloud based hosting platform, the link to
the website can be found in the appendix.

Future Developments

The current solution is the first version of the solution. It is a project that will be improved
in the future, adding more features, in order to improve the overall functionality and the
useability of the software solution. The user experience of the current software solution was
rated quite low on the 5-point scale. To improve the overall user experience the author has
planned to enter into to talks with a designer, who would help the author implement a better
frontend design.

Calendar views

Participants of the survey and the demo project expressed their wishes to have a calendar
view, where they could see what food they have to consume each day. This is a feature that
can be developed in the near future.

Nutritional information

Some of the survey and demo project wish to see nutritional information of the ingredients.
Due technical problems and the practical solutions being in its first version, this feature had

41
 RECIPES AND FOOD PLANNING WEBSITE

not been implemented. This problem can be easily solved by entering into a partnership with
the supermarkets around Estonia.

More ingredients prices from different supermarkets

Over time more supermarkets and e store should be listed and inserted into the system, so
that the users and the author would have a wider selection of goods to choose from and get
the best price for it.

Partnership with the supermarkets in Estonia

The author wishes to keep developing the project and enter into a partnership with the
supermarket chains in Estonia or even expand it even bigger in the future. This would be a
big leap forward for the application as it would allow it to attract a bigger user base and
maybe develop into a real business.

42
 RECIPES AND FOOD PLANNING WEBSITE

REFERENCES

Ministry of Social Affairs. (2021). Sotsiaalministeeriumist. Toidujäätmete tekke

ennetamine ja toidu päästmine https://www.sm.ee/et/toidujaatmete-annetamine

Uuring: 38 protsenti Eesti inimestest viskab iga nädal toitu ära. (2021, 7 April)
https://rohe.geenius.ee/rubriik/uudis/uuring-38-protsenti-eesti-inimestest-viskab-iga-nadal-
toitu-ara/

Ministry of the Environment (2021). Keskkonnaministeerium. Toidujäätmed ja

toidujäätmete tekke vältimine https://envir.ee/ringmajandus/jaatmed/toidujaatmed

Piirsalu, E. Moora, H. Väli, K. Aro, K. Värnik, R. Lillemets, J. (2021) Toidujäätmete ja

toidukao teke Eesti toidutarneahelas Uuringu lõpparuanne. https://cdn.sei.org/wp-
content/uploads/2021/05/toidujaatmete-ja-toidukao-teke-eesti-toidutarneahelas-2021.pdf

Ministry of Social Affairs. (2021). Sotsiaalministeeriumist

https://www.sm.ee/sites/default/files/toiduabi_2p_a4_sample-02.pdf

Moora, H. Urbel-Piirsalu, E. Õunapuu, K. (2015) Toidujäätmete ja toidukao teke Eesti

kodumajapidamistes ja toitlustusasutustes https://www.sei.org/wp-
content/uploads/2017/12/sei-2015-report-food-waste-and-food-loss-in-estonian-
households-and-catering-institutions-sei-tallinn1.pdf

Green Tiger. (2021). Rohelisesttiigrist. Hoiatoitu. https://rohetiiger.ee/hoiatoitu/

Valk, J. (2021, 27 Mai). TOIDURAISKAMISE UURING Viskame toidu näol prügikasti

164 miljonit eurot. https://pealinn.ee/2021/05/27/uuring-eestis-laheb-aastas-raisku-164-
miljoni-euro-eest-toitu/

Storup, K. Mattfolk, K. Voinea, D. Jakobsen, B. Bain, M. Reverté i Casas, M. E. Oliveira,

P. (2017) Toidu raiskamise vastane võitlus: ELi võimalus parandada toiduainete tarneahela
ressursitõhusust. https://doi.org/10.2865/425821

Best Company. (s.a.). Delish. https://bestcompany.com/recipe-sites/company/delish

Best Company. (s.a.). Yummly. https://bestcompany.com/recipe-sites/company/yummly

43
 RECIPES AND FOOD PLANNING WEBSITE

Best Company. (s.a.). The Kitchn. https://bestcompany.com/recipe-sites/company/the-

kitchn

ReactJS. (s.a.). Virtual DOM and Internals. https://reactjs.org/docs/faq-internals.html

Atalaia, A. (2020, 23 January). Vue.js vs React: we built an app on both frameworks [Blog
post]. https://www.imaginarycloud.com/blog/vue-js-vs-react-an-app-on-both-frameworks/

Lotanna, N. (2020, 3 December). How the virtual DOM works in Vue.js [Blog post].
https://blog.logrocket.com/how-the-virtual-dom-works-in-vue-js/

Woka, V, F. (2021, 16 February). Vue Composition API vs. React Hooks [Blog post].
https://blog.logrocket.com/vue-composition-api-vs-react-
hooks/#vuecompositionapivsreacthooks-1

Meta Open Source. (s.a.). Projects. https://opensource.fb.com/projects/react

PostgreSQL. (s.a.). About page. https://www.postgresql.org/about/

Express.js (s.a.). Routing. https://expressjs.com/en/guide/routing.html

Express.js (s.a.). Middleware. https://expressjs.com/en/guide/using-middleware.html

Express.js (s.a.). Index page. https://expressjs.com/

Gor, C. (s.a.). Is Express JS Framework An Idea Choice For Developing Enterprise

Applications [Blog post]? https://www.esparkinfo.com/blog/express-js-framework-for-
enterprise-application.html

Yang, Ch. (s.a.). Express, Koa, Meteor, Sails.js: Four Frameworks Of The Apocalypse
[Blog post]. https://www.toptal.com/nodejs/nodejs-frameworks-comparison

Molnar, Z. (2020, 28 April). Decoupled architecture: how to modernise your frontend

[Blog post]. https://inviqa.com/blog/decoupled-architecture-how-modernise-your-frontend

The Segue Creative Team. (2016, 13 May). The Importance of Wireframing for a
Responsive Website [Blog post]. https://www.seguetech.com/the-importance-of-
wireframing-for-a-responsive-website/

44
 RECIPES AND FOOD PLANNING WEBSITE

Differences between Functional Components and Class Components in React. (2022, 16

March). https://www.geeksforgeeks.org/differences-between-functional-components-and-
class-components-in-react/

Bodnar, J. (2021, 18 October). Axios tutorial [Blog post]

https://zetcode.com/javascript/axios/

Codecademy Team (2021, 23 September). What Is a Framework [Blog post]?

https://www.codecademy.com/resources/blog/what-is-a-framework/

Ouellette, A. (2021, 27 December). What is Bootstrap: A Beginner’s Guide [Blog post]?

https://careerfoundry.com/en/blog/web-development/what-is-bootstrap-a-beginners-guide/

Backend, (s.a.). https://techterms.com/definition/backend

What is an API? (2017, 31 October). https://www.redhat.com/en/topics/api/what-are-

application-programming-interfaces

Wise Coders GmbH, (s.a.). Database Schema

https://dbschema.com/documentation/schema.html

Peterson, R. (2022, 12 February). What is Normalization in DBMS (SQL)? 1NF, 2NF,

3NF, BCNF Database with Example [Blog post]. https://www.guru99.com/database-
normalization.html

45
 RECIPES AND FOOD PLANNING WEBSITE

APPENDIX

Backend and frontend source code: https://github.com/aetham/Cookbook

Wireframes source: https://aad116252.invisionapp.com/freehand/Untitled-

lafpRSsc9?dsid_h=65e0c1e3a57bf29f4ec6b1c811aa2ab901682d42c5e44c747596654aa90a
ee7e&uid_h=47f6c125967467a7a04d4193d8b06d628d75b7c26ac83f7e8be6418bc17750b5

Link to the application website: https://cookbook-react-app.herokuapp.com/

46