Building a restaurant menu page with categories and items

TL;DR A fullstack developer can build a restaurant menu page with categories and items using React and Node.js, complete with real-time filtering and ordering functionality, by designing a database schema in MySQL to store categories and menu items, creating API endpoints in Node.js with Express to retrieve data from the database, building the frontend in React to display the menu page, handle filtering and sorting, and make API calls to the backend, and implementing real-time filtering and ordering functionality using React Hooks.

Building a Restaurant Menu Page with Categories and Items: A Fullstack Developer's Guide

As a fullstack developer, you're likely no stranger to building dynamic web applications that cater to various use cases. One such application that requires attention to detail is an online restaurant menu page. In this article, we'll delve into the intricacies of creating a restaurant menu page with categories and items, complete with real-time filtering and ordering functionality.

The Requirements

Let's assume we're building a website for "Tasty Bites," a popular restaurant that serves international cuisine. Our requirements are as follows:

• A menu page that displays various categories (e.g., Appetizers, Main Course, Desserts)
• Each category should have its own list of items, complete with images, descriptions, and prices
• The user should be able to filter the menu by category or keyword
• The user should also be able to sort the menu by price or alphabetical order

Designing the Database Schema

Before we begin building our application, let's design a database schema that meets our requirements. We'll use MySQL as our relational database management system.

CREATE TABLE categories (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL
);

CREATE TABLE menu_items (
    id INT PRIMARY KEY AUTO_INCREMENT,
    category_id INT NOT NULL,
    title VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    image_url VARCHAR(255),
    price DECIMAL(10, 2) NOT NULL,
    FOREIGN KEY (category_id) REFERENCES categories(id)
);

CREATE TABLE orders (
    id INT PRIMARY KEY AUTO_INCREMENT,
    customer_name VARCHAR(255) NOT NULL,
    order_date DATE NOT NULL
);

Building the Frontend

We'll use React as our frontend framework. Create a new file called MenuPage.js and add the following code:

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

const MenuPage = () => {
    const [categories, setCategories] = useState([]);
    const [menuItems, setMenuItems] = useState([]);
    const [filteredMenuItems, setFilteredMenuItems] = useState([]);
    const [keyword, setKeyword] = useState('');

    useEffect(() => {
        axios.get('/api/categories')
            .then(response => {
                setCategories(response.data);
            })
            .catch(error => {
                console.error(error);
            });

        axios.get('/api/menu-items')
            .then(response => {
                setMenuItems(response.data);
            })
            .catch(error => {
                console.error(error);
            });
    }, []);

    useEffect(() => {
        const filteredItems = menuItems.filter(item => item.title.toLowerCase().includes(keyword.toLowerCase()));
        setFilteredMenuItems(filteredItems);
    }, [keyword, menuItems]);

    return (
        <div>
            <h1>Menu Page</h1>

            {categories.map(category => (
                <div key={category.id}>
                    <h2>{category.name}</h2>

                    {filteredMenuItems.filter(item => item.category_id === category.id).map(item => (
                        <div key={item.id} className="menu-item">
                            <img src={item.image_url} alt={item.title} />
                            <h3>{item.title}</h3>
                            <p>{item.description}</p>
                            <p>Price: ${item.price}</p>

                            <button onClick={() => handleAddToOrder(item)}>Add to Order</button>
                        </div>
                    ))}
                </div>
            ))}

            <input type="text" value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="Search keyword..." />

            {filteredMenuItems.length > 0 && (
                <h2>Filtered Menu Items ({filteredMenuItems.length})</h2>

                {filteredMenuItems.map(item => (
                    <div key={item.id} className="menu-item">
                        <img src={item.image_url} alt={item.title} />
                        <h3>{item.title}</h3>
                        <p>{item.description}</p>
                        <p>Price: ${item.price}</p>

                        <button onClick={() => handleAddToOrder(item)}>Add to Order</button>
                    </div>
                ))}
            )}
        </div>
    );
};

export default MenuPage;

Building the Backend

We'll use Node.js with Express as our backend framework. Create a new file called server.js and add the following code:

const express = require('express');
const mysql = require('mysql');

const app = express();

const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'tasty_bites'
});

db.connect((err) => {
    if (err) {
        console.error(err);
        return;
    }

    console.log('Connected to MySQL');
});

app.get('/api/categories', (req, res) => {
    db.query('SELECT * FROM categories', (err, results) => {
        if (err) {
            console.error(err);
            return res.status(500).send({ message: 'Error retrieving categories' });
        }

        res.send(results);
    });
});

app.get('/api/menu-items', (req, res) => {
    db.query('SELECT * FROM menu_items', (err, results) => {
        if (err) {
            console.error(err);
            return res.status(500).send({ message: 'Error retrieving menu items' });
        }

        res.send(results);
    });
});

app.post('/api/orders', (req, res) => {
    const order = req.body;

    db.query('INSERT INTO orders SET ?', order, (err, result) => {
        if (err) {
            console.error(err);
            return res.status(500).send({ message: 'Error creating order' });
        }

        res.send(result);
    });
});

app.listen(3000, () => {
    console.log('Server listening on port 3000');
});

Conclusion

In this article, we built a restaurant menu page with categories and items using React and Node.js. We designed a database schema to store categories and menu items, and created API endpoints to retrieve data from the database. The frontend uses React Hooks to manage state and make API calls to the backend. The application includes features such as filtering by category or keyword, sorting by price or alphabetical order, and adding items to an order.

I hope this tutorial has been helpful in understanding how to build a restaurant menu page with categories and items. With this guide, you can now create your own dynamic web applications that cater to various use cases.

Key Use Case

Use Case: Online Restaurant Menu Page

Tasty Bites, a popular restaurant serving international cuisine, wants to create an online menu page for its customers. The goal is to build a dynamic web application that allows users to filter and sort the menu by category or keyword, as well as add items to their order.

Workflow:

1. Design the database schema using MySQL to store categories and menu items.
2. Create API endpoints in Node.js with Express to retrieve data from the database.
3. Build the frontend using React to display the menu page, handle filtering and sorting, and make API calls to the backend.
4. Implement real-time filtering and ordering functionality by utilizing React Hooks and updating state accordingly.

Key Features:

• Display categories (e.g., Appetizers, Main Course, Desserts) with their respective items
• Filter menu by category or keyword using a search bar
• Sort menu by price or alphabetical order
• Add items to an order upon clicking the "Add to Order" button

Technical Requirements:

• MySQL database management system for data storage
• Node.js and Express for building the backend API endpoints
• React as the frontend framework for dynamic web application creation

Finally

The key theme of this article is to build a restaurant menu page with categories and items, complete with real-time filtering and ordering functionality. The article provides a detailed guide on how to achieve this using React and Node.js. By following the steps outlined in the article, developers can create a dynamic web application that meets the requirements of Tasty Bites, a popular restaurant serving international cuisine.

The key features of the menu page include displaying categories with their respective items, filtering by category or keyword, sorting by price or alphabetical order, and adding items to an order. The technical requirements for building this application include using MySQL as the database management system, Node.js and Express for the backend API endpoints, and React as the frontend framework.

By understanding how to build a restaurant menu page with categories and items, developers can create dynamic web applications that cater to various use cases. This guide provides a comprehensive overview of the process, from designing the database schema to implementing real-time filtering and ordering functionality.

Recommended Books

Here are some examples of engaging and recommended books:

• "Clean Code: A Handbook of Agile Software Craftsmanship" by Robert C. Martin
• "The Pragmatic Programmer: From Journeyman to Master" by Andrew Hunt and David Thomas
• "Design Patterns: Elements of Reusable Object-Oriented Software" by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides