Build an Event Management System Using Next.js
Last Updated :
23 Jul, 2025
An Event Management System is a web application that helps users create and manage events. It typically includes features such as event creation, editing, deletion, and listing. By using Next.js, a React framework for server-rendered applications, we can use its built-in routing and server-side rendering capabilities to build a dynamic and performant event management system.
Project Preview: Let us have a look at how the final output will look like.
Build an Event Management System Using Next.jsPrerequisites
Approach to Building an Event Management System Using Next.js
- Create an EventListing Component for displaying a list of events.
- Create addevent Component which contains form to add new events.
- Create EventDetail Component for showing details of a single event with dynamic routing.
- Create ManageEvents Component for managing (editing, deleting) events.
- Use React’s useState and useEffect hooks to handle state and fetch event data from local storage.
- Implement event handlers for actions such as search, edit, and delete.
- Use forms to add and update events. Handle form submissions on the client side.
Steps to Create an Event Management System Using Next.js
Step 1: Initialized the Nextjs app.
npx create-next-app@latest event-management
Step 2: It will ask you some questions, so choose as the following.
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... No
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No
Step 3: Install the necessary package for your project using the following command.
npm install bootstrap
npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons
Project Structure
Next.js Project StructureDependencies
"dependencies": {
"bootstrap": "^5.3.3",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"next": "14.2.6",
"react": "^18",
"react-dom": "^18"
}Step 4: Create the required files and write the following code.
Below mentioned is the JavaScript code for the main page component of the Event Management System. This component renders the EventListing component, which will display the list of events within a div container:
JavaScript
// page.js
import React from 'react'
import EventListing from './components/EventListing'
const page = () => {
return (
<div>
<EventListing />
</div>
)
}
export default page;
Below mentioned is the JavaScript code for the EventListing component in the Event Management System. This component is responsible for displaying a list of events.
JavaScript
//EventListing.js
'use client'
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Link from 'next/link';
import Navbar from './Navbar';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt, faMapMarkerAlt, faEye }
from '@fortawesome/free-solid-svg-icons';
const EventListing = () => {
const [events, setEvents] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
useEffect(() => {
if (typeof window !== 'undefined') {
const storedEvents = localStorage.getItem('events');
const allEvents = storedEvents ? JSON.parse(storedEvents) : [];
setEvents(allEvents);
}
}, []);
const handleSearchChange = (e) => {
const search = e.target.value;
setSearchTerm(search);
const filteredEvents = events.filter((event) =>
event.name.toLowerCase().includes(search.toLowerCase())
);
setEvents(filteredEvents);
};
return (
<>
<Navbar />
<div className="container mt-5">
<div className="row mb-3">
<div className="col-md-6 offset-md-3">
<input
type="text"
className="form-control"
placeholder="Search for events..."
value={searchTerm}
onChange={handleSearchChange}
/>
</div>
</div>
<div className="row">
{events.map((event) => (
<div key={event.id} className="col-lg-4 col-md-6 mb-4">
<Link href={`/event/${event.id}`} passHref>
<div className="card h-100"
style={{ cursor: 'pointer', textDecoration: 'none' }}>
<img src={event.imageUrl}
className="card-img-top" alt={event.name}
style={{ height: '200px', objectFit: 'cover' }} />
<div className="card-body">
<h5
className="card-title">{event.name}</h5>
<p className="card-text">
<FontAwesomeIcon icon={faCalendarAlt} className="me-2" />
<strong></strong> {event.date}<br />
FontAwesomeIcon icon={faMapMarkerAlt} className="me-2" />
<strong></strong> {event.location}
</p>
<Link href={`/event/${event.id}`} passHref>
<span className="btn btn-primary w-100 text-white">
<FontAwesomeIcon icon={faEye} className="me-2" />
View Details
</span>
</Link>
</div>
</div>
</Link>
</div>
))}
</div>
</div>
<style jsx>{`
.card:hover {
border-radius: 8px;
transition: box-shadow 0.3s;
width: 101%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.card-title {
color: #333;
}
.card-text {
color: #555;
}
.btn-primary:hover {
background-color: #0056b3;
}
a {
text-decoration: none;
color: inherit;
}
`}</style>
</>
);
};
export default EventListing;
Below mentioned is the JavaScript code for the Navbar component of the Event Management System. This component sets up a responsive navigation bar using Bootstrap. It includes links to the Home page, the page for adding new events, and the page for managing events:
JavaScript
// Navbar.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Link from 'next/link';
function Navbar() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark shadow">
<div className="container">
<Link className="navbar-brand text-light"
href="/">Event Management</Link>
<button className="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-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">
<li className="nav-item">
<Link className="nav-link text-light"
href="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link text-light"
href="/addevent">Add New Event</Link>
</li>
<li className="nav-item">
<Link className="nav-link text-light"
href="/manageevents">Manage Events</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
export default Navbar;
Below mentioned is the JavaScript code for the EventDetail component in the Event Management System. This component displays detailed information about a specific event based on the ID retrieved from the URL.
JavaScript
// pages/event/[id].js
'use client';
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';
import { useRouter } from 'next/router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt, faMapMarkerAlt, faClock, faInfoCircle, faUser }
from '@fortawesome/free-solid-svg-icons';
const EventDetail = () => {
const [event, setEvent] = useState(null);
const router = useRouter();
const { id } = router.query;
useEffect(() => {
if (typeof window !== 'undefined' && id) {
const storedEvents = localStorage.getItem('events');
const allEvents = storedEvents ? JSON.parse(storedEvents) : [];
const selectedEvent = allEvents.find((event) => event.id === parseInt(id));
setEvent(selectedEvent);
}
}, [id]);
if (!event) {
return <div>Loading...</div>;
}
return (
<>
<Navbar />
<div className="container mt-5">
<div className="row">
<div className="col-md-6 mb-4">
<img src={event.imageUrl} alt={event.name}
className="img-fluid rounded shadow-sm" style={{ objectFit: 'cover', height: '100%' }} />
</div>
<div className="col-md-6">
<h2 className="mb-3">{event.name}</h2>
<div className="mb-3">
<p className="mb-2"><FontAwesomeIcon
icon={faCalendarAlt} className="me-2 text-primary" />
<strong>Date:</strong> {event.date}</p>
<p className="mb-2"><FontAwesomeIcon
icon={faClock} className="me-2 text-primary" />
<strong>Time:</strong> {event.time}</p>
<p className="mb-2"><FontAwesomeIcon
icon={faMapMarkerAlt} className="me-2 text-primary" />
<strong>Location:</strong> {event.location}</p>
<p className="mb-2"><FontAwesomeIcon
icon={faUser} className="me-2 text-primary" />
<strong>Organizer:</strong> {event.organizerName}</p>
</div>
<div className="mb-3">
<p className="mb-2"><FontAwesomeIcon
icon={faInfoCircle} className="me-2 text-primary" />
<strong>Description:</strong></p>
<p>{event.description}</p>
</div>
<button className="btn btn-primary">Book Now</button>
</div>
</div>
</div>
<style jsx>{`
.container {
max-width: 1200px;
}
.img-fluid {
border-radius: 8px;
}
.card-title {
color: #333;
}
.card-text {
color: #555;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #004085;
}
`}</style>
</>
);
};
export default EventDetail;
Below mentioned is the JavaScript code for the AddEvent of the Event Management System. This component provides a form for users to add new events.
JavaScript
// addevent.js
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from '@/app/components/Navbar';
const AddEvent = () => {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [date, setDate] = useState('');
const [time, setTime] = useState('');
const [location, setLocation] = useState('');
const [organizerName, setOrganizerName] = useState('');
const [organizerContact, setOrganizerContact] = useState('');
const [imageUrl, setImageUrl] = useState('');
const [capacity, setCapacity] = useState('');
const [eventType, setEventType] = useState('Conference');
const handleSubmit = (e) => {
e.preventDefault();
const id = Date.now(); // Generate a unique ID using the current timestamp
console.log({ id, name, description, date, time, location,
organizerName, organizerContact, imageUrl, capacity, eventType });
// Save the form data to local storage
const eventData = { id, name, description, date, time, location,
organizerName, organizerContact, imageUrl, capacity, eventType };
const events = JSON.parse(localStorage.getItem('events')) || [];
events.push(eventData);
localStorage.setItem('events', JSON.stringify(events));
// Reset form fields after submission
setName('');
setDescription('');
setDate('');
setTime('');
setLocation('');
setOrganizerName('');
setOrganizerContact('');
setImageUrl('');
setCapacity('');
setEventType('Conference');
};
return (
<>
<Navbar />
<div className="container" style={{ width: "70%" }}>
<h2 className="mt-3 mb-4">Add New Event</h2>
<form onSubmit={handleSubmit}>
<div className="row mb-3">
<div className="col-md-6">
<label htmlFor="name"
className="form-label">Event Name</label>
<input
type="text"
className="form-control"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
<div className="col-md-6">
<label htmlFor="date" className="form-label">Date</label>
<input
type="date"
className="form-control"
id="date"
value={date}
onChange={(e) => setDate(e.target.value)}
required
/>
</div>
</div>
<div className="row mb-3">
<div className="col-md-6">
<label htmlFor="time" className="form-label">Time</label>
<input
type="time"
className="form-control"
id="time"
value={time}
onChange={(e) => setTime(e.target.value)}
required
/>
</div>
<div className="col-md-6">
<label htmlFor="location" className="form-label"
style={{ textDecoration: 'none' }}>Location</label>
<input
type="text"
className="form-control"
id="location"
value={location}
onChange={(e) => setLocation(e.target.value)}
required
/>
</div>
</div>
<div className="row mb-3">
<div className="col-md-6">
<label htmlFor="organizerName"
className="form-label">Organizer Name</label>
<input
type="text"
className="form-control"
id="organizerName"
value={organizerName}
onChange={(e) => setOrganizerName(e.target.value)}
required
/>
</div>
<div className="col-md-6">
<label htmlFor="organizerContact"
className="form-label">Organizer Contact</label>
<input
type="text"
className="form-control"
id="organizerContact"
value={organizerContact}
onChange={(e) => setOrganizerContact(e.target.value)}
required
/>
</div>
</div>
<div className="row mb-3">
<div className="col-md-6">
<label htmlFor="capacity" className="form-label">Capacity</label>
<input
type="number"
className="form-control"
id="capacity"
value={capacity}
onChange={(e) => setCapacity(e.target.value)}
required
/>
</div>
<div className="col-md-6">
<label htmlFor="eventType" className="form-label">Event Type</label>
<select
className="form-control"
id="eventType"
value={eventType}
onChange={(e) => setEventType(e.target.value)}
required
>
<option value="Conference">Conference</option>
<option value="Workshop">Workshop</option>
<option value="Seminar">Seminar</option>
<option value="Meetup">Meetup</option>
</select>
</div>
</div>
<div className="mb-3">
<label htmlFor="imageUrl" className="form-label">Image URL</label>
<input
type="text"
className="form-control"
id="imageUrl"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="description" className="form-label">Description</label>
<textarea
className="form-control"
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
required
></textarea>
</div>
<button type="submit" className="btn btn-primary">Add Event</button>
</form>
</div>
</>
);
};
export default AddEvent;
Here's the JavaScript code for the ManageEvents component of the Event Management System. This component allows users to view, edit, and delete events stored in local storage.
JavaScript
// manageevents.js
"use client";
import React, { useState, useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "@/app/components/Navbar";
const ManageEvents = () => {
const [events, setEvents] = useState([]);
const [editingEvent, setEditingEvent] = useState(null);
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [date, setDate] = useState("");
const [time, setTime] = useState("");
const [location, setLocation] = useState("");
const [imageUrl, setImageUrl] = useState("");
useEffect(() => {
const storedEvents = localStorage.getItem("events");
if (storedEvents) {
setEvents(JSON.parse(storedEvents));
}
}, []);
const handleEdit = (event) => {
setEditingEvent(event);
setName(event.name);
setDescription(event.description);
setDate(event.date);
setTime(event.time);
setLocation(event.location);
setImageUrl(event.imageUrl);
};
const handleUpdate = (e) => {
e.preventDefault();
const updatedEvents = events.map((event) =>
event.id === editingEvent.id
? { ...event, name, description, date, time, location, imageUrl }
: event
);
setEvents(updatedEvents);
localStorage.setItem("events", JSON.stringify(updatedEvents));
resetForm();
};
const handleDelete = (eventId) => {
const updatedEvents = events.filter((event) => event.id !== eventId);
setEvents(updatedEvents);
localStorage.setItem("events", JSON.stringify(updatedEvents));
};
const resetForm = () => {
setEditingEvent(null);
setName("");
setDescription("");
setDate("");
setTime("");
setLocation("");
setImageUrl("");
};
return (
<>
<Navbar />
<div className="container mt-5">
<h2 className="mb-4">Manage Events</h2>
{editingEvent ? (
<form onSubmit={handleUpdate}>
<div className="mb-3">
<label htmlFor="name" className="form-label">Event Name</label>
<input
type="text"
className="form-control"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="description"
className="form-label">Description</label>
<textarea
className="form-control"
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
required
></textarea>
</div>
<div className="mb-3">
<label htmlFor="date" className="form-label">Date</label>
<input
type="date"
className="form-control"
id="date"
value={date}
onChange={(e) => setDate(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="time" className="form-label">Time</label>
<input
type="time"
className="form-control"
id="time"
value={time}
onChange={(e) => setTime(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="location" className="form-label">Location</label>
<input
type="text"
className="form-control"
id="location"
value={location}
onChange={(e) => setLocation(e.target.value)}
required
/>
</div>
<div className="mb-3">
<label htmlFor="imageUrl" className="form-label">Image URL</label>
<input
type="text"
className="form-control"
id="imageUrl"
value={imageUrl}
onChange={(e) => setImageUrl(e.target.value)}
required
/>
</div>
<button type="submit"
className="btn btn-primary">Update Event</button>
<button type="button"
className="btn btn-secondary ms-2" onClick={resetForm}>Cancel</button>
</form>
) : (
<div className="row">
{events.map((event) => (
<div key={event.id} className="col-lg-4 col-md-6 mb-4">
<div className="card">
{event.imageUrl ? (
<img src={event.imageUrl}
className="card-img-top" alt={event.name}
style={{ height: "200px", objectFit: "cover" }} />
) : (
<div className="card-img-top"
style={{ height: '200px', backgroundColor: '#f0f0f0', display: 'flex',
alignItems: 'center', justifyContent: 'center' }}>
<span>No Image</span>
</div>
)}
<div className="card-body">
<h5 className="card-title">{event.name}</h5>
<p className="card-text">{event.description}</p>
<p className="card-text"><strong>Date:</strong> {event.date}</p>
<p className="card-text"><strong>Time:</strong> {event.time}</p>
<p className="card-text"><strong>Location:</strong> {event.location}</p>
<button
className="btn btn-primary" onClick={() => handleEdit(event)}>Edit</button>
<button
className="btn btn-danger ms-2" onClick={() => handleDelete(event.id)}>Delete</button>
</div>
</div>
</div>
))}
</div>
)}
</div>
<style jsx>{`
.card:hover {
border-radius: 8px;
transition: box-shadow 0.3s;
width: 101%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
`}</style>
</>
);
};
export default ManageEvents;
Step 5: Start your application using the following command
npm run dev
Output
Similar Reads
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
React Fundamentals
React IntroductionReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability. "Hello, World!" Program in ReactJavaScriptimport React from 'react'; function App() {
6 min read
React Environment SetupTo run any React application, we need to first setup a ReactJS Development Environment. In this article, we will show you a step-by-step guide to installing and configuring a working React development environment.Pre-requisite:We must have Nodejs installed on our PC. So, the very first step will be
3 min read
React JS ReactDOMReactDOM is a core React package that provides DOM-specific methods to interact with and manipulate the Document Object Model (DOM), enabling efficient rendering and management of web page elements. ReactDOM is used for: Rendering Components: Displays React components in the DOM.DOM Manipulation: Al
2 min read
React JSXJSX stands for JavaScript XML, and it is a special syntax used in React to simplify building user interfaces. JSX allows you to write HTML-like code directly inside JavaScript, enabling you to create UI components more efficiently. Although JSX looks like regular HTML, it’s actually a syntax extensi
5 min read
ReactJS Rendering ElementsIn this article we will learn about rendering elements in ReactJS, updating the rendered elements and will also discuss about how efficiently the elements are rendered.What are React Elements?React elements are the smallest building blocks of a React application. They are different from DOM elements
3 min read
React ListsIn lists, React makes it easier to render multiple elements dynamically from arrays or objects, ensuring efficient and reusable code. Since nearly 85% of React projects involve displaying data collections—like user profiles, product catalogs, or tasks—understanding how to work with lists.To render a
4 min read
React FormsForms are an essential part of any application used for collecting user data, processing payments, or handling authentication. React Forms are the components used to collect and manage the user inputs. These components include the input elements like text field, check box, date input, dropdowns etc.
5 min read
ReactJS KeysA key serves as a unique identifier in React, helping to track which items in a list have changed, been updated, or removed. It is particularly useful when dynamically creating components or when users modify the list. When rendering a list, you need to assign a unique key prop to each element in th
4 min read
Components in React
React Lifecycle In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage resources, side effects, and perfo
7 min read
React Hooks
Routing in React
Advanced React Concepts
React Projects