Creating a restaurant delivery app can be a rewarding project to enhance your full-end development skills. In this guide, we’ll cover everything from building the backend to designing a user-friendly front-end interface. Let’s dive in!
1. Backend development using Node.js and Express
The backend is the backbone of the application, processing data and providing it to the frontend.
Here’s how to set up a simple API:
Install required dependencies
Execute the following command in the project folder:
npm init -y
npm install express cors
Create backend server
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
// Menu Data
const menu = [
{
id: 1,
name: "Tropical Fruit Salad",
description: "A refreshing mix of seasonal fruits.",
price: 8.99,
image: "https://i.ibb.co/wpgVcKc/22e5f1bcc35b1857d5feccd13a7da96a.jpg",
},
{
id: 2,
name: "Grilled Chicken Sandwich",
description: "Juicy grilled chicken with fresh veggies.",
price: 12.99,
image: "https://i.ibb.co/CBx3ZS5/9e1cd36e77c78f3f4b1eceaa30098b78.jpg",
},
// Add more items...
];
app.get("/api/menu", (req, res) => {
res.json(menu);
});
app.listen(5000, () => console.log("Server running on port 5000"));
Run the server
Start the server by executing the following command:
node server.js
You now have a backend API that provides restaurant menu data.
2. Use React.js for front-end development
The front end will obtain and display data from the back end.
Set up React project
Execute the following command to build the React application:
npx create-react-app restaurant-app
cd restaurant-app
npm start
Get and display menu data
Create a Menu Components that obtain and display data:
import React, { useState, useEffect } from "react";
const Menu = () => {
const [menu, setMenu] = useState([]);
useEffect(() => {
fetch("http://localhost:5000/api/menu")
.then((res) => res.json())
.then((data) => setMenu(data));
}, []);
return (
<div style={{ padding: "20px" }}>
<h1>Restaurant Menu</h1>
<div style={{ display: "grid", gap: "20px", gridTemplateColumns: "repeat(2, 1fr)" }}>
{menu.map((item) => (
<div key={item.id} style={{ border: "1px solid #ccc", padding: "10px" }}>
<img src={item.image} alt={item.name} style={{ width: "100%" }} />
<h2>{item.name}</h2>
<p>{item.description}</p>
<strong>${item.price.toFixed(2)}</strong>
</div>
))}
</div>
</div>
);
};
export default Menu;
Add this component to App.js:
import React from "react";
import Menu from "./Menu";
function App() {
return (
<div>
<Menu />
</div>
);
}
export default App;
3. Use CSS to style your application
Set up the app for a better user experience. add it to App.css:
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #333;
}
button {
background-color: #ff7f50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
div {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
4. Run the application
Make sure the backend is working (node server.js) and launch the React application (npm start). Your menu items should now have images and descriptions!
5. Additional functions
To enhance your application:
- Added shopping cart system: Allows users to add items to their cart and view their total.
- Implement user authentication: Use function libraries such as Firebase or Auth0 to implement the login function.
- Integrated payment gateway: Use Stripe or PayPal to pay for your order.
-
Deploy your application:
- Deploy the backend in make it or Wersel.
- Deploy the front end in Networking or Wersel.
in conclusion
Building a full-end restaurant delivery application is a great project to learn and practice full-end development. With a working backend, responsive frontend, and additional features, you can create professional-grade apps!
buy me coffee https://ko-fi.com/codewithdhanian