CAKES N

INDEX
S.No. Contents Page No.

1. INTRODUCTION 1

2. SYSTEM STUDY 2-5

3. SYSTEM REQUIREMENTS AND SPECIFICATION 6-10

4. SYSTEM ANALYSIS 11-16

6. SYSTEM DESIGN 17-19

7. PROJECT CODE 20-82

8. PROJECT OUTPUT(SCREENSHOTS) 83-95

9. SYSTEM TESTING 96-98

10. SYSTEM IMPLEMENTATION 99

11. SYSTEM SECURITY 100

12. MAINTENANCE 101

13. FUTURE SCOPE 102

14. CONCLUSION 103

15. REFERENCE 104

Page |
 INTRODUCTION

Welcome to "Cakes N Shapes," your destination for a seamless and delightful cake-shopping

experience. Our website is designed to simplify your journey, offering a diverse selection,

transparent information, and a secure checkout process. With every click, you're one step closer

to finding the perfect cake for your celebration. Explore our wide array of flavours, designs, and

sizes tailored to your preferences, ensuring there's something for everyone. We pride ourselves

on quality and customer satisfaction, promising a hassle-free experience from start to finish.

Our user-friendly interface makes navigating through our offerings effortless, allowing you to

find your dream cake with ease. At "Cakes N Shapes," we believe every celebration deserves a

centre piece as sweet as the memories made. Trust in us to make your special day extraordinary,

one delectable slice at a time. Join our community of satisfied customers who have made us

their go- to destination for all things cake-related. Welcome to the world of "Cakes N Shapes,"

where every celebration is a piece of cake.

Page |
 CAKES N

SYSTEM STUDY
DEFINITION OF SYSTEM

A system is an orderly grouping of independent components linked together according to a

plan to achieve a specific objective. Its main characteristics are organization, interaction,
independent, integration and central objective a system does not necessarily mean to a
computer system. It may be a manual system or any other names.

NEEDS OF THE SYSTEM

Social and economic factor: A wave of social and economic changes often follows in the
wake of the new technology. New opportunities may arise to improve on a production process
or to do something that was not previously possible. Changes in the ways individuals are
organized into groups may then be necessary, and the new groups may complete for economic
resources with established units.

Technological factor: People have never before in a time when the scope of scientific inquiry
was so broad, so when the speed of applying the new technology accounts for many changes
in the organization.

High level decisions and operating processes: In response to technological, socio-economic

factors, top level managers may decide to recognize operations and introduce new products.
To deal with these needs, people commonly seek new modified information to support the
decision. When that happens, then they obtain turn to a computer system for help the
information users and data processing specialist then work together to complete a series of
steps in a system study to produce output results to satisfy information needs.

Proposed System:
The development of this new system contains the following activities, which try to develop on-
line application by keeping the entire process in the view of database integration approach.
 Classical instruments are also available in product list.
 We also provided additional information about different instruments, their
components, and related parts .

Page |
 CAKES N

Merits of Proposed System

As the proposed system is system oriented it is faster than the manual process.
 It also minimizes the errors in the data entry.
 It reduces the burden of staff.
 Highly secured system, Easy user interface & Timeliness.
 It requires less Man power.
 Safe and sophisticated system of record keeping.
 Capable to retrieve information from database within short time span.
 Capable to check whether the input data is valid or not.
 Security of data.
 Administrator controls the entire system.
 User friendly and interactive
 Every transaction is obtained and processed immediately.
 Provide hardware and software securities.
 Prepare and report final project directive to management.
 There are 4 types of feasibility considerations:
 Economic feasibility
 Technical feasibility
 Behavioural feasibility
 Operational feasibility

(1) ECONOMICAL FEASIBILITY

Economic Feasibility deals about the economic impact faced by the organization to implement
a new system. Financial benefits must equal or exceed the costs. The cost of conducting a full
system, including software and hardware cost for the class of application being considered
should be evaluated .
Economic analysis is the most frequently used method for evaluating the effectiveness of a new
system. More commonly known as cost/benefit analysis, the procedure is to determine the
benefits and savings that are expected from a candidate system and compare them with costs.
If benefits outweigh costs, then the decision is made to design and implement the system. An
entrepreneur must accurately weigh the cost versus benefits before taking an action.

Page |
 CAKES N

Economic Feasibility in this project:

 The cost to conduct a full system investigation is possible.

 There is no additional manpower requirement.
 There is no additional cost involved in maintaining the proposed system.

(2) TECHNICAL FEASIBILITY

This is concerned with specifying equipment and software that will successfully satisfy the
user requirement. The technical needs of the system may vary considerably, but it may centres
on the following situations:
 Whether the current/existing manual process of the system is compatible enough to
accommodate technical enhancements accommodated by the proposed candidate
system.
 Hardware or software repairs and availability and maintenance in case of damage or
wear-tear.
 The facility to produce outputs in a given time.
 Response time under certain conditions.
 Ability to process a certain value of transaction at a particular speed.

The examining technical feasibility configuration of the system is given more importance than
the actual make of hardware. The configuration should give the complete picture about the
system’s requirement. The existing computer system property supports this software. This
software to implement this company (bike shop) does not require additional resource. Hence it
can be concluded that the proposed system is technically feasible.

(3) BEHAVIORAL FEASIBILITY

An estimate should be made of how strong a reaction the user staff is likely to have towards
the development of a computerized system. It is a common knowledge that computer
installations have something to do with turnover, changes in employee job status. It relates
human behaviour in the organization and political aspects. Here we focus on:

1) What changes will be brought with the system

2) What organizational structures are disturbed?

Page |
 CAKES N

3) What new skills will be required Do the existing members have these skills?
If not can they be trained in due course of time? It also includes social and managerial aspects
that are whether the proposed project will be acceptable to the customer and the management,
along with the determination of whether the proposed project considers Act, Status as well as
pending Legislations as a part of the legal feasibility People always resist Change. Any user
staff finds it uneasy to switch over man managed system to computer managed system due to
lack of computer knowledge.
The proposed system is quite:
 User friendly
 Interactive
 The user need not require any profound technical knowledge or skill to use the
System.
By the above discussion, we conclude that, the proposed system considered in all aspects i.e.
economically, technically and behaviourally feasible.

4) OPERATIONAL FEASIBILITY:
This system can be implemented anywhere, as there is an adequate support for the user. With
minimum training the user can get familiar with it and can get better results. The system is easy
to operate so it is operationally feasible.
This feasibility test asks if the system will work when it is developed and installed. Operational
feasibility in this project:
 The proposed system offers greater level of user-friendliness.
 The proposed system produces best results and gives high performance. It can
be implemented easily. So this project is operationally feasible.

Page |
 CAKES N

SYSTEM SPECIFICATION
HARDWARE REQUIREMENTS (Minimum Requirement)

 Minimum RAM:-2GB
 Hard Disk:-128 GB
 Processor:- Intel(R) Core(TM) i3 or equivalent
 Keyboard:- Qwerty Keyboard
 Monitor:- VGA, Color & LCD, LED

SOFTWARE REQUIREMENTS (minimum Requirement)

 Windows : At Least Window 7

 Code Editor/IDE: Software like Visual Studio Code, Sublime Text, or WebStorm for
writing and editing React code.
 Node.js: To run JavaScript on the server and use npm (Node Package Manager) for
managing packages and dependencies.
 React Developer Tools: Browser extensions like React DevTools for Chrome and
Firefox to inspect and debug React components.
 Package Managers: npm or Yarn for managing JavaScript packages and
dependencies.
 Routing: React Router for handling client-side routing.
 Database: Software like MongoDB for data storage.

Page |
 CAKES N

Frontend
HTML (Hypertext Mark up Language):

1. Responsibilities:

 Structuring Content: HTML is responsible for defining the structure and

organization of content on a web page. Elements like headings, paragraphs,
lists, and images help create a logical hierarchy.

2. Basic Layout:

 Document Structure: An HTML document follows a hierarchical structure

with a root <html> element, <head> for metadata, and <body> for the main
content.

 Semantic Elements: HTML5 introduces semantic elements such as <header>,

<nav>, <section>, <article>, <footer>, which provide meaning to the content
and improve accessibility.

CSS (Cascading Style Sheets):

1. Responsibilities:

 Presentation and Styling: CSS controls the visual presentation of HTML

elements, enhancing the overall user experience.

 Separation of Concerns: CSS promotes the separation of content (HTML) and

presentation (styling), making the codebase more maintainable and modular.

2. Styling Capabilities:

 Selectors: CSS selectors help target specific HTML elements for styling.

 Box Model: Defines how elements are rendered as boxes, including properties
like margin, padding, border, and width/height.

 Flexbox and Grid: Layout models that allow flexible and responsive design.

 Media Queries: Enable responsive design by adapting styles based on the

device or screen size.

3. Colors and Fonts:

 Color Properties: CSS provides properties for defining colors, including hex
codes, RGB values, and named colors.

 Font Properties: Specify font styles, sizes, and families for text.

Page |
 CAKES N

JavaScript:

1. Responsibilities:

 Interactivity: JavaScript adds interactivity to web pages by responding to user

actions and events.

 Dynamic Content: Enables dynamic updates without requiring a page reload,

creating a smoother user experience.

 DOM Manipulation: JavaScript interacts with the Document Object Model,

allowing the modification of page elements in response to user input or
changing data.

2. Event Handling:

 Event Listeners: JavaScript can attach event listeners to HTML elements,

responding to events like clicks, keypresses, and form submissions.

React.js:

1. Declarative:

 What You Want, Not How to Achieve It: React encourages a declarative
programming paradigm. Instead of imperatively defining how the UI should
update, you declare what the UI should look like, and React takes care of
updating the actual DOM efficiently.

2. Component-Based Architecture:

 Reusable UI Components: React enables the creation of modular UI

components, encapsulating their own state and behavior. These components can
be reused across the application, promoting a more maintainable and scalable
codebase. Components can be composed together to build complex UI
structures.

3. One-Way Data Flow:

 Unidirectional Data Binding: React follows a one-way data flow, where data
changes in a parent component are passed down to child components through
props. This unidirectional flow enhances the predictability of how data changes
propagate through the application.

 Immutable Data: React encourages the use of immutable data structures,

preventing unintended side effects and simplifying state management.

4. JSX (JavaScript XML):

 Syntax Extension: JSX is a syntax extension for JavaScript that allows you to
write HTML-like code within JavaScript. It provides a more concise and
readable way to define UI components.

Page |
 CAKES N

 JSX Elements: JSX elements are compiled to React.createElement() calls,

creating React elements in the virtual DOM.

5. State Management:

 Local Component State: React components can have local state, which allows
them to manage and update their own data.

6. React Router (optional):

 Client-Side Routing: React Router is a library for handling navigation and

client-side routing in React applications. It enables the creation of single-page
applications (SPAs) with multiple views.

7. Community and Ecosystem:

 React Developer Tools: Browser extensions and tools that facilitate debugging
and inspecting React component hierarchies.

Page |
 CAKES N

Backend
1. Node.js:
 A JavaScript runtime that allows you to execute server-side code using
JavaScript.
 Provides an event-driven, non-blocking I/O model for building scalable and
efficient server-side applications.
 Enables the use of JavaScript for both frontend and backend development,
promoting code reuse and consistency.
2. Express.js:
 A minimal and flexible Node.js web application framework.
 Simplifies the process of building robust and scalable web applications.
 Provides middleware to handle various aspects of the HTTP request-response
cycle.
 Facilitates the creation of RESTful APIs and routing.
Database:
1. MongoDB:
 A NoSQL database that stores data in BSON (Binary JSON) format.
 Scales horizontally, making it suitable for handling large volumes of
unstructured data.
 Provides flexibility in data modeling, allowing you to work with dynamic
schemas.
 Supports document-oriented storage, making it well-suited for JSON-like data
structures.
Additional Components (Optional):
1. Package Managers:
 npm (Node Package Manager): Manages and installs Node.js packages and
dependencies for your project.
2. Version Control:
 Git: Tracks changes in your codebase, facilitating collaboration and version
control

Page |
 CAKES N

SYSTEM ANALYSIS
SYSTEM ANALYSIS
 System analysis is a process of gathering and interpreting facts, diagnosing problems
and the information to recommend improvements on the system. It is a problem solving
activity that requires intensive communication between the system users and system
developers. System analysis or study is an important phase of any system development
process. The system is studied to the minutest detail and analyzed. System analysis
report captures your understanding of the requirements, and how you plan to address
them. This document is used to capture the agreement between you and your customer
of what will be built. It is also intended to be a useful reference for your project team.
 Here in the digital signage project a detailed study of existing system is carried along
 With all the steps in the system analysis. In the manual system for displaying the require
 Information one person must be sitting in front of the system to display the information.

DFD( Data Flow Diagram)

 It was introduced by De Macro (1978), Gane and Sarson (1979). A data flow diagram
(DFD) is a graphical representation of the "flow" of data through an information system.
DFDs can also be used for the visualization of data processing (structured design).
 On a DFD, data items flow from an external data source or an internal data store to an
internal data store or an external data sink, via an internal process.
 A DFD provides no information about the timing or ordering of processes, or about
whether processes will operate in sequence or in parallel. It is therefore quite different
from a flowchart, which shows the flow of control through an algorithm, allowing a
reader to determine what operations will be performed, in what order, and under what
circumstances, but not what kinds of data will be input to and output from the system,
nor where the data will come from and go to, nowhere the data will be stored (all of
which are shown on 2 DFD).
 DFDs help system designers and others during initial analysis stages visualize a current
system or one that may be necessary to meet new requirements. Systems analysts prefer
working with DFDs, particularly when they require a clear understanding of the
boundary between existing systems and postulated systems. DFDs represent the
following:
1. External devices sending and receiving data
2. Processes that change that data
3. Data flows themselves
4. Data storage locations

Page |
 CAKES N

LEVELS OF DFD:

DFDs can range from simple overviews to complex, granular representations of a system or
process with multiple levels, starting with level 0. The most common and intuitive DFDs are
level 0 DFDs, also called context diagrams. They’re digestible, high-level overviews of the
flow of information through a system or process, so almost anyone can understand it.

1. Level 0: Context Diagram

This DFD level focuses on high-level system processes or functions and the data
sources that flow to or from them. Level 0 diagrams are designed to be simple,
straightforward overviews of a process or system.

2. Level 1: Process Decomposition

While level 1 DFDs are still broad overviews of a system or process, they’re also
more detailed — they break down the system’s single process node into sub
processes.

3. Level 2: Deeper Dives

The next level of DFDs dive even deeper into detail by breaking down each level 1
process into granular sub-processes.

4. Level 3: Increasing Complexity

Page |
 CAKES N

Level 3 and higher-numbered DFDs are uncommon. This is largely due to the amount
of detail required, which defeats its original purpose of being easy to understand.

Context Level DFD for User

1 Level of DFD for User

Page |
 CAKES N

ER (Entity-Relationship) Diagram
An ER diagram shows the relationship among entity sets. An entity set is a group of similar
entities and these entities can have attributes. In terms of DBMS, an entity is a table or attribute
of a table in database, so by showing relationship among tables and their attributes, ER diagram
shows the complete logical structure of a database. Let’s have a look at a simple ER diagram
to understand this concept.
Here are the geometric shapes and their meaning in an E-R Diagram.
1. Rectangle- Represents entity sets.
2. Ellipses- It represent attributes.
3. Diamonds- It represents relationship set.
4. Lines- They link attributes to entity sets and entity sets to relationship sets.

Components of the ER Diagram

This model is based on three basic concepts:
a. Entities-typically displayed in a rectangle, entities can be represented by objects, persons,
concepts, or events that contain data.

Page |
 CAKES N

b. Attributes-displayed in a circle or an oval, the attributes refer to the characteristics of an

entity. They can be categorized as simple, composite, or derived, and an object can have one
or multiple attributes.
c. Relationships-- illustrate how two or more entities interact with each other. They are
displayed as labels placed on the lines connecting the objects.

1. Table Login

2. Table Signup

3. Table Contact

Page |
 CAKES N

4. Table Registration

5. Table Order:-

Page |
 CAKES N

SYSTEM DESIGN
System Design is the most creative and challenging phase in the system life cycle. Design is
the first step into the development phase for any engineered product or system. Design is a
creative process. A good design is the key to effective system. System design is a solution how
to approach the creation of a new system. System design transforms a logic representation of
what is required to do into the physical specification. The specification is converted into
physical reality during development.

LOGICAL DESIGN
The logical flow of a system and define the boundaries of a system. It includes the following
steps:
 Reviews the current physical system – its data flows, file content,
volumes, frequencies etc. |
 Prepares output specifications — that is, determines the format, content and
frequency of reports.
 Prepares input specifications — format, content and most of the input
functions.
 Prepares edit, security and control specifications.
 Specifies the implementation plan.
 Prepares a logical design walk through of the information flow, output, input,
controls and implementation plan.
 Reviews benefits, costs, target dates and system constraints.

PHYSICAL DESIGN
Physical system produces the working systems by define the design specifications that tell the
programmers exactly what the candidate system must do. It includes the following steps:

 Design the physical system.

 Specify input and output media.
 Design the database and specify backup procedures.
 Design physical information flow through the system and a physical design
Walk through.

Page |
 CAKES N

 Plan system implementation.

 Prepare a conversion schedule and target date.
 Determine training procedures, courses and timetable.
 Devise a test and implementation plan and specify any new hardware/software.
 Update benefits, costs, and conversion date and system constraints.

DESIGN/SPECIFICTION ACTIVITIES
 Concept formulation.
 Problem understanding.
 High level requirements proposals.
 Feasibility study.
 Requirements engineering.
 Architectural design

INPUT DESIGN
Input Design deals with what data should be given as input, how the data should be arranged
or code, the dialog to guide the operating personnel in providing input, methods for preparing
input validations and steps to follow when error occur. Input Design is the process of
converting a user-oriented description of the input into a computer-based system. This design
is important to avoid errors in the data input process and show the correct direction to the
management for getting correct information from the computerized system. It is achieved by
creating user-friendly screens for the data entry to handle large volume of data. The goal of
designing input is to make data entry easier and to be free from errors. The data entry screen is
designed in such a way that all the data manipulates can be performed. It also provides record
viewing facilities.
When the data is entered it will check for its validity. Data can be entered with the help of
screens. Appropriate messages are provided as when needed so that the user will not be in
maize of instant. Thus the objective of input design is to create an input layout that is easy to
follow. In this system, for inputting user data, attractive forms are designed. User can also
select the desired options from the menu, which provide all possible facilities. Also the
important input format is designed in such a way that the accidental errors are avoided. The
user has to input only just the minimum data required, which also helps in avoiding the errors
that the users may make. Accurate designing of the input format is very important in developing
efficient software. The goal of input design is to make entry as easy, logical and free from
errors,

OUTPUT DESIGN
A quality output is one, which meets the requirements of the end user and presents the
information clearly. The objective of output design is to convey information about past

Page |
 CAKES N

activities, current status or projections of the future, signal important events, opportunities,
problems, or warnings, trigger an action, confirm an action etc. Efficient, intelligible output
design should improve the system’s relationship with the user and helps in decisions making.
In output design the emphasis is on displaying the output on a CRT screen in a predefined
format. The primary consideration in design of output is the information requirement and
objectives of the end users. The major formation of the output is to convey the information and
so its layout and design need a careful consideration.
As the outputs are the most important source of information source of information to the user,
better design should improve the system’s relation and also should help in decision-making.
The output device’s capability, print quality, response time requirements etc. should also be
considered, form design calborates the way output is presented and layout available for
capturing information. It’s very helpful to produce the clear, accurate and speedy information
for end users.

DATABASE DESIGN
A database is an organized mechanism that has the capability of storing information through
which a user can retrieve stored information in an effective and efficient manner. The data is
the purpose of any database and must be protected. The general theme behind a database is to
handle information as an integrated whole. A database is a collection of inter related data store
with minimum redundancy to serve many user quickly and efficiently. After designing the
input and output the analyst must concentrate on database design or how data should be
organized around user requirements. The general objective is to make information access, easy,
quick, inexpensive and flexible for the users.
The database design involves creation of tables. Tables are represented in physical database as
stored files. They have their own independent existence. A table consists of rows and columns.
Each column corresponds to a piece of information called field. A set of fields constitutes a
record. The record contains all the information, specific to a particular item.
During database design the following objectives are concerned:
1. Controlled redundancy.
2. Easy to learn and use.
3. More information and low cost.
4. Accuracy.
5. Integrity.

Page |
 CAKES N

PROJECT CODE
FrontEnd Files

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="Cakes N Shapes" content="Cakes N Shapes />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?
family=Dancing+Script&family=Protest+Revolutio n&family=Single+Day&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?
family=Dancing+Script&family=Protest+Revolutio n&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="../src/componenet/flaticon.css"/>
<link rel="stylesheet" href="../src/componenet/font.css" />
<title>Cakes N Shapes</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>

Page |
 CAKES N

</body>
</html>

INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();

APP.JS
import React from 'react'
import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom'
import NavBar from './componenet/navBar/navBar'
import Footer from './componenet/footer/Footer'
import HomePage from './componenet/Home.jsx'
import Shopping_cart from './componenet/cart/ShoppingCart.jsx'
import About from './componenet/About/About.jsx'
import Shop from './componenet/Shop/Shop.jsx'
import Contact from './componenet/Contact/Contact.jsx'
import Home1 from './componenet/Home/Home1.jsx'
import {CakePro} from './componenet/Shop/Product.jsx'
import {CupCakePro} from './componenet/Shop/Product.jsx'
import {BreadPro} from './componenet/Shop/Product.jsx'
import { CookiesPro } from './componenet/Shop/Product.jsx'
import { RollsPro } from './componenet/Shop/Product.jsx'
import { DonutPro } from './componenet/Shop/Product.jsx'
import Login from './componenet/Login/Login1.jsx'
import SignUp from './componenet/Login/Signup.jsx'
import CheckOut from './componenet/Check Out/CheckOut.jsx'
import {AdminPannel} from './componenet/Adminpannel/AdminPannel.jsx'
import ContactTable from './componenet/Adminpannel/ContactTable.jsx'
import SignInTable from './componenet/Adminpannel/SignInTable.jsx'
import OrderTable from './componenet/Adminpannel/OrderTable.jsx'
import ClassRegTable from './componenet/Adminpannel/ClassRegTable.jsx'

Page |
 CAKES N

import './App.css';
function Layout() {
const location = useLocation()
return (
<>
{location.pathname !== '/' && location.pathname !== '/Login' && location.pathname !==
'/Signup' && <NavBar />}

<Routes>
<Route path="/" element={<Home1 />} />
<Route path="/Login" element={<Login />} />
<Route path="/SignUp" element={<SignUp />} />
<Route path="/HomePage" element={<HomePage />} />
<Route path="/Shop" element={<Shop />} />
<Route path="/Shopping" element={<Shopping_cart />} />
<Route path="/About" element={<About />} />
<Route path="/Contact" element={<Contact />} />
<Route path="/CakePro" element={<CakePro />} />
<Route path="/CupCakePro" element={<CupCakePro />} />
<Route path="/BreadPro" element={<BreadPro />} />
<Route path="/DonutPro" element={<DonutPro />} />
<Route path="/CookiesPro" element={<CookiesPro />} />
<Route path="/RollsPro" element={<RollsPro />} />
<Route path="/AdminPannel" element={<AdminPannel />} />
<Route path="/CheckOut" element={<CheckOut />} />
<Route path="/ContactTable" element={<ContactTable />} />
<Route path="/SignInTable" element={<SignInTable />} />
<Route path="/OrderTable" element={<OrderTable />} />
<Route path="/ClassRegTable" element={<ClassRegTable />} />
</Routes>
{location.pathname !== '/' && location.pathname !== '/Login' && location.pathname !==
'/Signup' && <Footer />}
</>
)
}

function App() {
return (
<BrowserRouter>
<Layout />
</BrowserRouter>
)
}

Page |
 CAKES N

export default App

Splash Screen : Home.jsx

import React from "react";
import { useNavigate } from "react-router-dom";
import './Home.css';

export default function Home1() {

const navigate = useNavigate();

const handleGetStartedClick = () => {

// Use the navigate function to go to the "/HomePage" route
navigate("/Login");
};

return (
<div className="cont">
<div className="content">
<div className="square twitch" style={{ marginBottom: "50px" }}>
<span className="one"></span>
<span className="two"></span>
<span className="three"></span>
<div className="circle">
<h4 className="DrugRadar">Healthy Made Delicious Cake </h4>
<p>One-stop Fro Your All Bakery Needs</p>
</div>
</div>

<button className="button" onClick={handleGetStartedClick}>

<span className="actual-text">&nbsp;GET&nbsp;STARTED&nbsp;</span>
<span className="hover-text" aria-hidden="true">
&nbsp;GET&nbsp;STARTED&nbsp;
</span>
</button>
</div>
</div>
);
}

Page |
 CAKES N

Login Page :- Login.jsx

import React from 'react';
import './Login1.css';
import { Link } from "react-router-dom";
import Signup from './Signup';
import { useEffect, useState } from "react"
import axios from "axios"
import { useNavigate } from "react-router-dom"

function Login1(){
const history=useNavigate();
const [email,setEmail]=useState('')
const [password,setPassword]=useState('')
async function submit(e){
e.preventDefault();

try{
await axios.post("http://localhost:8000/",{
email,password
})
.then(res=>{ if(res.data=
="exist"){
history("/HomePage",{state:{id:email}})
}
else if(res.data=="notexist"){
alert("User have not sign up")
}
})
.catch(e=>{ alert("wron
g details")
console.log(e);
})

}
catch(e){
console.log(e);
}
}

return (
<>

Page |
 CAKES N

<div class="container1 container-fluid">

<div class="row">

<div class="col-lg-6"></div>
<div class=" d-flex align-items-center justify-content-center right-side login" >
<div class="form-2-wrapper2">
<div class=" text-center">
<h1 className='heading ' >Login</h1>
</div>
<h2 class="text-center ">Sign Into Your Account</h2>
<form action="#">
<div class="mb-3 form-box">
<input type="email" class="form-control1" id="email" onChange={(e) => {
setEmail(e.target.value) }} name="email" placeholder="Enter Your Email" required />
</div>
<div class="mb-3">
<input type="password" class="form-control1" id="password" onChange={(e) => {
setPassword(e.target.value) }} name="password" placeholder="Enter Your Password"
required />
</div>
<button type="submit" class="btn btn-outline-secondary login-btn w-100 "
onClick={submit}>Login</button>

</form>
<p class="text-center register-test mt-3">Don't have an account?
<Link to="/Signup" class="button" target="_parent">
<span class="actual-text">&nbsp;Register&nbsp;here&nbsp;</span>
</Link></p>
</div>
</div>
</div>
</div>
</>
);

export default Login1;

Page |
 CAKES N

Sign up Page : SignUp.jsx

import React, { useEffect, useState } from "react"
import axios from "axios"
import { useNavigate, Link } from "react-router-dom"
import './Signup.css';\
onst Signup = () => {
const history=useNavigate();
const [name,setName]=useState('')
const [email,setEmail]=useState('')
const [password,setPassword]=useState('')
async function submit(e){
e.preventDefault();
try{
await axios.post("http://localhost:8000/signup",{
name,email,password
})
.then(res=>{ if(res.data=
="exist"){
alert("User already exists")
}
else if(res.data=="notexist"){ history("/HomePage",{state:
{id:email}})
}
})
.catch(e=>{ alert("wron
g details")
console.log(e);
})
}
catch(e){
console.log(e);
}
}
return (
<>
<div class="container1 container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class=" d-flex justify-content-center right-side signup" >
<div class="form-2-wrapper3 ">
<div class=" text-center ">
<h1 className='heading text-center'>Signup</h1>

Page |
 CAKES N

</div>
<h2 class="text-center ">Sign Into Your Account</h2>
<form action="#">
<div class="mb-3">
<input type="text" class="form-control2" id="text" onChange={(e) => {
setName(e.target.value) }} name="text" placeholder="Enter Your Name" required />
</div>
<div class="mb-3 form-box">
<input type="email" class="form-control2" id="email" onChange={(e) => {
setEmail(e.target.value) }} name="email" placeholder="Enter Your Email" required />
</div>
<div class="mb-3">
<input type="password" class="form-control2" id="password" onChange={(e) =>
{ setPassword(e.target.value) }} name="password" placeholder="Enter Your Password"
required />
</div>
<button type="submit" class="btn btn-outline-secondary login-btn w-100 "
onClick={submit}>Login</button>
</form>
<p class="text-center register-test mt-3">Hav already an account
<Link to="/Login" class="button" target="_parent">
<span class="actual-text">&nbsp;Login&nbsp;here&nbsp;</span>
</Link></p>
</div>
</div>
</div>
</div>
</>
);
}

export default Signup;

Main Page :- HomePage.jsx

import AboutSec from './about_sec/about_sec'
import Slider from './slider/slider'
import About_bar from './about_bar/About_bar'
import Icon_slider from './Icon_slider/Icon_slider.jsx'
import Class_sec from './Class_sec/Class_sec.jsx'
function Home() {
return (
<>
<AboutSec />

Page |
 CAKES N

<Icon_slider />
<Slider />
<About_bar />
<Class_sec />
</>
);
}
export default Home;

Components of Home Page

NavBar :- navBar.jsx

import '../font.css';
import './navBar.css';
import logo from '../../images/logo/logo.jpg';
import { useNavigate } from 'react-router-dom';
import React from 'react';
function NavBar() {
const navigate = useNavigate();
return (
<>
<nav>
<div className="container-fluid header body-bg sticky-top">
<div className="row">
<div className="col-xl-12">
<div className="d-flex justify-content-between flex-wrap align-items-
center">
<div className="header-info-left d-none d-sm-block">
<ul className="header-social">
<li><a href="#"><i className="fab fa-facebook"></i></a></li>
<li><a href="https://www.instagram.com/_cakes.n.shapes"><i
className="fab fa-instagram"></i></a></li>
<li><a href="#"><i className="fab fa-twitter"></i></a></li>
<li><a onClick={() => navigate("/AdminPannel")}><i
className="fa fa-user "></i></a></li>
</ul>
</div>
<div className="logo">
<a href="index-2.html"><img className='logo' src={logo} alt="sorry"
/></a>
</div>
<div className="header-info-right d-none d-lg-block hover-underline-
animation">

Page |
 CAKES N

<a href="#" className="btn_2">Call Us: +91 783-346-4378</a>

</div>
</div>
</div>
</div>
<div className="row pt-3 ">
<div className="col-xl-12">
<div className=" ">
<nav class="navbar navbar-expand-lg sticky-top p-0">
<button type="button" class="navbar-toggler me-4 " data-bs-
toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav nav">
<a class="nav-item nav-link hover-underline-animation ps-4 pe-4
navbar" onClick={() => navigate("/HomePage")}>Home</a>
<a class="nav-item nav-link hover-underline-animation ps-4 pe-4
navbar" onClick={() => navigate("/Shop")}>Cake</a>
<a class="nav-item nav-link hover-underline-animation ps-4 pe-4
navbar" onClick={() => navigate("/About")}>About</a>
<a class="nav-link hover-underline-animation ps-4 pe-4 navbar"
onClick={() => navigate("/Shopping")}>Orders</a>
<a class="nav-item nav-link hover-underline-animation ps-4 pe-4
navbar" onClick={() => navigate("/Contact")}>Contact</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</nav>
</>
);
}
export default NavBar;

Footer :- Footer.jsx

import './Footer.css';
import '../font.css';
import Foot_logo from '../../images/footer-logo.png'
const Footer = () => {
return (

Page |
 CAKES N

<>
<footer class="footer set-bg" >
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="footer widget">
<h3>WORKING HOURS</h3>
<ul>
<li>Monday - Friday: 08:00 am – 08:30 pm</li>
<li>Saturday: 10:00 am – 16:30 pm</li>
<li>Sunday: 10:00 am – 16:30 pm</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="footer about">
<div class="footer logo">
<a href="#"><img src={Foot_logo} alt="" /></a>
</div>
<p>Freshly baked is the assorted variety of breads,cakes,cupcakes,donut
we bring for you to savour. Prepared with the finest ingredient</p>
<div className='footer-info-left'>
<ul className="footer-social">
<li><a href="#"><i className="fab fa-facebook"></i></a></li>
<li><a href="https://www.instagram.com/_cakes.n.shapes"><i
className="fab fa-instagram"></i></a></li>
<li><a href=""><i className="fab fa-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="footer newslatter">
<h3>Subscribe</h3>
<p>Get latest updates and offers.</p>
<form action="#">
<input type="text" placeholder="Email" />
<button type="submit"><i class="fa fa-send-o"></i></button>
</form>
</div>
</div>
</div>
</div>
</footer>
</>
);
}
export default Footer;

Page |
 CAKES N

About section :- about_sec.jsx

import React from 'react';

import '../font.css';
import './AboutSec.css';
import about1 from '../../images/gallery/about1.jpg';
import { useNavigate } from 'react-router-dom';
function AboutSec() {
const navigate = useNavigate();
return (
<> <div className='container-fluid main-img '>
<div className='container pt-5'>
<div className='row'>
<div class="col-xxl-6 col-xl-7 col-lg-8 col-md-8 col-sm-10">
<div class="hero-caption ">
<h1 >Healthy Made Delicious Cake</h1>
<a onClick={() => navigate("/Shop")} class="btn_1 hero-btn" >Order
Now</a>
</div>
</div>
</div>
</div>
</div>
<section className="about-area top-padding body-bg">
<div className="container">
<div className="row justify-content-center">
<div className="col-xl-6 col-lg-7 col-md-9">
<div className="section-tittle text-center line mb-70">
<h2>This is Schilers. Awesome Food Theme. Purchase it and eat.</h2>
</div>
</div>
</div>
<div className="row align-items-center section-overlay">
<div className="offset-xl-1 col-xxl-5 col-xl-6 col-lg-6 col-md-12 col-sm-
12">
<div className="about-caption about-caption1">

<div className="section-tittle section-tittle3 mb-25">

<h2>Hey, Guys Here We are Ready To Serve You.<br /> Purchase it
and eat </h2>
<p>At our bakery, we craft delicious treats with passion and care.
Indulge in our freshly baked bread, cakes, and pastries, made daily.
Using only the finest ingredients, we ensure each bite is a delight.

Page |
 CAKES N

From classic favorites to unique creations, there's something for

everyone.
Our skilled bakers bring expertise and creativity to every recipe.
</p>
<p>Experience the warmth and aroma of our bakery, a haven for
pastry lovers.
We take pride in serving our community with irresistible baked
goods.
Whether it's a special occasion or a daily treat, we've got you
covered.
Visit us today and savor the taste of tradition and innovation in
every bite.
Discover why our bakery is more than just a place to satisfy your
sweet tooth.</p>
</div>
</div>
</div>
<div className="col-xxl-5 col-xl-5 col-lg-6 col-md-12 col-sm-12">

<div className="about-img about-img1 ">

<img src={about1} alt="sorry" />
</div>
</div>
</div>
</div>
</section>
</>
)
}
export default AboutSec;

Icon Slider :- Icon Slider.jsx

import React ,{useRef}from 'react';

import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import './Icon_slider.css';
import '../flaticon.css'
import { useNavigate } from 'react-router-dom';

const Icon_slider = () => {

const sliderRef = useRef(null);

Page |
 CAKES N

const navigate =useNavigate();

// Customize settings as per your requirements

const settings = {
infinite: true,
speed: 2,
autoplay: true, // Enable autoplay
autoplaySpeed: 2000,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 1,
},
},
],
};

const carouselData = [
{ id: 1, content: <span className="flaticon-034-chocolate-roll"></span> ,name:"Choco-
roll" ,pro: "/RollsPro"},
{ id: 2, content: <span className="flaticon-029-cupcake-3"></span> ,name:"Cupcake"
,pro: "/CupCakePro"},
{ id: 3, content: <span className="flaticon-043-cake-7"></span> ,name:"Cakes" , pro:
"/CakePro"},
{ id: 3, content: <span className="flaticon-042-candies"></span> ,name:"Cookies" ,pro:
"/CookiesPro"},
{ id: 4, content: <span className="flaticon-023-doughnut"></span> ,name:"Donut", pro:
"/DonutPro"},
{ id: 5, content: <span className="flaticon-002-cake-14"></span> ,name:"bread", pro:
"/BreadPro"},
// Add more slides as needed

Page |
 CAKES N

];
const handleNext = () => {
sliderRef.current.slickNext();
};
const handlePrev = () => {
sliderRef.current.slickPrev();
};
return (
<>
<div className="categories">
<div className="container">
<div className="row">
<div className="categories slider owl-carousel">

<Slider ref={sliderRef} {...settings}>

{carouselData.map((item) => (
<div key={item.id}>
<div className="categories item col-2">
<div className="categories item icon" onClick={() =>
navigate(item.pro)}>
{item.content}
<h4>{item.name}</h4>
</div>
</div>
</div>
))}
</Slider>
</div>
</div>
</div>
</div>
</>
);
};
export default Icon_slider;

Product :- Slider.jsx

import './slider.css';
import React, { useState } from 'react';
import Shop_cart from '../cart/data';
import items1 from '../../images/shop/product-1.jpg'
import items2 from '../../images/shop/bread/caterpillar.webp'
import items3 from '../../images/shop/CHOCO TRUFFLE CAKE.jpg'

Page |
 CAKES N

import items4 from '../../images/shop/roll/roll1.jpg'

import items5 from '../../images/shop/Rasmalai Cake.jpg'
import items6 from '../../images/shop/donut/donut1.jpg'

function CakeCard({id, image,item, title, price,quantity }) {

const [data,setData] = useState(Shop_cart);
function Add_to_cart({id},{image},{title},{price},{quantity}) {
const existingItem = data.find((item) => item.id === id);
if (!existingItem){
const newData = [...data,{ id, image, title, price,quantity }]
setData(newData);
Shop_cart.push({ id, image, title, price ,quantity});}
else{
alert("This cake is already in the cart")
}
};
return(
<>
<div className="col-lg-4 col-md-6 col-sm-6">
<div className="home cart item">
<div className="home cart item pic set-bg">
<div className='home cart item pic img'>'
<img src={image} style={{height:'inherit',width:'100%'}}/></div>
<div className="home cart__label">
<span> {item} </span>
</div>
</div>
<div className="home cart item text">
<h6>{title}</h6>
<div className="home cart__item price">{price}</div>
<div className="cart_add">
<button onClick={() => Add_to_cart({id},{image},{title},{price},{quantity})}>
Add to cart</button>
</div>
</div>
</div>
</div>
</>)
};
const Slider = () => {
const cakeData = [
{ id: 1, image:items1, item: ' Cup Cake ' ,title: 'Vanila Cup Cake', price: 70, quantity:1},
{ id: 2, image:items2, item: ' Bread ' ,title: 'Italian Bread (1/2 KG)', price: 249, quantity:1 },
{ id: 3, image:items3, item: ' Cake ' ,title: 'Orea Cake(1/2 KG)', price: 450, quantity:1 },

Page |
 CAKES N

{ id: 4, image:items4, item: ' rolls ' ,title: 'Choco rolls', price: 150, quantity:1 },
{ id: 5, image:items5, item: ' Cake ' ,title: 'Rasmalai Cake(1 KG)', price: 600, quantity:1 },
{ id: 6, image:items6, item: ' Donut ' ,title: 'Kit Kat Donut', price: 60, quantity:1 },
];
return (<>
<div className="conatiner-fluid body-bg">
<div className="conatainer main">
<div className="row">
{cakeData.map((cake) => (
<CakeCard key={cake.id} {...cake} />
))}
</div>
</div>
</div>

</> );
};
export default Slider;

Class Registration Section :- Class_sec.jsx

import { useState } from 'react';

import React from 'react';
import './Class_sec.css';
import axios from 'axios';
const Class_sec=()=> {
const [name,setName]=useState('')
const [phone,setPhone]=useState('')
const [requirement,setRequirement]=useState('')
async function submit(e){
e.preventDefault();
try{
await axios.post("http://localhost:8000/classregdbs",{
name,phone,requirement
})
.then(res=>{ if(res.data=
="exist"){
alert("User already exists")
}
else if(res.data=="notexist"){
}
})
.catch(e=>{ alert("wron
g details")

Page |
 CAKES N

console.log(e);
})
}
catch(e){
console.log(e);
}
}
return (
<>
<section className="class spad">
<div className="container">
<div className="row">
<div className="col-lg-6 col-md-12 col-sm-12">
<div className="class form">
<div className="section-title">
<span>Class cakes</span>
<h2>Made from your <br />own hands</h2>
</div>
<form action="#">
<input type="text" placeholder="Name" onChange={(e) => {
setName(e.target.value) }} />
<input type="text" placeholder="Phone" onChange={(e) => {
setPhone(e.target.value) }}/>
<input type="text" placeholder="Type your requirements example
Cake" onChange={(e) => { setRequirement(e.target.value) }}/>
<button type="submit" className="site-btn"
onClick={submit}>registration</button>
</form>
</div>
</div>
<div className="col-lg-6 col-md-12 col-sm-12">
<div className="class video ">
<a href="https://www.youtube.com/watch?
v=8PJ3_p7VqHw&list=RD8PJ3_p7VqHw&start_rad io=1" className="play-btn video-
popup"><i className="fa fa-play"></i></a>
</div>
</div>
</div>
</div>
</section>
</>
)
}
export default Class_sec;

Page |
 CAKES N

About Page :- AboutPage.jsx

import React from 'react';
import './About.css';
import About_sec2 from '../about_bar/About_bar'
import About4 from './About4';
import aboutImg from '../../images/gallery/about1.jpg';
import Insta_Img_1 from '../../images/instagram/instagram-1.jpg'
import Insta_Img_2 from '../../images/instagram/instagram-2.jpg'
import Insta_Img_3 from '../../images/instagram/instagram-3.jpg'
import Insta_Img_4 from '../../images/instagram/instagram-4.jpg'
import Insta_Img_5 from '../../images/instagram/instagram-5.jpg'
const About = () => {
return (
<>
<div className="container-fluid About Page Header About_Main_Img text-
white" >
<div className="container-fluid About Page Header page-header py-5 mb-5">
<div className="container py-5">
<h1 className="display-2 text-white">About Us</h1>
</div>
</div>
</div>
<section className="about-area top-padding body-bg">
<div className="container">
<div className="row justify-content-center">
<div className="col-xl-6 col-lg-7 col-md-9">
<div className="section-tittle text-center line mb-70">
<h2>This is Schilers. Awesome Food Theme. Purchase it and eat
Burgers.</h2>
</div>
</div>
</div>
<div className="row align-items-center section-overlay">
<div className="offset-xl-1 col-xxl-5 col-xl-6 col-lg-6 col-md-12 col-sm-12">
<div className="about-caption about-caption1">
<div className="section-tittle section-tittle3 mb-25">
<h2>Hey, Guys Here We are Ready To Serve You.<br/> Purchase it and
eat .</h2>
<p>At our bakery, we craft delicious treats with passion and care.
Indulge in our freshly baked bread, cakes, and pastries, made daily.
Using only the finest ingredients, we ensure each bite is a delight.
From classic favorites to unique creations, there's something for everyone.

Page |
 CAKES N

Our skilled bakers bring expertise and creativity to every recipe.

</p>
<p>Experience the warmth and aroma of our bakery, a haven for pastry
lovers.
We take pride in serving our community with irresistible baked goods.
Whether it's a special occasion or a daily treat, we've got you covered.
Visit us today and savor the taste of tradition and innovation in every bite.
Discover why our bakery is more than just a place to satisfy your sweet tooth.</p>
</div>
</div>
</div>
<div className="col-xxl-5 col-xl-5 col-lg-6 col-md-12 col-sm-12">

<div className="about-img about-img1 ">

<img src={aboutImg} alt="sorry"/>
</div>
</div>
</div>
</div>
</section>
<About_sec2/>
<section className="instagram spad1">
<div className="container">
<div className="row">
<div className="col-lg-4 p-0">
<div className="instagram text">
<div className="section-title-instagram">
<span>Follow us on instagram</span>
<h2>Sweet moments are saved as memories.</h2>
</div>
<a href="https://www.instagram.com/_cakes.n.shapes"
className='instagram-page-link' target="_blank" rel="noopener noreferrer">
<h4><i className="fab fa-instagram"></i> &nbsp; @CakesNShapes</h4>
</a>
</div>
</div>
<div className="col-lg-8">
<div className="row">
<div className="col-lg-4 col-md-4 col-sm-4 col-6">
<div className="instagram pic">
<img src={Insta_Img_1} alt=""/>
</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-4 col-6">

Page |
 CAKES N

<div className="instagram pic middle pic">

<img src={Insta_Img_2} alt=""/>
</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-4 col-6">
<div className="instagram pic">
<img src={Insta_Img_3} alt=""/>
</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-4 col-6">
<div className="instagram pic">
<img src={Insta_Img_4} alt=""/>
</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-4 col-6">
<div className="instagram pic middle pic">
<img src={Insta_Img_5} alt=""/>
</div>
</div>
<div className="col-lg-4 col-md-4 col-sm-4 col-6">
<div className="instagram pic">
<img src={Insta_Img_1} alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
)
}
export default About;

Contact Page :- Contact.jsx

import React, { useState } from 'react';

import 'font-awesome/css/font-awesome.min.css';
import './Contact.css';
import Header_img from '../../images/hero/h2_hero1.jpg'
import { useLocation } from 'react-router-dom';
import axios from 'axios';
const Contact = () => {
const [name,setName]=useState('')

Page |
 CAKES N

const [email,setEmail]=useState('')
const [message,setMessage]=useState('')

async function submit(e){

e.preventDefault();
try{

await axios.post("http://localhost:8000/Contact",{
name,email,message
})
.then(res=>{ if(res.data=
="exist"){
alert("User already exists")
}
else if(res.data=="notexist"){
}
})
.catch(e=>{ alert("wron
g details")
console.log(e);
})
}
catch(e){
console.log(e);
}
}
return (
<>
<div className="container-fluid Contact Page Header Contact_Header_img py-
5 mb-5">
<div className="container py-5">
<h1 className="display-2 text-white">Contact Us</h1>
</div>
</div>
<section class="contact">
<div class="container">
<div class="map">
<div class="map iframe">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d2309.7807257160957! 2d73.00818474759387!3d26.2797077042173!2m3!1f0!2f0!3f0!3m2!
1i1024!2i768!4f13.1!3 m3!1m2!1s0x39418c315d7a13c3%3A0x14687525b0e90559!2s218%2C
%202nd%2C%20B
%20Rd%2C%20Gandhi%20Maidan%2C%20Sardarpura%2C%20Jodhpur%2C%20Rajastha

Page |
 CAKES N

n%20342001!5e0!3m2!1sen!2sin!4v1707480480266!5m2!1sen!2sin"height="300"
width={'100%'} allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
<div class="contact__address">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="contact address item">
<h6>Sardarpura</h6>
<ul>
<li>
<i class="fa fa-location-arrow"></i>
<p>218 , 2nd B-road, Sardarpura, jodhpur</p>
</li>
<li>
<i class="fa fa-phone" aria-hidden="true"></i>
<p>+91 734-208-2148</p>
</li>
<li>
<i class="fa fa-envelope" aria-hidden="true"></i>
<p>[email protected]</p>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="contact address item">
<h6>Housing Board</h6>
<ul>
<li>
<i class="fa fa-location-arrow"></i>
<p>765 ,Sector 9 ,chopasani housing board, jodhpur</p>
</li>
<li><i class="fa fa-phone" aria-hidden="true"></i>
<p>+91 213-612-3000</p>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
<p>[email protected]</p>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="contact address item">

Page |
 CAKES N

<h6>Paota</h6>
<ul>
<li>
<i class="fa fa-location-arrow"></i>
<p>26 ,C-road, Paota,jodhpur</p>
</li>
<li><i class="fa fa-phone" aria-hidden="true"></i>
<p>+91 800-786-1098</p>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
<p>[email protected]</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="contact text">
<h3>Contact With us</h3>
<ul>
<li>Representatives or Advisors are available:</li>
<li>Mon-Fri: 5:00am to 9:00pm</li>
<li>Sat-Sun: 6:00am to 9:00pm</li>
</ul>
<img src="images/cake-piece.png" alt=""/>
</div>
</div>
<div class="col-lg-8">
<div class="contact form">
<form action="#" >
<div class="row">
<div class="col-lg-6">
<input type="text" placeholder="Name" name = "name"
onChange={(e) => { setName(e.target.value) }}/>
</div>
<div class="col-lg-6">
<input type="text" placeholder="Email" name='email'
onChange={(e) => { setEmail(e.target.value) }}/>
</div>
<div class="col-lg-12 pb-5">
<textarea placeholder="Message" name='message'
onChange={(e) => { setMessage(e.target.value) }} ></textarea>

Page |
 CAKES N

<button type="submit" class="site-btn" onClick={submit}>Send

Us</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</>
)
}
export default Contact;

// Now The Cake Page Where All The Products Are Shown

Cake Page :- Shop.jsx

import React from 'react';
import '../font.css';
import {CupCake} from './Cake'
import {Bread} from './Cake'
import Icon_slider from '../Icon_slider/Icon_slider';
import './Shop.css';
import {Cake} from './Cake'
import { Donut } from './Cake';
import { Cookies } from './Cake';
import { Rolls } from './Cake';
const Shop = () => {
return (
<>
<div className='container-fluid'>
<div className='container'>
<div className=" About__Page Header About_Main_Img text-white " >
<div className=" About Page Header page-header py-5 mb-5 ">
<div className="container py-5">
<h1 className="display-2 text-white"> Our Products</h1>
</div>
</div>
</div>
<Icon_slider />
<Cake/>
<CupCake />

Page |
 CAKES N

<Bread />
<Cookies />
<Donut />
<Rolls />
</div>
</div>
</>
);
}
export default Shop;

Components of Cake Page

Cake.jsx

import { CookiesData, CupCakeData, DonutData, BreadData, CakeData, RollsData } from

'./Shop_Data'
import {CakeCard} from './CakeCard'
import './Shop.css'
const Cake = () => {
return (
<>
<div className="row product">
{CakeData.map((product) => (
<CakeCard key={product.id} {...product} />
))}
</div>
</>)
}
//Same Functions are created for CupCake, Donut, Rolls, Bread ,Cookie

export {Cake,Bread,CupCake ,Cookies, Donut,Rolls};

CakeCard.jsx

import './Shop.css'
import React, { useState } from 'react';
import Shop_cart from '../cart/data'function CakeCard({ id, image, item, title, price, quantity
}) {
const [data, setData] = useState(Shop_cart);
function Add_to_cart({ id }, { image }, { title }, { price }, { quantity }) {
const existingItem = data.find((item) => item.id === id);
if (!existingItem) {
const newData = [...data, { id, image, title, price, quantity }]
setData(newData);

Page |
 CAKES N

Shop_cart.push({ id, image, title, price, quantity }); alert(`$

{title} has been added to your cart!`);
}
else {
alert("This cake is already in the cart")
}
};
return (
<>
<div className="col-lg-4 col-md-6 col-sm-6 ">
<div className="product__item">
<div className="product item pic set-bg">
<div className='product item pic img'>'
<img src={image} style={{ height: '100%', width: '100%' }} /></div>
<div className="product label">
<span> {item} </span>
</div>
</div>
<div className="product item text">
<h6>{title}</h6>
<div className="product item price">{price}₹</div>
<div className="cart_add">
<button onClick={() => Add_to_cart({ id }, { image }, { title }, { price }, {
quantity })}> Add to cart</button>
</div>

</div>
</div>
</div>
</>)
}
export { CakeCard, Shop_cart };

//Component which is shown on clicking on icon slider

Cake Product :- CakePro.jsx

import React from 'react';

import '../font.css';
import './Shop.css';
import { Cake, CupCake, Bread, Cookies, Donut, Rolls } from './Cake'
import Icon_slider from '../Icon_slider/Icon_slider';
const CakePro = () => {
return (
<>

Page |
 CAKES N

<div className='container'>
<div className="container-fluid About__Page Header About_Main_Img text-white" >
<div className="container-fluid About Page__Header page-header py-5 mb-5">
<div className="container py-5">
<h1 className="display-2 text-white"> Our Products</h1>
</div>
</div>
</div>
<Icon_slider />
<Cake />
</div>
</>
)
};
//Same Functions are created for CupCake ,Donut, Rolls, Bread ,Cookie
export { CakePro, CupCakePro, BreadPro, DonutPro, CookiesPro, RollsPro };

//Same type of arrays are created for CupCake ,Donut, Rolls, Bread ,Cookie

ShopData.jsx

const CakeData = [
{ id: 1, image: cake1, item: ' CAKE ' ,title: 'Black Forest Cake (1 KG)', price: '549 ' ,
quantity:1},
{ id: 2, image: cake2, item: ' CAKE ' ,title: 'Pineapple Cake (1 KG)', price: '650 ', quantity:1
},
{ id: 3, image: cake3, item: ' CAKE ' ,title: 'Choco Truffle Cake (1 KG)', price: '600 ',
quantity:1 },
{ id: 4, image: cake4, item: ' CAKE ' ,title: 'Fruit N Nut Cake (1/2 KG)', price: '300 ',
quantity:1 },
{ id: 5, image: cake5, item: ' CAKE ' ,title: 'Rasmali Cake (1/2 KG)', price: '400 ', quantity:1
},
{ id: 6, image: cake6, item: ' CAKE ' ,title: 'Double Choco Chip Cake (1/2 KG)', price: '350
', quantity:1 ,},
];
export {CakeData, CupCakeData, BreadData,DonutData, CookiesData ,RollsData};

Now Cart Page

Components of Cart Page

Cart Page :- cart.jsx

import React, { createContext, useReducer, useEffect } from "react";

import './cart.css'
import './ShoppingCart.css'
import products from "./data";

Page |
 CAKES N

import ContextCart from "./contextCart";

import { reducer } from "./reducer";
export const CartContext = createContext();
const initialState = {
item: products,
totalAmount: 0,
totalItem: 0,
};
const Cart = () => {
// const [item, setItem] = useState(products);
const [state, dispatch] = useReducer(reducer, initialState);
// to delete the indv. elements from an Item Cart
const removeItem = (id) => {
return dispatch({
type: "REMOVE_ITEM",
payload: id,
});
};
// clear the cart
const clearCart = () => {
return dispatch({ type: "CLEAR_CART" });
};
// increment the item
const increment = (id) => {
return dispatch({
type: "INCREMENT",
payload: id,
});
};
// decrement the item
const decrement = (id) => {
return dispatch({
type: "DECREMENT",
payload: id,
});
};
// we will use the useEffect to update the data
useEffect(() => {
dispatch({ type: "GET_TOTAL" });
// console.log("Awesome");
}, [state.item]);
return (
<CartContext.Provider
value={{ ...state, removeItem, clearCart, increment, decrement }}>
<ContextCart />
</CartContext.Provider>
);
};
export default Cart;

Page |
 CAKES N

Context Cart :- contextCart.jsx

import React, { useContext} from "react";

import { useNavigate } from "react-router-dom";
import { Scrollbars } from "react-custom-scrollbars-2";
import Items from "./items";
import { CartContext } from "./Cart";
const ContextCart = () => {
const { item, clearCart, totalItem, totalAmount } = useContext(CartContext);
const navigate =useNavigate();
const submit =()=>{ navigate("/CheckOut",{state:
{totalAmount,totalItem}})
}
return (
<>
<div className="container-fluid About Page Header About_Main_Img text-
white" >
<div className="container-fluid About Page Header page-header py-5 mb-5">
<div className="container py-5">
<h1 className="display-2 text-white">Shopping Cart</h1>
</div>
</div>
</div>
<section className="shopping-cart spad">
<div className="container">
<div className="row">
<div className="col-lg-8">
<div className="shopping cart table">
<div className='container-fluid'>
<div className='shopping cart table head'>
<div className='row table head'>
<div className='col-6 heading' >Product</div>
<div className='col-3 heading' >Quantity</div>
<div className='col-3 heading' >Total</div>
</div>
</div>
<div className='container-fluid Scrollbar_box'>
<Scrollbars>
{item.map((cake) => (
<Items key={cake.id} {...cake}/>
))}</Scrollbars>

Page |
 CAKES N

</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-6">
<div className="continue btn">
<a className="continue btn" onClick={() =>
navigate("/Shop")}>Continue Shopping</a>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-6">
<div className="continue btn update btn">
<a onClick={clearCart}> clear cart</a>
</div>
</div>
</div>
</div>
<div className="col-lg-4">
<div className="cart total">
<h3>Cart total</h3>
<ul>
<li>Total Items <span>{totalItem}</span></li>
<li>Total <span>{totalAmount}₹</span></li>
</ul>
<a href="#" className="primary-btn" onClick={submit}>Proceed to
checkout</a>
</div>
</div>
</div>
</div>
</section>
</>
);
};
export default ContextCart;

Items Function :- items.jsx

import React, { useContext } from "react";

import { CartContext } from "./Cart";
const Items = ({ id, title, image, price, quantity }) => {
const { removeItem, increment, decrement } = useContext(CartContext);
return (
<>

Page |
 CAKES N

<div className="items-info">
<div className="product-img">
<img src={image} alt="iamge" />
</div>
<div className="title">
<h2>{title}</h2>
</div>
<div className="add-minus-quantity">
<button onClick={() => increment(id)} >+</button>
<input type="text" placeholder={quantity} disabled />
<button onClick={() => decrement(id)} >-</button>
</div>
<div className="price">
<h3>{price*quantity}₹</h3>
</div>
<div className="remove-item">
<button ><i
className="fas Trash_img "
onClick={() => removeItem(id)}></i></button>
</div>
</div>
<hr />
</>
)
};
export default Items;

Reducer Function :- reducer.jsx

export const reducer = (state, action) => {

if (action.type === "REMOVE_ITEM") {
return {
...state,
item: state.item.filter((curElem) => {
return curElem.id !== action.payload;
}),
};
}
if (action.type === "CLEAR_CART") {
return { ...state, item: [] };
}
if (action.type === "INCREMENT") {
const updatedCart = state.item.map((curElem) => {
if (curElem.id === action.payload) {

Page |
 CAKES N

return { ...curElem, quantity: curElem.quantity + 1 };

}
return curElem;
});
return { ...state, item: updatedCart };
}
if (action.type === "DECREMENT") {
const updatedCart = state.item
.map((curElem) => {
if (curElem.id === action.payload) {
return { ...curElem, quantity: curElem.quantity - 1 };
}
return curElem;
})
.filter((curElem) => curElem.quantity !== 0);
return { ...state, item: updatedCart };
}
if (action.type === "GET_TOTAL") {
let { totalItem, totalAmount } = state.item.reduce(
(accum, curVal) => {
let { price, quantity } = curVal;
let updatedTotalAmount = price * quantity;
accum.totalAmount += updatedTotalAmount;
accum.totalItem += quantity;
return accum;
},
{
totalItem: 0,
totalAmount: 0,
}
);
return { ...state, totalItem, totalAmount };
} return state;
};

Checkout Page :- CheckOut.jsx

import React, { useEffect, useState } from 'react';

import axios from 'axios';
import './CheckOut.css';
import { useLocation } from 'react-router-dom';
import Data from '../cart/data';
function CheckOut() {
const location = useLocation();

Page |
 CAKES N

const titlesArray = Data.map(obj => obj.title);

const [titles, setTitles] = useState(titlesArray);
const [name, setName] = useState('');
const [phone, setPhone] = useState('');
const [address, setAddress] = useState('');
const [totalItem, setTotalItem] = useState('');
const [totalAmount, setTotalAmount] = useState('');
const product = JSON.stringify(titles);
useEffect(() => {
if (location.state) {
const { totalAmount, totalItem } = location.state;
// id and totalItem are the values passed from ContextCart
setTotalAmount(totalAmount);
setTotalItem(totalItem);
alert(titles)
}
}, [location.state]);
async function submit(e) {
e.preventDefault();
try {
await axios.post('http://localhost:8000/checkout', {
name,
phone,
address,
product,
total_item: totalItem,
total_amount: totalAmount
});
alert("data");
// Handle response
} catch (error) {
console.error('Error submitting checkout:', error);
}
}
return (
<>
<div class="container1">
<div class="row">
<div class="col-lg-6"></div>
<div class=" d-flex align-items-center justify-content-center " style={{ paddingLeft:
'30%', paddingTop: '100px' }}>
<div class="form-2-wrapper1">
<div class="logo text-center">
<h1 className='heading'>Check Out</h1>

Page |
 CAKES N

</div>
<form action="#">
<div class="mb-3 form-box">
<label>Name</label>
<input type="text" class="form-control" id="name" onChange={(e) => {
setName(e.target.value) }} name="name" placeholder="Enter Your Name" required />
</div>
<div class="mb-3">
<label>Mobile no.</label>
<input type="mobileno" class="form-control" id="mobile_number"
onChange={(e) => { setPhone(e.target.value) }} name="mobileNumber"
placeholder="mobile_number" required />
</div>
<div class="mb-3 form-box">
<label>Address</label>
<textarea type="text" class="form-control" id="address" onChange={(e) => {
setAddress(e.target.value) }} name="address" placeholder="address" required />
</div>
<div class="mb-3 form-box">
<label>Total Item</label>
<input type="number" class="form-control" id="total_item" value={totalItem}
readOnly style={{ backgroundColor:"transparent"}}/>
</div>
<div class="mb-3 form-box">
<label>Total Amount</label>
<input type="number" class="form-control" id="total_amount"
value={totalAmount} readOnly style={{ backgroundColor:"transparent"}}/>
</div>
<button type="submit" class="btn btn-outline-secondary login-btn w-100 "
onClick={submit}>Submit</button>
</form>
</div>
</div>
</div>
</div>
</>
);
}
export default CheckOut;

Page |
 CAKES N

Admin Pannel and its components

Admin Pannel :- AdminPannel.jsx

import './AdminPannel.css';
import SignInTable from './SignInTable';
import { useNavigate } from 'react-router-dom';
const AdminPannelNav =() =>{
const navigate=useNavigate()
return(
<><div className='container-fluid'>
<div className="row ">
<div className="col-xl-12">
<nav class="navbar navbar-expand-lg sticky-top p-0" >
<button type="button" class="navbar-toggler me-4 " data-bs-toggle="collapse" data-
bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarCollapse">
<div class="navbar-nav admin-Nav nav" style={{ padding: "0px", margin: "0px"
}}>
<a class="nav-item nav-link hover-underline-animation ps-4 pe-4" onClick={() =>
navigate("/SignInTable")}>Sign In</a>
<a class="nav-item nav-link hover-underline-animation ps-4 pe-4" onClick={() =>
navigate("/ContactTable")}>Contacts</a>
<a class="nav-item nav-link hover-underline-animation ps-4 pe-4" onClick={() =>
navigate("/ClassRegTable")}>Registrations</a>
<a class="nav-link hover-underline-animation ps-4 pe-4" onClick={() =>
navigate("/OrderTable")}>Orders</a>
{/* <a class="nav-item nav-link hover-underline-animation ps-4 pe-4" onClick={()
=> navigate("")}>Contact</a> */}
</div>
</div>
</nav>
</div>
</div></div>
</>
)
}
function AdminPannel() {
return (
<>
<SignInTable />
</>
);
}

export {AdminPannel , AdminPannelNav };

Page |
 CAKES N

Sign In Table :- SignInTable.jsx

import React, { useState, useEffect } from 'react';

import './AdminPannel.css';
import {AdminPannelNav} from './AdminPannel';
const SignInTable = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch('http://localhost:8000/data');
const jsonData = await response.json();
setData(jsonData);
} catch (error) {
console.error('Error fetching data:', error);
}
};
return (
<><AdminPannelNav />
<div className="App" style={{marginLeft:"150px"}}>
<h1>Login Table</h1>
<table >
<thead>
<tr>
<th>Name</th>
<th>Password</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td>{item.name}</td>
<td>{item.password}</td>
<td>{item.email}</td>
</tr>
))}
</tbody>
</table>
</div>
</>
)
};
export default SignInTable;

Page |
 CAKES N

Order Table :- OrderTable.jsx

import React, { useState, useEffect } from 'react';

import './OrderTable.css';
import {AdminPannelNav} from './AdminPannel'
const OrderTable = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch('http://localhost:8000/ordertable');
const jsonData = await response.json();
setData(jsonData);
} catch (error) {
console.error('Error fetching data:', error);
}
};
return (
<>
<AdminPannelNav />
<div className="App">
<h1>Order Table</h1>
<table >
<thead>
<tr>
<th >Name</th>
<th>PhoneNo</th>
<th style={{width:"1000px"}}>Address</th>
<th style={{width:"1000px"}}>Product</th>
<th>Total Amount</th>
<th>Total Item</th>
</tr>
</thead>
<tbody> {data.map((item, index) => (
<tr key={index}>
<td >{item.name}</td>
<td>{item.phone}</td>
<td>{item.address}</td>
<td>{item.product}</td>
<td>{item.total_item}</td>
<td>{item.total_amount}</td>

Page |
 CAKES N

</tr>
))}
</tbody>
</table>
</div>
</>
)};
export default OrderTable;

Contact Table :- ContactTable.jsx

import React, { useState, useEffect } from 'react';

import './AdminPannel.css';
import {AdminPannelNav} from './AdminPannel'
const ContactTable = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch('http://localhost:8000/contacttable');
const jsonData = await response.json();
setData(jsonData);
console.log("hello")
console.log(setData);
} catch (error) {
console.error('Error fetching data:', error);
}
};
return (
<>
<AdminPannelNav />
<div className="App" style={{marginLeft:"150px"}}>
<h1>Contact Table</h1>
<table >
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Message</th>
</tr>
</thead>
<tbody>

Page |
 CAKES N

{data.map((item, index) => (

<tr key={index}>
<td>{item.name}</td>
<td>{item.email}</td>
<td>{item.message}</td>
</tr>
))}
</tbody>
</table>
</div>
</>
)
};
export default ContactTable;

Class Registration Table :- ClassRegTable.jsx

import React, { useState, useEffect } from 'react';

import './AdminPannel.css';
import {AdminPannelNav} from './AdminPannel'

const ContactTable = () => {

const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await fetch('http://localhost:8000/classregtable');
const jsonData = await response.json();
setData(jsonData);

} catch (error) {
console.error('Error fetching data:', error);
}
};
return (
<>
<AdminPannelNav />
<div className="App" style={{marginLeft:"150px"}}>
<h1>Students List For Registeration </h1>
<table >
<thead>
<tr>

Page |
 CAKES N

<th>Name</th>
<th>Phone</th>
<th>Requirement</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td>{item.name}</td>
<td>{item.phone}</td>
<td>{item.requirement}</td>
</tr>
))}
</tbody>
</table>
</div>
</>
)
};
export default ContactTable;

CSS File

Navbar.css

.body-bg{
background-color: black;
}
.logo{
width:250px;
}
.header{
padding-top: 15px;
height: 180px;
}
.header-info-left .header-social li
{ display: inline-block
}
.header-info-left .header-social li a
{ color: #fff;
font-size: 20px;
text-decoration: none;
padding-right: 19px
}
.header-info-left .header-social li a i {

Page |
 CAKES N

-webkit-transition: all .4s ease-out 0s;

-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out
0s; transition: all .4s ease-out
0s; transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg)
}
.header-info-left .header-social li a:hover i
{ color: #E5BF4A;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg)
}
.header-info-right{
background-color: black;
height: 40px;
width: 250px;
text-align: center;
padding-top: 7px;
color: #E5BF4A;
border: 2px solid #E5BF4A;
}
.header-info-right a{
color: #E5BF4A;
}

.navbar .dropdown-toggle::after {
border: none;
content: "\f107";
font-family: "Font Awesome 5
Free"; font-weight: 900;
vertical-align: middle;
margin-left: 8px;
}
.btn_2{
height:20%;
width:50%;
font-size: large;
}
.nav{
background-color: black;
padding-left:30% ;
}
.nav a{
background-color: black;

Page |
 CAKES N

color: #E5BF4A;
display: block;
font-size: x-large;
font-family: 'Dancing Script', cursive;
font-family: 'Protest Revolution', sans-serif;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #E5BF4A;
}
.navbar-toggler-icon{
color:#fff;
background-color: #E5BF4A
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 4px;
bottom: 0;
left: 0;
background-color: #E5BF4A;
transform-origin: bottom right;
transition: transform 0.25s ease-
out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
.navbar-light .navbar-brand,
.navbar-light a.btn {
height: 75px;
}
.navbar-light.sticky-top {
top: -100px;
transition: .5s;
}
.navbar-toggler{
background-color: black;
color: #E5BF4A ;
}
.main-img{
background-image: url(../../images/hero/h1_hero1.jpg);
background-size: cover;
height: 500px;
width: 100%;
}
.hero-caption{

Page |
 CAKES N

font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva,
Verdana, sans-serif;
}
.hero-caption h1{
font-size: 80px;
color: #fff;
}
@media (max-width: 991px) {
.main-img{
height: 470px;
}
.hero-caption h1{
font-size: 70px;
}
}
@media (max-width: 840px) {
.main-img{

height: 420px;
}
.hero-caption h1{
font-size: 60px;
}
}
@media (max-width: 700px) {
.main-img{

height: 360px;
}
.hero-caption h1{
font-size: 50px;
}
}
@media (max-width: 550px) {
.main-img{
height: 320px;
}
.hero-caption h1{
font-size: 40px;
}
}
@media (max-width: 300px) {
.main-img{
height: 300px;
}
.hero-caption h1{
font-size: 30px;
}
}
.btn_1 {
background: #E5BF4A;

Page |
 CAKES N

border: 1px solid #2A2A2A;

color: #0A0A0A !important;
text-decoration: none;
font-size: 15px;
font-weight: 400;
display: inline-block;
padding: 22px 41px;
text-transform: uppercase;
line-height: 15px;
border-radius: 0px
}
.navbar:hover{ co
lor: #E5BF4A;
}

.body-bg {
background-color: black;
}

.main-img {
animation: fadeInAnimation ease
7s; animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

.btn_1 {
margin-left: 100px;
width: 200px;

cursor: pointer;
position: relative;
padding: 10px 20px;
background: white;
font-size: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
transition: all 1s;

&:after,
&:before {
content: " ";

Page |
 CAKES N

width: 10px;
height: 10px;
position: absolute;
border: 0px solid
#fff; transition: all 1s;
}

&:after {
top: -1px;
left: -1px;
border-top: 5px solid
#e5bf4a; border-left: 5px
solid #e5bf4a;
}

&:before {
bottom: -1px;
right: -1px;
border-bottom: 5px solid
#e5bf4a; border-right: 5px solid
#e5bf4a;
}

&:hover {
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
&:before,
&:after {

width: 100%;
height: 100%;
}
}
}
.hero-caption {

font-family: 'Protest Revolution', sans-

serif; text-align: center;
color: #FFF;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
height: 500px;
letter-spacing: 1px;
line-height: 2
}

.hero-caption h1 {
font-family: 'Protest Revolution', sans-serif;
background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
background-size: auto;
color: transparent;
Page |
 CAKES N

-moz-background-clip: text;
-webkit-background-clip: text;
text-transform: uppercase;
font-size: 70px;
}
.about-area .about-img img
{ width: 100%;
border-radius: 4px
}
.top-padding {
padding-top: 100px
}
.section-tittle p
{ color: #fff;
font-size: 16px;
font-weight: 300;
line-height: 1.5
}
.section-tittle p a {
text-decoration: underline
}
.section-tittle>span {
color: #E5BF4A;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
display: inline-block;
letter-spacing: 0.3em;
transform: rotate(-90deg);
position: absolute;
left: -36px;
top: 35px
}
.section-tittle h2 {
color: #DFDFDF;
font-family: "Poiret One",
cursive; font-size: 40px;
display: block;
font-weight: 400;
line-height: 1.3;
margin-bottom: 12px;
position: relative
}
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
.section-tittle h2
{ font-size:
40px
}

.section-tittle p {
font-size: 22px
}

Page |
 CAKES N

@media only screen and (min-width: 992px) and (max-width: 1199px) {

.section-tittle h2
{ font-size:
30px
}

.section-tittle p {
font-size: 18px
}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

.section-tittle h2
{ font-size:
30px
}

.section-tittle p {
font-size: 15px
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.section-tittle h2
{ font-size:
31px
}
.section-tittle p {
font-size: 15px
}
}
@media (max-width: 575px) {
.section-tittle h2
{ font-size:
24px
}

.section-tittle p {
font-size: 10px
}
}
.section-tittle.section-tittle3 h2
{ color: #E5BF4A;
font-size: 24px;
padding-left: 0px;
font-weight: 400;
margin-bottom: 28px
}

.section-tittle.section-tittle3 span {
left: -136px;
top: 60px
Page |
 CAKES N
}
.spad {

Page |
 CAKES N

padding-top: 100px;
padding-bottom: 100px;
background-color: black;
}
.about text p {
margin-bottom: 0;
color: white;

font-size: large;
}
.about text h2{
color:#E5BF4A
}

.about bar .about bar item {

margin-bottom: 40px;
}
.about bar .about bar item p {
color: #E5BF4A;
text-transform: uppercase;
letter-spacing: 2px;
font-size: large;
font-weight: 600;
margin-bottom: 10px;
}
.progress-bar{
width:70%;
background-color: #E5BF4A;

}
.progress{
border-radius: 10px;
height: 20px;
}
.categories{
background-color: black;
}
.categories slider {
padding-left: 10px;
padding-right: 20px;
padding-top: 50px;
}
.categories item {
text-align: center;
border-radius: 50%;
-webkit-transition: all, 0.3s;
-o-transition: all,
0.3s; transition: all,
0.3s; float: left;
height: 194px;
width: 194px;

Page |
 CAKES N

padding-top: 25px;
position: relative;
}

.categories item:hover {
background: #f08632;
}
.categories item:hover:after {
opacity: 1;
}
.categories item:hover span {
color: #ffffff;
}
.categories item:hover h4 {
color: #E5BF4A;
-webkit-text-stroke: 0.5px black;
font-size:25px;
}
.categories item__icon span {
color: #f08632;
-webkit-transition: all, 0.2s;
-o-transition: all,
0.2s; transition: all,
0.2s;
}
.categories item__icon h4 {
color: white;
font-weight: 600;
text-transform: uppercase;
margin-top: 4px;
-webkit-transition: all, 0.2s;
-o-transition: all,
0.2s; transition: all,
0.2s;
font-family: 'Protest Revolution', sans-serif;
}
.section-title {
margin-bottom: 35px;
}
.section-title span
{ color: white;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 4px;
display: block;
margin-bottom: 10px;
}
.section-title h2 {
font-size: 46px;
color: #E5BF4A;
line-height: 60px;
font-weight: 700;
Page |
 CAKES N

font-style: italic;
font-family: "Playfair Display", serif;
}
.class {
background: black;
position: relative;
padding-bottom: 0;
}
.class form {
height: 620px;
}
.class form form input , form select {
height: 50px;
width: 100%;
padding-left: 20px;
font-size: 15px;
color: #444444;
background: #ffffff;
border: 0.8px solid
E5BF4A; margin-bottom:
20px
}
.class form form input::-webkit-input-placeholder {
color: #444444;
}
.class form form input::-moz-placeholder {
color: #444444;
}
.class form form input:-ms-input-placeholder {
color: #444444;
}
.class form form input::-ms-input-placeholder {
color: #444444;
}
.class form form input::placeholder {
color: #444444;
}
.class form form .nice-select {
float: none;
border-radius: 0;
border: none;
padding-left: 20px;
margin-bottom: 20px;
height: 50px;
line-height: 50px;
}
.class form form .nice-select span {
font-size: 15px;
color: #444444;
}
.class form form .nice-select .list {
margin-top: 0;

Page |
 CAKES N

border-radius: 0;
width: 100%;
}
.class form form .nice-select:after {
border-bottom: 1.5px solid #111;
border-right: 1.5px solid #111;
height: 9px;
right: 25px;
width: 9px;
}
.class form form button {
letter-spacing: 2px;
height: 50px;
width: 100%;
padding-left: 20px;
font-size: 15px;
color: #444444;
background: #E5BF4A;
border: none;
margin-bottom: 20px;
}
.class video {
height: 720px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 1px solid #E5BF4A;
background-image: url(../../images/class-video.jpg);
}
.class video .play-btn {
display: inline-block;
width: 70px;
height: 70px;
background: #f08632;
font-size: 24px;
color: #ffffff;
line-height: 70px;
text-align: center;
border-radius: 50%;
}

Page |
 CAKES N

BackEnd Files

Main Files :- app.js

const express = require("express")
const Signupcollection = require("./backend/mongo")
const Contactcollection =require("./backend/contactdb")
const ClassRegcollection =require("./backend/classRegdb")
const Logindatacollection =require("./backend/adminLogin/SignInTable.js")
const CheckOutcollection =require('./backend/checkoutdb.jsx')
const ContactTablecollection =require('./backend/adminLogin/ConatctTable.js')
const OrderTablecollection =require('./backend/adminLogin/OrderTable.js')
const ClassRegTablecollection =require('./backend/adminLogin/ClasssRegTable.js')
const cors = require('cors');
const app = express()
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(cors())
app.get("/",cors(),(req,res)=>{ })
app.post("/",async(req,res)=>{
const{email}=req.body
try{
const check=await Signupcollection.findOne({email:email})
if(check){
res.json("exist")
}
else{
res.json("notexist")
}
}
catch(e){
res.json("fail")
}
})
app.post("/signup",async(req,res)=>{
const{name,email,password}=req.body

const Signupdata={
name:name,
email:email,
password:password
}

Page |
 CAKES N

try{
const check=await Signupcollection.findOne({email:email})

if(check){
res.json("exist")
}
else{
res.json("notexist")
await Signupcollection.insertMany([Signupdata])
}
}
catch(e){
res.json("fail")
}
})
app.post("/Contact",async(req,res)=>{
const{name,email,message}=req.body

const Contactdata={
name:name,
email:email,
message:message
}
try{
const check=await Contactcollection.findOne({email:email})

if(check){ await Contactcollection.insertMany([Contactdata])

res.json("exist")
}
else{
res.json("notexist")
await Contactcollection.insertMany([Contactdata])
}
}
catch(e){
res.json("fail")
}
})
app.post("/classregdbs",async(req,res)=>{
const{name,phone,requirement}=req.body

const ClassRegdata={
name:name,
phone:phone,

Page |
 CAKES N

requirement:requirement
}
try{
const check=await ClassRegcollection
await ClassRegcollection.insertMany([ClassRegdata])
alert("Done");
}
catch(e){
res.json("fail")
}
})

app.get('/data', async (req, res) => {

try {
const Logindata = await Logindatacollection.find();
res.json(Logindata);
} catch (err) {
console.error(err);
res.status(500).json({ message: 'Server Error' });
}
});
app.get('/contacttable', async (req, res) => {
try {
const Contactdata = await ContactTablecollection.find();
res.json(Contactdata);
} catch (err) {
console.error(err);
res.status(500).json({ message: 'Server Error' });
}
});
app.get('/ordertable', async (req, res) => {
try {
const Orderdata = await OrderTablecollection.find();
res.json(Orderdata);
} catch (err) {
console.error(err);
res.status(500).json({ message: 'Server Error' });
}
});
app.get('/classregtable', async (req, res) => {
try {
const ClassRegdata = await ClassRegTablecollection.find();
res.json(ClassRegdata);
} catch (err) {

Page |
 CAKES N

console.error(err);
res.status(500).json({ message: 'Server Error' });
}
});

app.post("/checkout",async(req,res)=>{
const{name,
phone,
address,
product,
total_item,
total_amount}=req.body
const CheckOutdata={
name:name,
phone:phone,
address:address,
product:product,
total_item:total_item,
total_amount:total_amount
}
try{
const check=await CheckOutcollection

if(check){ await CheckOutcollection.insertMany([CheckOutdata])

res.json("exist")
}
else{
res.json("notexist")
await CheckOutcollection.insertMany([CheckOutdata])
}
}
catch(e){
res.json("fail")
}
})
app.listen(8000,()=>{
console.log("port connected");
})

Page |
 CAKES N

Sub Files
Mongo.js

const mongoose=require("mongoose")
mongoose.connect("mongodb://0.0.0.0:27017/CakesNShapes")
.then(()=>{
console.log("mongodb connected");
})
.catch(()=>{ console.log('
failed');
})
const SignupSchema=new mongoose.Schema({
name:{
type:String, required:true
},
email:{
type:String, required:true
},
password:{
type:String, required:true
}
})
const Signupcollection = mongoose.model("collections",SignupSchema)
module.exports=Signupcollection

contactdb.js

const mongoose=require("mongoose")
mongoose.connect("mongodb://0.0.0.0:27017/CakesNShapes")
.then(()=>{
console.log("mongodb connected");
})
.catch(()=>{ console.log('
failed');
})
const ContactSchema=new mongoose.Schema({
name:{
type:String, required:true
},
email:{
type:String, required:true
},

Page |
 CAKES N

message:{
type:String, required:true
}
})
const Contactcollection = mongoose.model("contacts",ContactSchema)
module.exports=Contactcollection

classRegdb.js

const mongoose=require("mongoose")
mongoose.connect("mongodb://0.0.0.0:27017/CakesNShapes")
.then(()=>{
console.log("mongodb connected");
})
.catch(()=>{ console.log('
failed');
})
const ClassRegSchema=new mongoose.Schema({
name:{
type:String, required:true
},
phone:{
type:String, required:true
},
requirement:{
type:String, required:true
}
})
const ClassRegcollection = mongoose.model("classregs",ClassRegSchema)
module.exports=ClassRegcollection

checkoutdb.js

const mongoose=require("mongoose");
mongoose.connect("mongodb://0.0.0.0:27017/CakesNShapes")
.then(()=>{
console.log("mongodb connected");
})
.catch(()=>{ console.log('
failed');
})
const CheckOutSchema=new mongoose.Schema({
name:{
type:String, required:true

Page |
 CAKES N

},
phone:{
type:String, required:true
},
address:{
type:String, required:true
},
product:{
type:String, required:true
},
total_item:{
type:String, required:true
},
total_amount:{
type:String, required:true
}
})
const CheckOutcollection = mongoose.model("orders",CheckOutSchema)
module.exports=CheckOutcollection

Admin Pannel Files

SignInTable.js

const mongoose=require("mongoose")
mongoose.connect("mongodb://0.0.0.0:27017/CakesNShapes", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const LogindataSchema = new mongoose.Schema({
name:{
type:String, required:true
},
email:{
type:String, required:true
},
password:{
type:String, required:true
}
});
const Logindatacollection = mongoose.model('collection', LogindataSchema);
module.exports=Logindatacollection

Page |
 CAKES N

OrderTable.js

const mongoose=require("mongoose")
mongoose.connect("mongodb://0.0.0.0:27017/CakesNShapes", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const OrdertableSchema = new mongoose.Schema({
name:{
type:String, required:true
},
phone:{
type:String, required:true
},
address:{
type:String, required:true
},
product:{
type:String, required:true
},
total_item:{
type:String, required:true
},
total_amount:{
type:String, required:true
}
});
const OrderTablecollection = mongoose.model('order', OrdertableSchema);
module.exports=OrderTablecollection

ContactTable.js

const mongoose=require("mongoose")
mongoose.connect("mongodb://0.0.0.0:27017/CakesNShapes", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const ContacttableSchema = new mongoose.Schema({
name:{
type:String, required:true
},
email:{
type:String, required:true
},

Page |
 CAKES N

message:{
type:String, required:true
}
});
const ContactTablecollection = mongoose.model('contact', ContacttableSchema);
module.exports=ContactTablecollection

ClassRegTable.js

const mongoose=require("mongoose")
mongoose.connect("mongodb://0.0.0.0:27017/CakesNShapes", {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const ClassRegtableSchema = new mongoose.Schema({
name:{
type:String, required:true
},
phone:{
type:String, required:true
},
requirement:{
type:String, required:true
}
});
const ClassRegTablecollection = mongoose.model('classreg', ClassRegtableSchema);
module.exports=ClassRegTablecollection

Page |
 CAKES N

Package File :- package.json

{
"name": "cake_project",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"animate.css": "^4.1.1",
"axios": "^1.6.7",
"cors": "^2.8.5",
"express": "^4.18.2",
"font-awesome": "^4.7.0",
"formik": "^2.4.5",
"mongodb": "^6.3.0",
"mongoose": "^8.1.1",
"nodemon": "^3.0.3",
"package-name": "^0.1.0",
"react": "^18.2.0",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0",
"react-multi-carousel": "^2.8.4",
"react-router-dom": "^6.21.3",
"react-scripts": "5.0.1",
"react-scroll": "^1.9.0",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.4",
"yup": "^1.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",

Page |
 CAKES N

"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint-plugin-react-hooks": "^4.6.0"
}
}

Page |
 CAKES N

System Testing

OBJECTIVES OF SYSTEM TESTING:

Testing is an activity to verify that a correct system is being built and is performed with the
intent of finding faults in the system. However not restricted to being performed after the
development phase is complete but this is to carried out in parallel specification. Testing
results, once gathered and evaluated, provide qualitative indication of software quality and
reliability and serve as a basis for design modification if required a project is set to be
incomplete without proper testing.
System testing is process of checking whether the development system is
working according to the original objectives and requirements. The system should be tested
experimentally with test data so as to ensure that the system works according to the required
specification. When the system is found working, test it with actual data and check
performance.
Software testing is a critical element of software quality assurance and represents the
ultimate review of specification, design and coding. The increasing visibility of software as a
system element and the attendant “cost” associated with a software failure is motivating forces
for a well-planned, through testing.

TESTING PRINCIPLES:
All tests should be traceable to customer requirements .The focus of testing will shift
progressively from programs. Exhaustive testing is not possible. To be more effective, testing
should be one, which has probability of finding errors.
The following are the attributes of good test:
 A good test has a high probability of finding an error.
 A good test is not redundant.
 A good test should be “best of breed”.
 A good test should neither too simple nor too complex.

LEVEL OF TESTING:
The details of the software functionality tests are given below. The testing procedure that has
been used is as follows:

Page |
 CAKES N

1. Unit Testing
2. Integration Testing
3. Validation Testing
4. Output Testing
5. User acceptance system
6. Performance Testing

1. UNIT TESTING:
The first level of testing is called as Unit testing. Here the different modules are tested and the
specifications produced during design for the modules. Unit testing is essential for verification
of the goal and to test the internal logic of the modules. Unit testing was conducted to the
different modules of the project. Errors were noted down and corrected down immediately and
the program clarity as increased .The testing was carried out during the programming stage
itself. In this step each module is found to be working satisfactory as regard to the expected
output from the module.

2. INTEGRATION TESTING:
The second level of testing includes integration testing. It is a systematic testing of constructing
structure. At the same time tests are conducted to uncover errors associated with the interface.
It need not be the case, that software whose modules when run individually and showing perfect
results will also perfect results when run as a whole. The individual modules are tested again
and the results are verified. The goal is to see if the modules can be integrated between
modules. Poor interfacing may result in data being lost across an interface causing serious
problems. This testing activity can be considered as testing the design and emphasizes on
testing modules interactions.

3. VALIDATION TESTING:
The next level of testing is validation testing. Here the entire software is tested. The reference
document for this process is his requirement and the goal is to see if the Software meets its
requirements. The requirement document reflects and determines whether the software
functions the user expected. At the culmination of the integration testing, software is
completely assembled as a package, interfacing and corrected and a final series of software

Page |
 CAKES N

test and validation test begins. The proposed system under construction has been tested by
Using validation testing and found to be working satisfactory.

4. OUTPUT TESTING:
The output of the software should be acceptable to the system user. The output requirements
are defined during the System analysis. Testing of the software system id done against the
output requirements and the output testing was completed with success.

5. USER ACCEPTANCE SYSTEM:

An acceptance test has the objective of selling the user on the validity and
reliability of the system. It verifies that the systems procedures operate to system specification
and make the integrity of vital data is maintained.

6. PERFORMANCE TESTING:
This project is a system-based project, and the modules are interdependent with the other
modules, so the testing cannot be done module by module. So the unit testing is not possible
in the case of this driver. So this system is checked only with their performance to check their
quality.
In case of the Unit testing the initialization module is first tested. Since read Module and the
write module is interdependent the performance testing is done only after the final phase of
coding.

Page |
 CAKES N

System Implementation
Implementation include all those activities that take place to convert from the old system to

the new system. The new system may be totally new, replacing an existing system. Proper

implementation is essential to provide a reliable system to meet the organization requirements.

Successful implementation may not guarantee any improvement in the organization using the

new system.

The implementation phase includes the following tasks:

 Careful planning.

 Investigation of the system and constraints.

 Design of methods to achieve the changeover phase.

 Training of staff in the changeover phase.

 Evaluation of change over.

The method of implementation and time scale to be adapted is found out initially. Next, the

system is tested properly and at the same time the users were trained in the new environment.

In Digital signage implementation process is successfully . We implement the system by

satisfying all the aspects of the user. All the procedure is designed to minimize the user’s

resistance to change and make an attitude for full utilization of the system.

Page |
 CAKES N

SYSTEM SECURITY

The system security problem can be divided into four related issues; security,

integrity privacy and confidentiality. They determine file structure, data structure and access

procedures.

System security refers to the technical innovation and procedures applied to the

hardware and operating system to protect against deliberate or accidental damage from a

defined threat. In contrast, data security is the protection of data from loss, disclosure,

modification, and destruction.

As we know well that protection of a system is mostly needed in multi-user

environment, where a file is shared among several users. Protection mechanism must provide

controller access by restricting the type of files, which can be made. Access is permitted or

denied depending upon several factors, one of which is type of access requested.

This is a multi-user project that can be runs on the network. So the system is very

essential thing for prevent unauthorized access. This software has much important security

option such as-

 Nobody can run the program without login(username and password)

 There are many Data Validation features in the software.

Page |
 CAKES N

MAINTENANCE
System Maintenance
After the use phase is completed and the user is adjusted to the changes created by the new

system, evaluation and maintenance is to continue to bring the new system to the standards. If

the new information is consistent with the design specification, changes have to be made.

Maintenance is actually the implementation of the post implementation review plan.

Maintenance is necessary to eliminate errors in the working system during

is working life and to tune the system to any variation in its working environment. There are

also some errors detected that must be corrected. The quality assurance goal is develop a

procedure for correcting errors and enhancing the software. This procedure improves quality

assurance by encouraging complete reporting and log of problems, ensuring that reported

problems are promptly forwarded to the appropriate group of resolution.

In our project if any error is reported it must be corrected.

Page |
 CAKES N

FUTURE SCOPE

The scope of the project includes that what all future enhancements can be done in this system

to make it more feasible to use.

 Dynamically changes done by admin.

 Comparison study of different schedules in the form of report and graphics.

 User Events Management.

 Include other faculties.

 More graphics can be added to make it more user-friendly and understandable.

 Networking of the whole system.

Page |
 CAKES N

CONCLUSION
The project “Cake N Shapes” is completed, satisfying the required design specification. The

system provide a user-friendly interface. The project is developed with modular approach. All

modules in the project have been tested with valid data and invalid data and everything work

successfully. Thus the project has fulfilled all the objectives identified and is able to replace

the existing system .The constraints are met and overcome successfully. The project is designed

as like it was decided in the design phase. The project is very user friendly and will reduce time

consumption. This website has a user-friendly screen that enables the user to use without any

inconvenience. Hence the website has proved to work efficiently.

Page |
 CAKES N

REFERENCE
In general, references are those documents/sources cited within the text. It is necessary you

relate your work to that of other people. Other work explicitly cited should be listed in the

Reference section and referred to in the text using some kind of key.

The references that are used in this website are given below:

 https:/www.w3schools.com

 https:/stackoverflow.com

 https://unsplash.com

 https://in.pinterest.com

 https://www.pexels.com

Page |
CAKES N

Page |