Event Booking Application using Next.js
Last Updated :
19 Mar, 2024
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:
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:
.png)
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
// 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;
// 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;
// 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;
// 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:
Similar Reads
Blogging Platform using Next JS In this project, we will explore the process of building The Blogging Platform with Next.js. Blogging Platform is a web application that allows users to create and publish blog posts. The platform provides a user-friendly interface for managing blog content and includes functionalities to create new
5 min read
How to Create Todo App using Next.js ? In this article, we will create a to-do application and understand the basics of Next.js. This to-do list can add new tasks we can also delete the tasks by clicking on them.Next.js is a widely recognized React framework that eÂnables server-side rendering and enhanceÂs the developmeÂnt of interacti
4 min read
Document Management System using NextJS The Document Management System is a web application developed using Next.js, that allows users to efficiently manage their documents. The system provides features for uploading, organizing, and retrieving documents. Users can upload documents through the web interface, which are then stored in local
5 min read
Create a Quiz App with Next JS In this article, we’ll explore the process of building a Quiz App utilizing NextJS. The quiz app provides users with a series of multiple-choice questions with options. Users can select the option and move to the next question. At the end, the user will be able to see the analysis of the quiz.Output
5 min read
E-commerce Dashboard with NextJS This project is an E-commerce Dashboard built with Next.js, providing features such as a dynamic sidebar, responsive navigation, order analytics, and most sold items of the week. It shows various features such as product analytics, order management, and user interaction. Output Preview: Prerequisite
11 min read
Social Networking Platform using Next.js The Social Networking Platform built with NextJS is a web application that provides users the functionality to add a post, like a post, and be able to comment on it. The power of NextJS, a popular React framework for building server-side rendered (SSR) and statically generated web applications, this
8 min read
URL Shortener Service with NextJS In this article, we will explore the process of building a URL shortener service using NextJS that takes a long URL and generates a shorter, more condensed version that redirects to the original URL when accessed. This shortened URL is typically much shorter and easier to share, especially in situat
2 min read
Contact Us Form using Next.js Creating a Contact Us form in Next.js involves setting up a form component, handling form submissions, and potentially integrating with a backend service or API to send the form data. In this article, we will create a Contact Us Form with NextJS.Output Preview: Let’s have a look at what our final pr
6 min read
Blogging Platform using Next JS In this project, we will explore the process of building The Blogging Platform with Next.js. Blogging Platform is a web application that allows users to create and publish blog posts. The platform provides a user-friendly interface for managing blog content and includes functionalities to create new
5 min read
Music Player App with Next.js and API In this tutorial, we'll create a Music Player App using NextJS, a React framework. Explore frontend development, API integration, and UI design to build a user-friendly app for seamless music enjoyment. Join us in harmonizing code and creativity to craft an engaging Music Player App with NextJS in t
3 min read