How to Build a Full-Stack Restaurant Delivery App 🛵🍕 using Node.js, Express, React.js, and CSS
December 22, 2024

How to Build a Full-Stack Restaurant Delivery App 🛵🍕 using Node.js, Express, React.js, and CSS

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
Enter full screen mode

Exit full screen mode

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"));
Enter full screen mode

Exit full screen mode

Run the server

Start the server by executing the following command:

node server.js
Enter full screen mode

Exit full screen mode

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
Enter full screen mode

Exit full screen mode

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;
Enter full screen mode

Exit full screen mode

Add this component to App.js:

import React from "react";
import Menu from "./Menu";

function App() {
  return (
    <div>
      <Menu />
    </div>
  );
}

export default App;
Enter full screen mode

Exit full screen mode

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);
}
Enter full screen mode

Exit full screen mode

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

2024-12-22 19:49:00

Leave a Reply

Your email address will not be published. Required fields are marked *