A

Theme Based Project Report

on

FOOD RECIPE APPLICATION

Submitted for partial fulfilment of the requirements for the award of the degree of

BACHELOR OF ENGINEERING

in

COMPUTER SCIENCE AND ENGINEERING

By

K.Partiv sai (2451-22-733-141)

K.Surya Prabhas (2451-22-733-152)
R.Seshasai (2451-22-733-165)

Under the guidance of

B.VENKATA RAMANA
Asst . Professor

Department of CSE

MATURI VENKATA SUBBA RAO(MVSR) ENGINEERING COLLEGE

(An Autonomous Institution)
Department of Computer Science and Engineering
(Affiliated to Osmania University & Recognized by
AICTE) Nadergul, Balapur Mandal, Hyderabad – 501 510
Academic Year: 2022-2023
 MATURI VENKATA SUBBA RAO(MVSR) ENGINEERING COLLEGE
(An Autonomous Institution)
Department of Computer Science and Engineering
(Affiliated to Osmania University & Recognized by
AICTE) Nadergul, Balapur Mandal, Hyderabad – 501 510

CERTIFICATE

This is to certify that the Theme Based project work entitled “RECIPE PROCESS
APPLICATION” is a bonafide work carried out by 2451-22-733-141, 2451-22-733-152, 2451-22-
733-165 in partial fulfilment of the requirements for the award of degree of Bachelor of
Engineering in Computer Science and Engineering from Maturi Venkata Subba Rao(MVSR)
Engineering College, affiliated to OSMANIA UNIVERSITY, Hyderabad, during the Academic Year
2022-2023. under our guidance and supervision.

The results embodied in this report have not been submitted to any other university or institute for
the award of any degree or diploma.

Internal Guide Project Coodinators Head of the Department

B.Venkataramana Prof J Prasanna Kumar
Designation Professor & Head
Department of CSE Department of CSE
MVSREC. MVSREC.

External Examiner

i
 DECLARATION

This is to certify that the work reported in the present Theme Based project entitled “FOOD
RECIPE APPLICATION” is a record of bonafide work done by us in the Department of
Computer Science and Engineering, M.V.S.R. Engineering College, Osmania University. The
reports are based on the work done entirely by us and not copied from any other source.
The results embodied in this report have not been submitted to any other University or Institute
for the award of any degree or diploma to the best of our knowledge and belief.

K.Parthiv sai K.Surya prabhas R.Seshasai

(2451-22-733-141) (2451-22-733-152) (2451-22-733-165)

ii
 ACKNOWLEDGEMENT

We would like to express our sincere gratitude and indebtedness to our project guide
Mr.B.VENKATA RAMANA, Assistant Professor for his valuable suggestions and interest
throughout the course of this project.

We are also thankful to our principal Dr. G. Kanaka Durga and Prof. J Prasanna Kumar,
Professor and Head, Department of Computer Science and Engineering, MVSR Engineering
College, Hyderabad for providing excellent infrastructure and a nice atmosphere for completing
this project successfully as a part of our B.E. Degree (CSE).

We convey our heartfelt thanks to the lab staff for allowing us to use the required equipment
whenever needed.

Finally, we would like to take this opportunity to thank our family for their support through
the work. We sincerely acknowledge and thank all those who gave directly or indirectly their
support in completion of this work.

K.Parthiv sai(2451-22-733-141)
K.Surya Prabhas(2451-22-733-152)
R.Seshasai (2451-22-733-165)

iii
 DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

VISION
To impart technical education of the highest standards, producing competent and confident
engineers with an ability to use computer science knowledge to solve societal problems.

MISSION
To make the learning process exciting, stimulating and interesting.
To impart adequate fundamental knowledge and soft skills to students.
To expose students to advanced computer technologies in order to excel in engineering practices by
bringing out the creativity in students.
To develop economically feasible and socially acceptable software.

PROGRAM EDUCATIONAL OBJECTIVES (PEOs)

The Bachelor’s program in Computer Science and Engineering is aimed at preparing graduates who
will:-

PEO-1: Achieve recognition through demonstration of technical competence for successful

execution of software projects to meet customer business objectives.

PEO-2: Practice life-long learning by pursuing professional certifications, higher education or

research in the emerging areas of information processing and intelligent systems at a global level.

PEO-3: Contribute to society by understanding the impact of computing using a multidisciplinary

and ethical approach.

Program Specific Outcomes(PSOs)

PSO1: Demonstrate competence to build effective solutions for computational real-world problems
using software and hardware across multi-disciplinary domains.

PSO2: Adapt to current computing trends for meeting the industrial and societal needs through a
holistic professional development leading to pioneering careers or entrepreneurship.
COURSE OBJECTIVES

 Gain proficiency in designing user-friendly interface.

 Understand how to design an expandable architecture.
 Creating essential HTML templates for different views, including recipe list, recipe forms.

COURSE OUTCOMES

 Implement SQLite or Flask for efficient storage and retrieval of recipe data,
 Successfully create a functional Recipe Process Application.
 Allowing Users to contribute, share, and explore diverse Recipes.
 ABSTRACT

The Recipe Process Application is a web-based platform designed to streamline the management and
exploration of culinary recipes. Utilizing Flask and SQLite, the application offers essential
functionality, including the ability to view a catalog of recipes, add new recipes with title,
ingredients, and instructions, and view detailed information for each recipe. The application
prioritizes simplicity and user-friendliness, providing an intuitive interface for users to contribute,
share, and discover diverse culinary creations. Its modular design allows for potential expansion
with additional features such as user authentication, search functionalities, and advanced recipe
categorization. This application serves as a foundation for an interactive and collaborative platform
for cooking enthusiasts.

K.Parthiv Sai(2451-22-733-141)
K.Surya Prabhas(2451-22-733-152)
R.Seshasai(2451-22-733-165)

Vi
 Contents
1. INTRODUCTION.............................................................................................................................2
1.1 Problem Statement.......................................................................................................................2
1.2 Objectives....................................................................................................................................2
1.3 Scope............................................................................................................................................2
2. REQUIREMENT SPECIFICATIONS..............................................................................................3
2.1 Software Requirements................................................................................................................3
2.2 Hardware Requirements...............................................................................................................3
3. TOOLS USED...................................................................................................................................4
4. SYSTEM DESIGN...........................................................................................................................5
4.1 SYSTEM ARCHITECTURE......................................................................................................5
5. IMPLEMENTATION.........................................................................................................................6
5.1 Prerequities..................................................................................................................................6
5.2 Setting Up The Project............................................................ Error! Bookmark not defined.
5.3 Fetching Recipe Data Using API.................................................................................................6
5.4 Building the User Interface..........................................................................................................7
5.5 Displaying Recipe Results...........................................................................................................7
5.6 Enhancing User Experience.........................................................................................................7
6. RESULT AND DISCUSSIONS.........................................................................................................8
7. CONCLUSION................................................................................................................................11
REFERENCES.....................................................................................................................................12

List of Tables

Table 1:List of Tools..............................................................................................................................4

List of Figures

Figure 1:Home Page Including Quotation and Search Bar...................................................................8

Figure 2:Recipes List After Searching ............................................. Error! Bookmark not defined.
Figure 3:After clicking on Get Recipe...................................................................................................9
Figure 4:Instructions Including Ingredients...........................................................................................9
Figure 5:The video link for recipe.......................................................................................................10
 1. INTRODUCTION

1.1 Problem Statement

Develop a web-based recipe process application to address the challenges users face in managing
and accessing recipes online. The application should offer a seamless interface for users to discover,
save, and organize recipes, along with features like ingredient scaling, nutritional information, and
user-generated reviews. The goal is to create a user-centric platform that enhances the online recipe
experience, making it efficient and enjoyable for individuals with varying culinary skills and
preferences.

1.2 Objectives

 Ensure the web application has an intuitive and user-friendly design, allowing uses to easily
navigate, search, and interact with recipes.
 Implement a visually appealing and interactive recipe display, providing step-by-step
instructions, ingredient quantities and images for seamless cooking experience.
 Regularly update and improve the application by incorporating user feedback, fixing bugs,
and introducing new features

1.3 Scope

This project aims to develop a simple web-based application that displays detailed recipes with
ingredients, step-by-step instructions and images. Implement a robust search feature for finding
recipes based on ingredients, cuisine, or dietary preferences.
 2. REQUIREMENT SPECIFICATIONS

2.1 Software Requirements:

 Visual Studio Code or any preferred IDE for code development.

 Javascript (with HTML/CSS), as it is the primary language for the project.
 SQLite for data storage.
 Scikit-learn for implementing machine learning algorithms.
 Django or any other web framework for building web applications.

2.2 Hardware Requirements

 Processor 12th Gen Intel(R) Core(TM) i5-1235U 1.30 GHz

 Installed RAM16.0 GB (15.7 GB usable)
 Windows11 OS
 3. TOOLS USED
In our project, we utilize a combination of powerful tools to streamline and enhance the
development process. Visual Studio Code, a popular integrated development environment (IDE),
proves invaluable for web development, particularly in creating web applications. HTML(.js,.css)
serves as the project's backbone, providing essential tools, libraries, and a supportive community for
the development of robust conversational interfaces capable of handling diverse language
interactions.
We provide the description about the tools in Table 1.

Table 1:List of Tools

Tool Description
VISUAL STUDIO CODE Visual Studio Code is a popular integrated development environment
(IDE) that is used for web development, including the creation of web
applications. There are several ways in which VS Code can be beneficial
in the development of this project.
HTML (Hypertext Markup HTML is the standard markup language used to create structure content on
Language) the World Wide Web. It provides a way to describe the structure of web
page using elements and tags
JavaScript (.js) JavaScript is essential for creating interactive and dynamic web
application, and its documentation covers a wide range of topics to help
developers build robust and efficient solutions
CSS (Cascading Style Sheets) CSS is a styling language used to control the presentation of HTML
documents.CSS empowers developers to create visually appealing and
responsive web designs by styling HTML elements in a structured and
modular manner.
TheMealDB TheMealDB is a comprehensive online database providing information
about various meals and recipes. TheMealDB serves as a valuable
resource for both cooking enthusiasts and developers looking to
incorporate meal-realated content into their applications.
 4. SYSTEM DESIGN

4.1 SYSTEM ARCHITECTURE

Figure 1:Food Recipe Application

 5. IMPLEMENTATION
In today's fast-paced world, food recipe applications have become a popular choice for people
looking for cooking inspiration and guidance. By combining the power of JavaScript and API
integration, we can create a dynamic and interactive food recipe applications that provides users
with a vast collection of recipes to explore and try out in their own kitchens. In this article, we will
walk through the process of building a food recipe applications using JavaScript and incorporating
an API to fetch recipe data.

5.1 Prerequisites

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and
JavaScript. Familiarity with API concepts and asynchronous programming will also be beneficial.

5.2 Setting Up the Project

1. Create a new directory for your project and set up the basic file structure with an index.html,
style.css, and script.js file.

2. Link the CSS and JavaScript files to your HTML file using <link> and <script> tags respectively.

5.3 Fetching Recipe Data Using API

1. Research and choose a suitable food recipe API. Some popular options include Spoonacular
Edamam, or TheMealDB.

2. Sign up for an API key on the chosen platform and make note of the key for future use.

3. In your JavaScript file, create a function to fetch recipe data from the API using the fetch()
method. Pass your API key in the request headers or as a query parameter, depending on the API's
requirements.

4. Process the fetched data and extract relevant information such as recipe name, ingredients,
instructions, and images.
5.4 Building the User Interface

1. Design a user-friendly interface using HTML and CSS. Consider using a grid or card-based
layout to display recipe cards.

2. Create an input field for users to search for recipes and a button to trigger the search
functionality.

3. Implement event listeners to capture user actions, such as clicking on a recipe card or submitting
a search query.

5.5 Displaying Recipe Results

1. Upon receiving the recipe data from the API, dynamically generate recipe cards using JavaScript.

2. For each recipe card, display the recipe name, image, and any other relevant details like
ingredients with instructions along with a video link regarding that particular recipe from Youtube.

3. Add click event listeners to the recipe cards to allow user to view more information about a
specific recipe.

5.6 Enhancing User Experience

1. Implement a search functionality that filters recipes based on input or specific ingredients related
to that recipe.

2. Include pagination or infinite scrolling to handle a large number of recipes.

3. Allow Users to save their favorite recipes or create personalized recipe collections.
6. RESULT AND DISCUSSIONS

Figure 2:Home Page including quotation and search bar

Figure 2:Recipes List After Searching

Figure 3: After clicking on Get Recipe

Figure 4: Instructions Including Ingredients
 7. CONCLUSION

In this article, we've explored how to build a food recipe application using JavaScript and API
integration.
By leveraging the power of JavaScript and fetching data from a recipe API, we can create an
engaging and dynamic application that provides users with a vast array of recipes to explore
and enjoy. Happy cooking!
 REFERENCES

1. https://www.themealdb.com/

2. https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}

3. https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100
;1,200&display=swap
 APENDEX
Sample Code

HTML sample code

JavaScript Sample Code

CSS Sample Code