Next.js for Booking and Reservation Systems

Introduction

A booking and reservation system allows users to schedule appointments, reserve services, or book resources. In this tutorial, we'll provide an overview of building a basic booking and reservation system using Next.js. We'll cover project setup, user registration, resource booking, and viewing reservations. In a real-world booking system, you'd implement advanced features like payment processing, notifications, and user profiles.

Setting Up the Project

Ensure you have Node.js and npm installed on your system. If not, download and install them from the official website.

Create a new Next.js project using the following commands:

        npx create-next-app booking-system
cd booking-system
            

User Registration

Users can register and log in to use the booking system. For simplicity, we'll use a mock authentication system in this example.

        <!-- pages/login.js -->
import React, { useState } from 'react';
export default function Login() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [loggedIn, setLoggedIn] = useState(false);
    const handleLogin = () => {
        // Simulated login logic
        if (username === 'user' && password === 'password') {
            setLoggedIn(true);
        }
    };
    return (
        <div>
            <h2>Login</h2>
            <input
                type="text"
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />
            <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button onClick={handleLogin}>Login</button>
        </div>
    );
}
            

Resource Booking

Users can book resources, services, or appointments within the system.

        <!-- pages/book-resource.js -->
import React, { useState } from 'react';
export default function BookResource() {
    const [resourceName, setResourceName] = useState('');
    const [bookingDate, setBookingDate] = useState('');
    const [bookingTime, setBookingTime] = useState('');
    const handleBookResource = () => {
        // Save booking data to a database (not implemented here)
    };
    return (
        <div>
            <h2>Book a Resource</h2>
            <input
                type="text"
                placeholder="Resource Name"
                value={resourceName}
                onChange={(e) => setResourceName(e.target.value)}
            />
            <input
                type="date"
                placeholder="Booking Date"
                value={bookingDate}
                onChange={(e) => setBookingDate(e.target.value)}
            />
            <input
                type="time"
                placeholder="Booking Time"
                value={bookingTime}
                onChange={(e) => setBookingTime(e.target.value)}
            />
            <button onClick={handleBookResource}>Book</button>
        </div>
    );
}
            

Viewing Reservations

Users can view their reservations or bookings.

        <!-- pages/reservations.js -->
import React, { useState } from 'react';
export default function Reservations() {
    const [reservations, setReservations] = useState([]);
    // Simulated reservations data
    const sampleReservations = [
        { resource: 'Meeting Room A', date: '2023-10-15', time: '10:00 AM' },
        { resource: 'Conference Room B', date: '2023-10-20', time: '2:30 PM' },
    ];
    return (
        <div>
            <h2>Your Reservations</h2>
            <ul>
                {sampleReservations.map((reservation, index) => (
                    <li key={index}>
                        {reservation.resource} - {reservation.date}, {reservation.time}
                    </li>
                ))}
            </ul>
        </div>
    );
}
            

Advanced Features

In a real-world booking and reservation system, you would implement additional features like payment processing, notifications, user profiles, and the ability to manage and cancel reservations. You'd also need to handle user authentication securely and consider scalability for a large number of users and reservations.

Conclusion

You've learned how to create a basic booking and reservation system using Next.js, including project setup, user registration, resource booking, and viewing reservations. In a real-world scenario, you would need to implement more advanced features, payment processing, and secure user authentication. You can customize and expand this foundation based on your specific booking and reservation system requirements.