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-stack development skills. In this guide, we’ll cover everything from building the backend to designing a user-friendly frontend interface. Let’s dive in!

1. Backend Development with Node.js and Express

The backend is the backbone of the application, handling data and serving it to the frontend.

Here’s how to set up a simple API:

Install Required Dependencies

Run the following commands in your project folder:

npm init -y
npm install express cors

Create the 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 running:

node server.js

You now have a backend API that provides restaurant menu data.

2. Frontend Development with React.js

The frontend will fetch and display data from the backend.

Set Up a React Project

Run the following command to create a React app:

npx create-react-app restaurant-app
cd restaurant-app
npm start

Fetch and Display Menu Data

Create a Menu component to fetch and display the 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. Styling the App with CSS

Style the app for a better user experience. Add this 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

Ensure the backend is running (node server.js) and start the React app (npm start). Your menu items should now appear with images and descriptions!

5. Additional Features

To enhance your app:

• Add a Cart System: Allow users to add items to a cart and view their total.
• Implement User Authentication: Use libraries like Firebase or Auth0 for login functionality.
• Integrate Payment Gateway: Use Stripe or PayPal for order payments.
• Deploy Your App:
  • Deploy the backend on Render or Vercel.
  • Deploy the frontend on Netlify or Vercel.

Conclusion

Building a full-stack restaurant delivery app is a fantastic project to learn and practice full-stack development. With a working backend, responsive frontend, and added features, you can create a professional-grade app!

Buy me coffee at https://ko-fi.com/codewithdhanian