Scribd
Upload
18 views21 pages

Cmts Report-7

The document presents a project report on a cloud-based Pizza Order System developed by students as part of their Diploma in Computer Engineering. The system features user authentication, an interactive pizza menu, order placement, and real-time updates using Firebase. It aims to enhance the online food ordering experience through a responsive design accessible on various devices.

Uploaded by

Aayushi Mandaliya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views21 pages

Cmts Report-7

The document presents a project report on a cloud-based Pizza Order System developed by students as part of their Diploma in Computer Engineering. The system features user authentication, an interactive pizza menu, order placement, and real-time updates using Firebase. It aims to enhance the online food ordering experience through a responsive design accessible on various devices.

Uploaded by

Aayushi Mandaliya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

A

PROJECT REPORT
ON
MICRO PROJECT ON
“Pizza Order System”
(Cloud Computing)

(4360709)

SUBMITTED BY
HADIYAL MANSHI P. (226090307034)
MANDALIYA AAYUSHI D. (226090307072)

To COMPUTER ENGINEERING DEPARTMENT


C U SHAH (GOVT.) POLYTECHNIC – SURENDRANAGAR

GUJARAT TECHNOLOGICAL UNIVERSITY – AHMEDABAD


April-2025
C.U. SHAH GOVERNMENT POLYTECHNIC WADHWAN

COMPUTER ENGINEERING

CERTIFICATE

This is to certify that the Mini Project entitled “Pizza Order System” has
been carried out by HADIYAL MANSHI P. (226090307034). under my
guidance in partial fulfillment of the degree of Diploma Engineering in
COMPUTER ENGINEERING 6th Semester of Gujarat Technological
University, Ahmedabad during the academic year 2025.

Mr. P. B. PARMAR Mr. K.G.Patel

Internal Guide Head of Department


C.U. SHAH GOVERNMENT POLYTECHNIC WADHWAN

COMPUTER ENGINEERING

CERTIFICATE

This is to certify that the Mini Project entitled “Pizza Order System” has
been carried out by MANDALIYA AAYUSHI D. (226090307072). under my
guidance in partial fulfillment of the degree of Diploma Engineering in
COMPUTER ENGINEERING 6th Semester of Gujarat Technological
University, Ahmedabad during the academic year 2025.

Mr. P. B. PARMAR Mr. K.G.Patel

Internal Guide Head of Department


Index

Sr. No. Topic Name

1 Introduction to the Project.

2 Functional Requirements

3 Sample Code/ Architecture (If any)

4 Screenshots of System and Output (If any)

5 Application of your Project

6 Advantages and Disadvantages of Project

7 Summary of Project

8 References
Introduction to the Project.

The Pizza Order System is a cloud-based web application developed as part of a cloud
computing project, aiming to modernize and simplify the online food ordering experience. It
leverages Firebase for backend services such as authentication, real-time database operations,
and secure data storage. The system provides a seamless platform where users can interact
with an intuitive interface to place pizza orders conveniently from any device.

Key Features of the Project:

• User Authentication: Secure login and registration using Firebase Authentication.

• Interactive Pizza Menu: Users can view available pizzas, each with images, descriptions,
and prices.

• Size Selection: Users can select pizza sizes (Small, Medium, Large) before placing an
order.
• Order Placement: Order details are stored in Firebase Firestore or Realtime Database,
allowing real-time order management.

• Review System: Users can write reviews and rate pizzas based on their experience.

• Contact Form: Users can send messages, feedback, or inquiries directly to the
restaurant.

• Responsive Design: The app works well on mobiles, tablets, and desktops.

• Real-Time Updates: Firebase ensures real-time syncing of orders and reviews without
requiring page reloads.
Functional Requirements of Project

• User Authentication: Users can register and login securely using Firebase
Authentication.

• Pizza Selection: Users can browse through a variety of pizzas available on the menu.

• Size Selection: Users can select different pizza sizes (Small, Medium, Large) while
ordering.

• Order Placement: Orders are stored and managed using Firebase Realtime Database /
Fire store.

• Contact Form: Users can send feedback or queries directly to the restaurant.

• Pizza Reviews: Users can leave reviews and ratings for pizzas they have ordered.

• Responsive UI: The system is accessible across different devices (mobile, tablet,
desktop).

• Real-time Updates: Firebase ensures real-time order and review updates without
page reloads.
Sample code/Architecture

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sam's Pizza - Sign Up</title>
<style>
body {
font-family: Arial, sans-serif;
background: url('img/res-back.png') no-repeat center center/cover;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 350px;
text-align: center;
}
h1 {
color: #ff5722;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background: #ff5722;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #e64a19;
}
p{
margin-top: 10px;
}
a{
color: #ff5722;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Sam's Pizza</h1>
<div class="form-container sign-up-container">
<form id="signupForm">
<h2>Sign Up</h2>
<input type="text" id="signupName" placeholder="Name" required>
<input type="email" id="signupEmail" placeholder="Email" required>
<input type="password" id="signupPassword" placeholder="Password" required>
<button type="submit">Sign Up</button>
<p>Already a user? <a href="login.html">Login</a></p>
</form>
</div>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-
app.js";
import { getAuth, createUserWithEmailAndPassword } from
"https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
const firebaseConfig = {
apiKey: "AIzaSyDoKSsctUXbT6jeaACMpoJVebDUqeKh48Y",
authDomain: "sams-pizza-fb07b.firebaseapp.com",
projectId: "sams-pizza-fb07b",
storageBucket: "sams-pizza-fb07b.firebasestorage.app",
messagingSenderId: "455489855177",
appId: "1:455489855177:web:7fd82564f94c27f8da3718",
measurementId: "G-C3QLVE9FYL"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
document.getElementById("signupForm").addEventListener("submit", function(event)
{
event.preventDefault();

const name = document.getElementById("signupName").value;


const email = document.getElementById("signupEmail").value;
const password = document.getElementById("signupPassword").value;

createUserWithEmailAndPassword(auth, email, password)


.then((userCredential) => {
localStorage.setItem("userName", name);
alert("Sign-up successful!");
console.log("User signed up:", userCredential.user);
window.location.href = "login.html";
})
.catch((error) => {
alert(error.message);
console.error(error.code, error.message);
});
});

</script>

</body>
</html>

review.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Review Us - Sam's Pizza</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css">
<style>
html,body {
font-family: Arial, sans-serif;
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
background: #f4f4f4;
}
.navbar {
background: rgba(255, 255, 255, 0.9);
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.navbar h1 {
color: #ff5722;
margin: 0;
padding-left: 20px;
}
.nav-links {
list-style: none;
display: flex;
margin: 0;
padding-right: 20px;
}
.nav-links li {
margin: 0 15px;
}
.nav-links a {
text-decoration: none;
color: #ff5722;
font-weight: bold;
transition: 0.3s;
}
.nav-links a:hover {
color: #e64a19;
}
/* Review Section */
.review-section {
flex: 1;
padding: 60px 20px;
text-align: center;
background-color: #ffffff;
}
.review-section h3 {
font-size: 2.5rem;
margin-bottom: 40px;
color: #ff5722;
}
.review-section p {
font-size: 1.2rem;
margin-bottom: 40px;
color: #555;
line-height: 1.8;
max-width: 800px;
margin: 0 auto;
}
/* Form Section */
.form-container {
max-width: 700px;
margin: 0 auto;
background-color: #f9f9f9;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.form-container input,
.form-container textarea {
width: 100%;
padding: 15px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
.form-container button {
background-color: #ff5722;
color: white;
border: none;
padding:
12px 30px;
font-size: 1.2rem;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.form-container button:hover {
background-color: #e64a19;
}
/* Star Rating */
.stars {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.stars i {
font-size: 2rem;
color: #ddd;
cursor: pointer;
transition: 0.3s;
}
.stars i:hover,
.stars i.selected {
color: #ff5722;
}
.footer {
background-color: #ff5722;
color: white;
text-align: center;
padding: 20px 0;
font-size: 1.2rem;
margin-top: auto;
}
.footer a {
color: white;
text-decoration: none;
margin: 0 10px;
font-weight: bold;
}
.footer a:hover {
color: #e64a19;
}
</style>
</head>
<body>

<!-- Navbar -->


<div class="navbar">
<h1>Sam's Pizza</h1>
<ul class="nav-links">
<li><a href="home.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="review.html">Review Us</a></li>
<li><a href="profile.html">Your Profile</a></li>
</ul>
</div>
<!-- Review Section -->
<div class="review-section">
<h3>Rate Your Experience</h3>
<p>Let us know how we're doing! Select a star rating and leave a review below.</p>

<!-- Review Form -->


<div class="form-container">
<form id="reviewForm" onsubmit="return validateReviewForm()">
<div class="stars">
<i class="fas fa-star" data-star="1"></i>
<i class="fas fa-star" data-star="2"></i>
<i class="fas fa-star" data-star="3"></i>
<i class="fas fa-star" data-star="4"></i>
<i class="fas fa-star" data-star="5"></i>
</div>
<textarea id="reviewText" name="reviewText" placeholder="Write your review
here..." required></textarea>
<button type="submit">Submit Review</button>
</form>
</div>
</div>
<p id="userEmail" style="text-align: center; font-weight: bold; color: #555;">Checking login
status...</p>
<!-- Footer -->
<footer class="footer">
<p>&copy; 2025 Sam's Pizza. All rights reserved.</p>
</footer>
<!-- Add Firebase SDK -->
<script type="module">
// Import Firebase
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js";
import { getFirestore, collection, addDoc } from
"https://www.gstatic.com/firebasejs/10.11.0/firebase-firestore.js";
import { getAuth, onAuthStateChanged } from
"https://www.gstatic.com/firebasejs/10.11.0/firebase-auth.js";

// Firebase configuration (Replace with your Firebase details)


const firebaseConfig = {
apiKey: "AIzaSyDoKSsctUXbT6jeaACMpoJVebDUqeKh48Y",
authDomain: "sams-pizza-fb07b.firebaseapp.com",
projectId: "sams-pizza-fb07b",
storageBucket: "sams-pizza-fb07b.firebasestorage.app",
messagingSenderId: "455489855177",
appId: "1:455489855177:web:7fd82564f94c27f8da3718",
measurementId: "G-C3QLVE9FYL"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

let loggedInUserEmail = null;

// Display logged-in user's email


onAuthStateChanged(auth, (user) => {
if (user) {
loggedInUserEmail = user.email;
document.getElementById("userEmail").innerText = Logged in as:
${loggedInUserEmail};
} else {
document.getElementById("userEmail").innerText = "Not logged in";
}
});

// Star rating functionality


const stars = document.querySelectorAll('.stars i');
let rating = 0;

stars.forEach(star => {
star.addEventListener('click', () => {
rating = parseInt(star.getAttribute('data-star'));
stars.forEach(s => {
s.classList.remove('selected');
if (parseInt(s.getAttribute('data-star')) <= rating) {
s.classList.add('selected');
}
});
});
});

// Form submission to Firebase


document.getElementById("reviewForm").addEventListener("submit", async
function(event) {
event.preventDefault(); // Prevent default form submission

const reviewText = document.getElementById("reviewText").value.trim();

if (!loggedInUserEmail) {
alert("Please log in to submit a review.");
return;
}

if (reviewText === "") {


alert("Please write a review before submitting.");
return;
}

if (rating === 0) {
alert("Please rate your experience by selecting stars.");
return;
}

try {
await addDoc(collection(db, "reviews"), {
email: loggedInUserEmail, // Store user's email
rating: rating,
review: reviewText,
timestamp: new Date()
});

alert("Thank you for your review! Your feedback has been submitted.");
document.getElementById("reviewForm").reset(); // Reset the form
stars.forEach(s => s.classList.remove('selected')); // Clear stars
rating = 0;
} catch (error) {
console.error("Error adding document: ", error);
alert("Failed to submit review. Please try again.");
}
});
</script>
</body>
</html>
OUTPUT
Application of your Project

• Online Food Delivery Platforms: Similar systems can be used by restaurants to receive
online orders.

• Restaurant Management Systems: Managing user feedback and orders centrally.

• Event Catering Services: Customers can pre-order food for events through such
platforms.

• Educational Projects: Useful for learning about cloud databases, authentication, and
real-time apps.

• Small Business Solutions: Helps small pizza businesses establish an online presence
quickly.
Advantages and Disadvantages of Project

Advantages:
Cloud-Based: No need for manual server management; Firebase handles hosting and
database.

Real-time Data: Orders and reviews are updated instantly without reloading the page.
Scalability: Can handle growing numbers of users and orders easily.

User-Friendly Interface: Simple and intuitive UI/UX.

Secure Authentication: Firebase provides secure login and user data management.

Cost-Effective: Firebase offers free tiers, making it budget-friendly for small projects.

Disadvantages:

Internet Dependency: Requires a stable internet connection to function.

Firebase Limits: Free tier has usage limits; scaling might require a paid Firebase plan.

Vendor Lock-in: Tightly coupled with Firebase services; migrating to another backend
may be complex.

Customization Restrictions: Limited control over backend processes compared to


custom server setups.
Summary of Project

Project Summary: Pizza Order System

The Pizza Order System is a web-based application designed to streamline the process of
ordering pizzas online. It allows users to view the pizza menu, place orders, history, and
view their user profiles. The system is developed using JavaScript with Node.js for backend
functionality and HTML/CSS for the frontend interface, offering a responsive and user-
friendly experience.
References

1. https://docs.expo.dev/guides/using-firebase/

2. https://www.youtube.com/watch?v=9kRgVxULbag&themeRefresh=1

3. https://www.youtube.com/watch?v=1awiPrGcqqI

You might also like