SRI RAMAKRISHNA ENGINEERING COLLEGE

[Educational Service: SNR Sons Charitable Trust]

[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University, Chennai]
[ISO 9001:2015 Certified and all eligible programmes Accredited by NBA]
Vattamalaipalayam, N.G.G.O. Colony Post, Coimbatore – 641 022.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CAPSTONE PROJECT

RECIPE BOOK APPLICATION

AKSHAYA R 71812201017
HAMSAVARTHINI V 71812201052
HARSHINI B 71812201060
PAVITHRA S 71812201153

THIRD YEAR B.E./M. Tech CSE – V SEM

Academic Year 2024-2025

20CS212 &WEB TECHNOLOGIES

COURSE COORDINATOR
Mrs. G. Anusha, AP /CSE
 SRI RAMAKRISHNA ENGINEERING COLLEGE
[Educational Service: SNR Sons Charitable Trust]
[Autonomous Institution, Reaccredited by NAAC with ‘A+’ Grade]
[Approved by AICTE and Permanently Affiliated to Anna University, Chennai]
[ISO 9001:2015 Certified and all eligible programmes Accredited by NBA]
Vattamalaipalayam, N.G.G.O. Colony Post, Coimbatore – 641 022.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CAPSTONE PROJECT
RECIPE BOOK APPLICATION

Assessment
Introduction (2)

Logic Building (2)

Implementation
Steps (4)

Report (2)
S.
Name & Roll No.
No. Total
(10)

1. AKSHAYA R
71812201017
2. HAMSAVARTHINI V
71812201052
3. HARSHINI B
71812201060
4. PAVITHRA S
71812201153

SIGNATURE OF COURSE COORDINATOR

Mrs. G. Anusha, AP/CSE
S. No. TITLE PAGE
NUMBER

RECIPE BOOK APPLICATION

1. INTRODUCTION 1

2. REQUIREMENTS 2

3. IMPLEMENTATION STEPS 3

4. CODE AND OUTPUT SCREENSHOTS 4

5. CONCLUSION 10
 1. INTRODUCTION

The Recipe Book application is a user-friendly, digital solution for organizing and
exploring a personal collection of recipes. Designed with convenience and versatility in
mind, it allows users to seamlessly manage recipes and access them across devices. Key
features include the ability to add, edit, delete, and search recipes by title or ingredients,
ensuring quick and easy retrieval of desired dishes. Users can also filter recipes by
category, such as breakfast, lunch, or dessert, making meal planning and discovery
straightforward.

Built with AngularJS, the app leverages services to handle recipe data management,
storing information in local storage for a consistent experience without the need for an
internet connection. With a responsive layout, the Recipe Book provides an optimized
view whether accessed on a desktop or mobile device, making it ideal for both at-home
cooking and on-the-go meal preparation. This comprehensive tool is perfect for anyone
looking to curate a versatile and easily navigable collection of recipes. The Recipe Book
application is designed to be a comprehensive, personal culinary assistant, catering to
both novice cooks and seasoned chefs alike.

With an intuitive interface, users can add new recipes, edit existing ones, and even delete
recipes that are no longer needed. The powerful search functionality allows users to
quickly locate recipes by title or key ingredients, which is especially useful when planning
meals based on available pantry items. Additionally, users can organize recipes into
categories, such as breakfast, lunch, and dessert, to streamline meal planning and make
browsing easier. This feature also makes it convenient for users to discover new recipes
within specific categories, inspiring them to try new dishes while staying organized.

AngularJS serves as the backbone for managing the app's functionality, with services that
handle recipe data storage directly within the user's browser. By using local storage, the
app ensures that recipes are readily accessible, even without an internet connection. This
feature is particularly useful for users who may be using the app in locations with limited
connectivity, such as in kitchens or while grocery shopping. Furthermore, the app’s
responsive design enables a smooth experience across various devices, from mobile
phones to tablets and desktops, adapting to different screen sizes to provide a consistent
look and feel. With this all-encompassing feature set, the Recipe Book is not only
practical but also enhances the joy of cooking by providing users with a simple and
efficient way to manage and enjoy their favorite recipes.
 2. REQUIREMENTS
User Requirements:
• Admin: Manage the recipe database by adding, editing, and deleting recipes. Monitor
overall system usage, oversee data storage, and generate reports on popular recipes
or categories.
• User: Add personal recipes, edit and delete their entries, and browse or search recipes
by title or ingredients. Filter recipes by category (e.g., breakfast, lunch, dessert) and
view detailed recipe information, including ingredients and cooking instructions.
• Guest: Explore publicly available recipes, search by title or ingredients, filter by
category, and view recipe details. Registration is encouraged to access more features
like saving favorite recipes or adding personal notes.

Functional Requirements:
• User Authentication: Secure login and registration for Admin and User roles, with
basic access for Guests. Admins have extended permissions to manage recipes and
system operations.
• Dashboard: Customized dashboards for each user role. Admins access recipe and
system management tools, while Users and Guests see personalized browsing and
recipe features.
• Recipe Management: Ability for Admins and Users to add, update, delete, and view
recipes with details like title, ingredients, instructions, and category.
• Category Filtering: Users and Guests can filter recipes by category (e.g., breakfast,
lunch, dessert) for targeted browsing.
• Search Functionality: Search recipes by title or ingredients, helping users quickly
find desired recipes.

Non-Functional Requirements:
• Performance: The application should handle multiple users simultaneously, with a
smooth browsing experience for desktop and mobile.
• Usability: The user interface should be visually appealing, easy to navigate, and
optimized for different devices and user roles.
• Security: Implement data encryption, secure authentication, and role-based access to
protect user information and sensitive recipe data.
• Scalability: The system should be capable of scaling with an increasing number of
users, recipes, and data storage needs.
• Maintainability: The code should follow modular and well-documented practices,
facilitating easy maintenance, updates, and future enhancements.
 3. IMPLEMENTATION STEPS

1. Project Initialization:
Backend Setup: Start by creating a new Node.js project with Express for backend routing.
Set up the folder structure with controllers, models, routes, and config directories.
Frontend Setup: Initialize a React application to build the user interface, using create-react-
app or configuring your preferred setup for state management and styling.

2. Database Configuration (MongoDB):

Database Setup: Use MongoDB Atlas or a local MongoDB instance to store recipe data.
Schema Design: Define recipe schemas with fields like title, ingredients, category, and
instructions using Mongoose.

3. Backend API Development:

Controllers & Routes: Implement CRUD (Create, Read, Update, Delete) operations for
recipes. Set up endpoints, such as /recipes for all recipes and /recipes/:id for specific recipes.
Middleware & Error Handling: Add middleware for validation, authentication, and error
handling.

4. Frontend Development (React):

UI Design: Create components like Recipe List, Recipe Detail, Add Recipe, and Edit
Recipe. Use React Router for navigation.
API Integration: Set up service functions to connect with backend APIs for CRUD
operations on recipes.

5. Search, Filter, and Data Visualization:

Search and Filter: Implement search by title or ingredient and filters by category.
Data Visualization: Use a chart library to show recipe statistics, such as popular categories.

6. Testing and Debugging

Backend Testing: Use Postman or Insomnia to test each API endpoint and ensure correct
data handling and response status.
Frontend Testing: Perform unit tests for components and integration tests to ensure the
system behaves as expected.
 4. CODE IMPLEMENTATION

App.js
var app = angular.module('recipeApp', []);

app.controller('RecipeController', function($scope) {
$scope.recipes = JSON.parse(localStorage.getItem('recipes')) || [];

$scope.newRecipe = {};

$scope.saveRecipe = function() {
if ($scope.newRecipe.title && $scope.newRecipe.ingredients &&
$scope.newRecipe.instructions) {
if ($scope.editIndex !== undefined) {
$scope.recipes[$scope.editIndex] = $scope.newRecipe;
} else {
$scope.recipes.push($scope.newRecipe);
}

localStorage.setItem('recipes', JSON.stringify($scope.recipes));
$scope.newRecipe = {};
$scope.editIndex = undefined;
}
};

$scope.editRecipe = function(index) {
$scope.newRecipe = angular.copy($scope.recipes[index]);
$scope.editIndex = index;
};

$scope.deleteRecipe = function(index) {
$scope.recipes.splice(index, 1);
localStorage.setItem('recipes', JSON.stringify($scope.recipes));
};
$scope.clearForm = function() {
$scope.newRecipe = {};
$scope.editIndex = undefined;
};
$scope.clearAll = function() {

if (confirm('Are you sure you want to delete all recipes?')) {

$scope.recipes = [];
 localStorage.setItem('recipes', JSON.stringify([]));
}
};
});

Styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}

header {
background-color: #5cb85c;
color: white;
padding: 10px 0;
text-align: center;
}

h1 {
margin: 0;
}

.add-recipe, .search-recipe, .filter-category, .recipe-list {

padding: 20px;
background-color: white;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

input, textarea, select {

display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}

button {
padding: 10px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

button:hover {
background-color: #4cae4c;
}

ul {
list-style-type: none;
padding: 0;
}

li {
padding: 10px;
background-color: #f9f9f9;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

.recipe-actions {
margin-top: 10px;
}

.recipe-actions button {
margin-right: 10px;
}

.responsive {
max-width: 600px;
margin: 0 auto;
}

@media (max-width: 600px) {

.add-recipe, .search-recipe, .filter-category, .recipe-list {
margin: 5px;
}
}
5.OUTPUT SCREENSHOTS
 5. CONCLUSION
In conclusion, the Recipe Book application combines a structured backend, a responsive
and user-friendly frontend, and secure data management to deliver an efficient and
enjoyable experience for all users. By leveraging Node.js, Express, React, and
MongoDB, the application provides seamless recipe management and browsing features
with real-time search, filtering, and data visualization. The inclusion of JWT-based
authentication ensures that user roles and permissions are well-defined and secure,
allowing both Users and Admins to interact with the system effectively. Through careful
planning, modular development, and thorough testing, this Recipe Book application is
designed to be scalable, maintainable, and accessible across different devices. Once
deployed, the application serves as a comprehensive tool for managing and sharing
recipes, meeting both current needs and future growth requirements.