Build an Event Management System Using Next.js
Last Updated :
28 Aug, 2024
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
Build an Inventory Management System Using NextJS We will build an Inventory Management System. We will walk through the step-by-step process of creating an inventory management system. This application contains a dashboard that shows a brief report of our inventory. Product sections show all the products listed with a search filter and allow users
13 min read
Build a Library Management System Using Next.js A Library Management System (LMS) allows users to manage library books, members, and borrowing history. In this article, we'll build a basic LMS using Next.js, which will include functionalities for managing books, members, and viewing borrowing history.Prerequisites:Next.jsReactJSNodeJSBootstrapApp
6 min read
Build a Learning Management System Using Next.js A Learning Management System (LMS) is a platform for delivering, tracking, and managing educational courses. In this article, we'll guide you through building a simple LMS using Next.js, covering course creation, listing, and basic management features.PrerequisitesNext.jsBootstrapNodeJSApproach to B
7 min read
Build a Task Management App using Next JS A Task management app is a useful web application that assists in efficiently organizing and managing tasks. It provides various functionalities such as creating tasks, assigning prioritieÂs and deadlines, marking complete tasks, and enabling task search based on keÂywords and priorities.Preview of
5 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
Build a Recipe Manager Using Next.js A Recipe Manager is a web application that allows users to manage and share their recipes. This application enables users to add new recipes, view a list of recipes, manage recipe and search for recipes by title. Built with Next.js, this app leverages server-side rendering for better performance. Us
10 min read
Build an Online Polling System Using NextJS An Online Polling System allows users to create, vote, and track poll results efficiently. we'll build a simple polling app using NextJS, managing poll data with localStorage for persistent voting, and providing real-time vote updates. We'll also implement a clean UI with Bootstrap for an enhanced u
5 min read
Build a Project Management Tool Using NextJS A project management tool is very crucial for organizing tasks which helps us to be productive. In this article, we will guide you through the process of building a simple project management tool using Next.js, a powerful React framework that allows you to build server-rendered React applications wi
6 min read
Build a News Portal Using Next.js In this article, we will explore how to build a news portal using Next.js, a popular React framework for server-side rendering and static site generation. The news portal will allow users to publish and categorize news articles, providing a seamless user experience with fast page loads and dynamic c
8 min read
Event Management Web App using MERN In this guide, we'll walk through the step-by-step process of building a feature-rich Event Management Web App. We will make use of the MERN stack to build this project.Preview of final output: Let us have a look at how the final output will look like.Final Output of Event Management AppPrerequisite
9 min read