Event Booking Application using Next.js

In this article, we’ll explore the process of building an Event Booking System using NextJS. Event Booking System allows users to view, book, and manage events.

Output Preview: Let us have a look at how the final output will look like.

Prerequisites:

• NPM & NodeJS
• NextJS
• React Hooks

Approach to Create Event Booking Application:

• To Create Event Booking System with NextJS we will begin by setting up project and necessary dependencies.
• We will be creating essential components like EventLists, AddEvent, BookedEvents etc.
• We will utilize React’s useState to manage event data and booking information. And useEffect to fetch dynamic data.
• Use local storage to store booked events and booking details.
• page.js: Renders EventList component.
• EventList.js: Displays list of events, allows booking with local storage updates, shows toast notifications. Imports and renders Navbar.
• Navbar.js: Renders navigation bar with links.
• AddEvent.js: Lets users add new events via form, submits to local storage, displays toast notification for success. Imports and renders Navbar.
• BookedEvents.js: Shows list of booked events from local storage. Imports and renders Navbar.

Steps to Create the Event Booking Application:

Step 1: Create a application of NextJS using the following command.

npx create-next-app event-booking-system

Step 2: Navigate to project directory

cd event-booking-system

Step 3: Install the necessary package in your project using the following command.

npm install bootstrap
npm install toastify

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "bootstrap": "^5.3.3",
    "next": "14.1.3",
    "react": "^18",
    "react-dom": "^18",
    "react-toastify": "^10.0.5"
}

Example: Below are the components which describes the implementation Event Booking System

JavaScript

// page.js

import React from 'react'
import EventList from '@/Components/EventList.js';

const page = () => {
    return (
        <>
            <EventList />
        </>
    )
}

export default page

JavaScript

// Navbar.js
import React from 'react';
import Link from 'next/link';
import 'bootstrap/dist/css/bootstrap.min.css';

const Navbar = () => {
    return (
        <div>
            <nav className="navbar navbar-expand-lg navbar-light 
      bg-dark bg-opacity-75 fixed-top text-light">
                <div className="container">
                    <Link className="navbar-brand text-light font-bold" 
                          href="/">
                        GFG EventBooking
                    </Link>
                    <button className="navbar-toggler" 
                            type="button"
                            data-toggle="collapse" 
                            data-target="#navbarNav"
                            aria-controls="navbarNav" 
                            aria-expanded="false"
                            aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" 
                         id="navbarNav">
                        <ul className="navbar-nav mr-auto">
                            <li className="nav-item">
                                <Link href="/"
                                    className="nav-item nav-link 
                                               text-light">
                                    Home
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link href="/BookedEvents"
                                    className="nav-item nav-link 
                                               text-light">
                                    View Booked Events
                                </Link>
                            </li>
                            <li className="nav-item">
                                <Link href="/AddEvent"
                                    className="nav-item nav-link 
                                               text-light">
                                    Add New Event
                                </Link>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    );
};

export default Navbar;

JavaScript

// AddEvent.js

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/Components/Navbar';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const NewEventForm = () => {
    const [eventName, setEventName] = useState('');
    const [eventDate, setEventDate] = useState('');
    const [eventDescription, setEventDescription] = useState('');
    const [eventLocation, setEventLocation] = useState('');
    const [eventOrganizer, setEventOrganizer] = useState('');

    const handleEventNameChange = (e) => {
        setEventName(e.target.value);
    };

    const handleEventDateChange = (e) => {
        setEventDate(e.target.value);
    };

    const handleEventDescriptionChange = (e) => {
        setEventDescription(e.target.value);
    };

    const handleEventLocationChange = (e) => {
        setEventLocation(e.target.value);
    };

    const handleEventOrganizerChange = (e) => {
        setEventOrganizer(e.target.value);
    };

    const handleFormSubmit = (e) => {
        e.preventDefault();

        const newEvent = {
            name: eventName,
            date: eventDate,
            description: eventDescription,
            location: eventLocation,
            organizer: eventOrganizer,
        };

        const events = JSON.parse(localStorage.getItem('events')) || [];
        events.push(newEvent);
        localStorage.setItem('events', JSON.stringify(events));

        // Clear form fields after submission
        setEventName('');
        setEventDate('');
        setEventDescription('');
        setEventLocation('');
        setEventOrganizer('');

        // Show toast notification
        toast.success('Event added successfully!', { autoClose: 2000 });
    };

    return (
        <>
            <Navbar />
            <div className='container' style={{
                marginTop: '5rem'
            }}>
                <ToastContainer />
                <form onSubmit={handleFormSubmit}>
                    <div className="mb-3">
                        <label htmlFor="eventName"
                            className="form-label">
                            Event Name:
                        </label>
                        <input
                            type="text"
                            className="form-control"
                            id="eventName"
                            value={eventName}
                            onChange={handleEventNameChange}
                            required
                        />
                    </div>
                    <div className="mb-3">
                        <label htmlFor="eventDate"
                            className="form-label">
                            Event Date:
                        </label>
                        <input
                            type="date"
                            className="form-control"
                            id="eventDate"

                            value={eventDate}
                            onChange={handleEventDateChange}
                            required
                        />
                    </div>
                    <div className="mb-3">
                        <label htmlFor="eventDescription"
                            className="form-label">
                            Event Description:
                        </label>
                        <textarea
                            className="form-control"
                            id="eventDescription"
                            value={eventDescription}
                            onChange={handleEventDescriptionChange}
                            required
                        />
                    </div>
                    <div className="mb-3">
                        <label htmlFor="eventLocation"
                            className="form-label">
                            Event Location:
                        </label>
                        <input
                            type="text"
                            className="form-control"
                            id="eventLocation"
                            value={eventLocation}
                            onChange={handleEventLocationChange}
                            required
                        />
                    </div>
                    <div className="mb-3">
                        <label htmlFor="eventOrganizer"
                            className="form-label">
                            Event Organizer:
                        </label>
                        <input
                            type="text"
                            className="form-control"
                            id="eventOrganizer"
                            value={eventOrganizer}
                            onChange={handleEventOrganizerChange}
                            required
                        />
                    </div>
                    <button type="submit" className="btn btn-primary">
                        Add Event
                    </button>
                </form>
            </div>
        </>
    );
};

export default NewEventForm;

JavaScript

// EventList.js

'use client'
import React, {
    useEffect,
    useState
} from 'react';
import Navbar from '@/Components/Navbar';
import {
    toast,
    ToastContainer
} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

const EventList = () => {
    const [eventlist, setEventList] = useState([]);

    useEffect(() => {
        const events = JSON.parse(
            localStorage.getItem('events') || '[]');
        setEventList(events);
    }, []);

    const bookedEvents = JSON.parse(
        localStorage.getItem('bookedEvents')) || [];

    const handleBookEvent = (event) => {
        // Check if the event is already booked
        if (bookedEvents.find(
            (e) => e.name === event.name && e.date === event.date)) {
            toast.error(
                'Event already booked!', { autoClose: 2000 });
            return;
        }

        // Add the event to bookedEvents
        const updatedBookedEvents = [...bookedEvents, event];
        localStorage.setItem(
            'bookedEvents', JSON.stringify(updatedBookedEvents));
        toast.success(
            'Event booked successfully!', { autoClose: 2000 });
    };

    return (
        <>
            <Navbar />
            <ToastContainer />

            <div className="container" style={{
                marginTop: '5rem', padding: '20px', borderRadius: '8px'
            }}>
                <h2 className="mb-4">Events</h2>
                {eventlist.length === 0 ? (
                    <p>No events found</p>
                ) : (
                    <div className="row">
                        {eventlist.map((event, index) => (
                            <div key={index} className="col-md-6 mb-4">
                                <div className="card bg-light" style={{
                                    boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
                                    borderRadius: '8px',
                                    animation: 'fadeInUp 0.5s ease'
                                }}>
                                    <div className="card-body">
                                        <h5 className="card-title">
                                            {event.name}
                                        </h5>
                                        <p className="card-text">
                                            <strong>Date:</strong>
                                            {event.date} <br />
                                            <strong>Description:</strong>
                                            {event.description} <br />
                                            <strong>Location:</strong>
                                            {event.location} <br />
                                            <strong>Organizer:</strong>
                                            {event.organizer}
                                        </p>
                                        <button
                                            className="btn btn-primary"
                                            onClick={() => handleBookEvent(event)}
                                            style={{ marginTop: '10px' }}
                                        >
                                            Book Event
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </>
    );
};

export default EventList;

JavaScript

// BookedEvents.js

import React, {
    useState,
    useEffect
} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/Components/Navbar';

const BookedEvents = () => {
    const [bookedEvents, setBooked] = useState([]);
    useEffect(() => {
        const events = JSON.parse(
            localStorage.getItem('bookedEvents') || '[]');
        setBooked(events);
    }, []);

    return (
        <>
            <Navbar />
            <div className="container" style={{
                marginTop: '5rem'
            }}>
                <h2 className="mb-4">Booked Events</h2>
                {bookedEvents.length === 0 ? (
                    <p>No booked events found</p>
                ) : (
                    <table className="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Date</th>
                                <th>Location</th>
                                <th>Organizer</th>
                            </tr>
                        </thead>
                        <tbody>
                            {bookedEvents.map((event, index) => (
                                <tr key={index}>
                                    <td>{event.name}</td>
                                    <td>{event.date}</td>
                                    <td>{event.location}</td>
                                    <td>{event.organizer}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                )}
            </div>
        </>
    );
};

export default BookedEvents;

Start your application using the following command:

npm run dev

Output: Naviage to the URL http://localhost:3000: