ADP-CS FINAL PROJECT
Project-1
Event Management System App
Project Advisor
Mr. Faheem Shahzad
Presented by:
Student Reg# Student Name
K3F23UASCS010 Ali Asghar
Faculty of Information Technology
University of Central Punjab
Event Management System
Abstract
Eventify is a lightweight, real-time web-based admin panel designed for efficient event
booking and message management. Built using HTML, Tailwind CSS, and JavaScript, it
ensures secure access, responsive design, and dynamic user interaction.
Chapter 1: Introduction to Event Management Systems
1.1 Background
1.2 The Digital Shift in Event Management
1.3 Need for a Project like Eventify
1.4 What Is an Admin Panel and Why It Matters
1.5 Role of Real-Time Operations in Eventify
Chapter 2: Problem Statement and Project Objectives
2.1 Introduction
2.2 Problem Statement
2.3 Research Questions
2.4 Project Objectives
Chapter 3: Overview of Eventify – The Admin Panel
System
3.1 Introduction
3.2 System Summary
3.3 User Roles and Access
3.4 Component Breakdown
Chapter 4: Technology Stack and Tools Use
4.1 Introduction
4.2 Overview of the Tech Stack
4.3 HTML5
Chapter 5: Frontend Development – HTML & Tailwind
CSS
5.1 HTML Structure and Semantics
5.2 Layout and Alignment with Tailwind
5.3 Responsive Design Strategy
5.4 Styling and Aesthetics
Chapter 6: Authentication System and Admin Security
6.1 Role of Authentication in Web Applications
6.2 Admin Login Workflow
6.3 Token-Based Session Management
Chapter 7:Admin Dashboard Functionalities and Real-
Time Operations
7.1 Overview of the Dashboard
7.2 Dashboard Sections and Navigation
7.3 Booking Management Functions
7.4 Message Center Operations
Chapter 8: JavaScript Logic and Code Structure
8.1 Importance of JavaScript in Eventify
8.2 File Initialization and Access Control
8.3 Data Fetching Functions
8.4 Event Binding and Navigation
Chapter 9: Data Flow and API Integration Strategy
9.1 Overview of Data Interaction
9.2 API Request Flow
9.3 Real-Time Polling and Updates
Chapter 10: Security, Privacy, and Session
Management
10.1 Role of Security in Admin Systems
10.2 Authentication and Token Handling
10.3 Session Control and Logout
Chapter 11: Graphical User Interface
Chapter 12: References
Chapter 13: Appendices
Chapter 1: Introduction to Event Management Systems
1.1 Background
Events have always been a significant part of human social interaction—whether it's
weddings, conferences, concerts, exhibitions, or corporate meetings. Traditionally, managing
these events required extensive manual coordination, paperwork, and human involvement to
handle bookings, logistics, communications, and follow-ups. As technology evolved, so did
the expectations of clients and event organizers. The advent of digital systems introduced a
new era where the bulk of planning and execution could be handled online. Thus, event
management systems (EMS) were born.
An Event Management System is a software platform designed to streamline all phases of
event planning—from scheduling and venue booking to communication, attendee tracking,
and feedback collection. These systems not only improve operational efficiency but also
enhance the experience of both organizers and attendees by reducing human error,
enabling remote collaboration, and increasing transparency.
In the last decade, event management has transformed into a data-driven and user-centric
service industry. In this context, modern web-based EMS platforms offer the ability to
interact with users in real time, support flexible customization, and integrate with third-party
tools like CRMs, payment processors, and analytics platforms.
1.2 The Digital Shift in Event Management
The rise of cloud computing, progressive web apps, and mobile-first designs have
significantly impacted how events are organized today. Clients expect instant booking
confirmations, real-time updates, and a seamless user interface (UI). Admins, on the other
hand, require dashboards that allow them to monitor operations, communicate quickly with
clients, and respond to new inquiries or changes in a matter of seconds.
Web-based EMS solutions provide a centralized hub that removes reliance on fragmented
Excel sheets or third-party messengers. This shift allows for streamlined workflows,
centralized data management, and detailed reporting—all of which lead to improved
decision-making.
As businesses scale, their need for automation in operations becomes more apparent. Event
management systems, especially those developed with real-time and modular capabilities,
are perfectly suited to meet such scalability requirements.
1.3 Need for a Project like Eventify
Despite the presence of several commercial EMS platforms like Eventbrite, Cvent, and
Whova, there's a growing demand for custom-built, lightweight, and flexible EMS
solutions. These allow companies or institutions to mold the platform according to their
brand identity, specific use cases, or local market needs.
Eventify is designed with this vision in mind:
● To build a simple, elegant, and real-time web-based event management system
tailored for admins to handle bookings, inquiries, and dashboard activities without
relying on bloated software.
● To demonstrate how modern frontend frameworks like Tailwind CSS and Vanilla
JavaScript can be used effectively with configuration tools such as Vite, PostCSS,
and Tailwind Config to create dynamic applications.
● To create a scalable foundation where backend APIs (like Express.js) and frontend
components can collaborate through modular integration.
This thesis aims to explain how Eventify was built—from ideation to deployment—and why
its architecture and design choices make it relevant in today’s digital event landscape.
1.4 What Is an Admin Panel and Why It Matters
At the heart of any event management system is the admin panel—the control center from
which the organizers oversee operations. Unlike the client-facing side (where users book or
browse events), the admin side is more complex and functionally rich. It typically includes:
● Booking management
● Communication handling (inquiries, messages)
● Notification and alert systems
● Status monitoring and updates
● Reporting and analytics
The admin panel in Eventify is built to perform all of the above in a fast, secure, and
responsive environment. The real-time functionality enables it to notify the admin of new
bookings or unread messages every few seconds, minimizing latency in decision-making.
Moreover, a sleek user interface ensures that even non-technical admins can navigate and
manage operations with ease.
1.5 Role of Real-Time Operations in Eventify
One of the key highlights of Eventify is its real-time dashboard system. While many
traditional systems rely on static data and manual refreshes, Eventify takes a step forward
by implementing a polling mechanism that constantly checks the backend for any changes
in bookings or messages.
Chapter 2: Problem Statement and
Project Objectives
2.1 Introduction
In the digital age, organizing and managing events has evolved from a primarily manual task
to a digital-first experience. However, despite technological advances, many institutions,
companies, and individuals still struggle with inefficient systems for booking management,
client communication, and real-time updates. This chapter identifies the core challenges
faced in traditional event management and defines the objectives of the Eventify platform—
a web-based, lightweight event administration tool with real-time dashboard capabilities and
user-centric design.
Understanding these pain points is essential to appreciating the value that Eventify brings.
As this chapter unfolds, you will learn about the specific technical and operational issues the
platform seeks to resolve and how it sets itself apart by offering a simple yet powerful
solution.
2.2 Problem Statement
📌 Problem 1: Manual Event Booking Management
In traditional setups, event management involves manual processes like paper forms,
spreadsheets, and frequent phone calls. This approach is prone to delays, human error, and
miscommunication. Admins often lose track of booking requests or fail to respond in a timely
manner, leading to client dissatisfaction and loss of business opportunities.
📌 Problem 2: Lack of Real-Time Updates
Most event management platforms lack real-time features. Admins need to refresh the
page manually or rely on periodic email notifications to stay updated on new messages or
bookings. This lag in responsiveness is unacceptable in fast-paced environments where
immediate action is required.
📌 Problem 3: Complex and Over-Engineered Systems
While there are high-end tools like Eventbrite, they often come with unnecessary
complexity and high licensing costs. Small to medium-sized event service providers
cannot afford such systems or do not need all their features. What they require is a custom,
focused, and lightweight solution tailored to their specific workflow.
📌 Problem 4: Insecure or Unreliable Authentication
A common issue in many custom event systems is poorly implemented authentication. Either
there is no admin login at all, or it lacks encryption, token handling, or session management
—leaving the system open to unauthorized access and data tampering.
📌 Problem 5: Poor User Interface and Experience
User experience (UX) often takes a backseat in in-house admin panels. Interfaces are
cluttered, non-responsive, and not optimized for mobile or tablets. Without a clean, intuitive
UI, even the most functional system becomes difficult to use for non-technical
administrators.
2.3 Research Questions
To address the challenges described above, the Eventify project was built around several
guiding questions:
1. How can a lightweight and real-time admin dashboard be built without using
bloated frameworks?
2. What technologies best balance simplicity, performance, and scalability for a
web-based EMS?
3. Can real-time updates be introduced effectively using polling mechanisms
instead of WebSockets?
2.4 Project Objectives
With a clear understanding of the above issues, the primary goal of the Eventify project is:
To develop a modular, secure, and responsive event admin panel system
that supports real-time updates and provides a seamless user interface for
managing event-related bookings and communication.
This primary goal is supported by a set of specific objectives as outlined below:
Chapter 3: Overview of Eventify – The
Admin Panel System
3.1 Introduction
Eventify is a web-based admin panel application built to provide a clean, responsive, and
interactive platform for managing event-related bookings and client communication. In
today’s digital ecosystem, where organizations and individuals increasingly rely on the web
for managing real-world operations, Eventify serves as a modern solution tailored for event
organizers, administrators, and support teams.
This chapter provides an in-depth overview of the system's components, file structure,
modules, workflows, and how these parts come together to form a functional, secure, and
real-time administrative interface. By exploring the purpose and behavior of each
component, we establish a foundational understanding of the system’s operation before
diving into the technical implementation in later chapters.
3.2 System Summary
Eventify functions as a centralized admin panel for event-related activities. Its key roles
include:
● Authenticating administrators
● Allowing real-time management of event bookings
● Responding to client inquiries/messages
● Generating actionable insights (e.g., dashboard stats)
● Notifying the admin of new or pending tasks via alerts
The system currently comprises:
● HTML Templates (about.html, admin-login.html)
● JavaScript Controller Logic (admin-dashboard.js)
● Configuration Files (tailwind.config.js, postcss.config.js,
vite.config.js)
● Styling and Build Tools (Tailwind CSS, PostCSS, Vite)
● Package Management (package-lock.json, package.json)
3.3 User Roles and Access
Eventify supports a single-user admin role at present, with potential future scope for multi-
role access (Super Admin, Manager, Viewer). The workflow begins with an admin login,
which authenticates the user via a backend API (assumed to be /api/admin/login).
Once validated, access is granted to the dashboard view, enabling full control over
bookings and messages.
Unauthorized access to the dashboard is blocked. This is achieved through token-based
session validation using localStorage.
Chapter 4: Technology Stack and Tools Used
4.1 Introduction
The success of any web-based system depends significantly on the technologies chosen for
its development. A well-selected stack ensures performance, security, maintainability, and
scalability. In the case of Eventify, a modern web-based event admin panel, the selected
tools are lightweight, modular, and aligned with contemporary web development practices.
This chapter explains the complete technology stack used in the Eventify project, detailing
how each component contributes to the overall functionality of the system. The focus is on
frontend technologies, build tools, CSS utilities, and package management used to create a
responsive, real-time, and secure user experience.
4.2 Overview of the Tech Stack
Eventify uses a frontend-focused stack with a RESTful backend assumed to be in place.
The frontend was built using:
● HTML5 and Vanilla JavaScript
● Tailwind CSS for design and styling
● Vite as the build tool
● PostCSS for CSS processing
● Node.js environment with npm for package management
Although the backend code (API endpoints, database models) isn't included in the provided
files, the frontend clearly references API paths (e.g., /api/bookings,
/api/admin/login) and is structured to consume REST APIs. This chapter will focus
primarily on the tools visible and inferred from the frontend project files.
Chapter 5: Frontend Development – HTML &
Tailwind CSS
5.1 HTML Structure and Semantics
Eventify’s interface is structured using HTML5, which provides a clean and semantic
foundation for the web application. The two main HTML files—about.html and admin-
login.html—are designed with semantic tags such as <section>, <main>, <header>,
and <footer>, improving readability, accessibility, and SEO performance.
In about.html, content is divided into logical sections: company introduction, core values,
and team member profiles. Each section serves a distinct role in communicating the
platform’s identity. The structured markup allows both users and screen readers to
understand the layout easily, contributing to inclusive design.
5.2 Layout and Alignment with Tailwind
Tailwind CSS plays a crucial role in shaping the layout of Eventify. It uses utility-first classes
like flex, grid, and space-y-4 to align and position content. For example, the admin-
login.html form is centered both vertically and horizontally using flex, justify-
center, and items-center.
In about.html, the company’s core values—Excellence, Collaboration, Innovation—are
displayed in a responsive three-column layout on larger screens and stacked vertically on
smaller devices. This is achieved using Tailwind’s grid-cols-1 md:grid-cols-3
structure. Tailwind’s design system ensures that layouts are consistent and responsive
without the need for custom CSS.
5.3 Responsive Design Strategy
Tailwind simplifies responsiveness by allowing utility classes to change behavior at different
breakpoints using prefixes like sm:, md:, and lg:. This eliminates the need for manual
media queries. Font sizes, widths, and margins automatically adapt to device screen sizes,
improving accessibility and usability.
The login form’s inputs and buttons adjust size on smaller screens using w-full or text-
sm utilities, while on larger screens they use w-1/2 and text-lg. Such responsiveness
makes the admin panel functional on desktops, tablets, and smartphones—an essential
requirement for modern admin interfaces.
5.4 Styling and Aesthetics
Styling in Eventify is completely handled using Tailwind utility classes. Background colors
like bg-white, padding such as p-6, and border styles like rounded-md are applied
Chapter 6: Authentication System and
Admin Security
6.1 Role of Authentication in Web Applications
Authentication plays a critical role in any secure web application. It ensures that only
authorized users can access sensitive resources and functionalities. In the case of Eventify,
which includes administrative access to booking records and client communications, robust
authentication is essential to protect user data and restrict dashboard usage to verified
administrators only. Without a well-implemented authentication system, the platform would
be vulnerable to unauthorized access, data leaks, and operational misuse.
Eventify addresses this challenge through a simple but effective login system integrated into
the admin-login.html page and processed via JavaScript. It utilizes token-based
authentication, where successful logins result in a secure token being stored in the user’s
local storage for future verification.
6.2 Admin Login Workflow
The authentication flow begins at the admin-login.html file, where the login form is
presented to the user. The form includes two required fields: username and password.
These inputs are styled for clarity and ease of use and include error message containers to
display client-side validation results.
Once the user inputs valid data and clicks the login button, a JavaScript function named
submitLogin() is triggered. This function performs basic form validation and then sends a
POST request to the API endpoint /api/admin/login. The request includes the username
and password in JSON format.
If the backend verifies the credentials, it responds with a token and admin details. These are
then stored in localStorage under keys like adminToken and adminUser. The user is
redirected to the admin dashboard. If the login fails, an error message is shown in red below
the form, indicating that the credentials were incorrect or the account doesn’t exist.
6.3 Token-Based Session Management
After a successful login, the Eventify frontend uses the received token to identify and
authorize the administrator throughout their session. This token is stored in localStorage
and retrieved whenever protected features or pages are accessed.
For example, in admin-dashboard.js, the code begins by checking:
javascript
CopyEdit
Chapter 7: Admin Dashboard
Functionalities and Real-Time
Operations
7.1 Overview of the Dashboard
The admin dashboard in Eventify serves as the core control center for managing event
bookings and user messages. It is built to provide administrators with a seamless experience
in reviewing submissions, taking action, monitoring statistics, and receiving updates in real
time. Unlike static systems, Eventify ensures that administrators don’t need to reload the
page manually to view new data—this is achieved through a real-time polling mechanism.
The dashboard is dynamically controlled by the admin-dashboard.js file. Upon
successful login, administrators are directed to this dashboard, which immediately verifies
session validity and then loads statistics, bookings, and messages using API calls.
7.2 Dashboard Sections and Navigation
The dashboard is divided into three primary sections:
● Dashboard Overview: Displays statistics such as total bookings, pending bookings,
and unread messages.
● Bookings Management: Shows a list of all event booking requests submitted by
clients, along with their statuses.
● Message Center: Displays contact form submissions and allows admins to mark
them as read or unread.
Each section is shown or hidden based on user interaction. When the admin clicks on a
menu item, JavaScript dynamically toggles visibility using classList.add("hidden") or
classList.remove("hidden"). This SPA-like behavior enhances the performance and
interactivity of the interface without reloading the page.
7.3 Booking Management Functions
One of the main functionalities of the dashboard is the ability to review, approve, or reject
bookings. Each booking entry includes:
● The client’s name and contact information
● Date and time of the event
● Booking status (pending, approved, or rejected)
● Action buttons: “View”, “Approve”, “Reject”
When the admin clicks "View", a modal opens displaying full booking details in a well-
formatted layout. The modal is generated and styled using Tailwind classes and controlled
via JavaScript. Admins can quickly review information and take immediate action, all within
the same interface.
The "Approve" and "Reject" actions trigger asynchronous PUT requests to the server,
updating the booking status. Once the request is successful, the dashboard refreshes the
booking list without requiring a full reload.
7.4 Message Center Operations
Messages submitted via the contact form on the public website are listed in the Message
Center. Each entry includes:
● The sender’s name and email
● Subject line and date
● Action buttons: “View” and “Mark as Read/Unread”
Clicking “View” opens a modal showing the complete message body. Admins can change
the message status with a single click. This helps prioritize which messages have been
responded to and which require attention.
Messages are fetched from the API /api/messages, and updates are sent using HTTP
PUT methods. The simplicity of the Message Center improves response time and user
satisfaction.
Chapter 8: JavaScript Logic and Code
Structure
8.1 Importance of JavaScript in Eventify
JavaScript forms the functional backbone of the Eventify admin panel. While HTML and CSS
provide structure and style, JavaScript is responsible for the dynamic behavior of the
application, especially in handling API calls, DOM manipulation, form submissions,
notifications, and session control. The central logic for the dashboard is contained in the
admin-dashboard.js file, which orchestrates all key operations after the admin logs in.
This chapter explores how the code is organized, the functions that power various features,
and how JavaScript interacts with the DOM and backend APIs to provide a responsive and
interactive experience.
8.2 File Initialization and Access Control
When the admin-dashboard.js file loads, it begins by verifying that a valid session
exists. This is achieved by checking localStorage for a stored token and user object:
javascript
CopyEdit
const token = localStorage.getItem("adminToken");
const user = JSON.parse(localStorage.getItem("adminUser"));
If the token or user is missing, the script immediately redirects the user back to the login
page to prevent unauthorized access:
javascript
CopyEdit
if (!token || !user) {
window.location.href = "admin-login.html";
This ensures that no dashboard functionality is accessible without authentication.
8.3 Data Fetching Functions
The dashboard displays live data for bookings, messages, and stats. To fetch this
information, the JavaScript uses the Fetch API with asynchronous functions like
loadBookings(), loadMessages(), and loadStats().
Each function sends a GET request to a corresponding endpoint and includes the token in
the request headers:
javascript
CopyEdit
fetch("/api/bookings", {
headers: { Authorization: `Bearer ${token}` }
})
Once the data is received, it's parsed and used to populate the respective DOM elements.
This data-driven approach ensures that the dashboard always reflects the current state of
the system.
8.4 Event Binding and Navigation
User interactions within the dashboard are handled by binding event listeners to buttons and
elements. For example, navigation between dashboard sections is managed using:
javascript
CopyEdit
document.getElementById("showBookingsBtn").addEventListener("click",
() => {
showSection("bookingsSection");
});
The showSection() function hides all sections and then reveals the target section by
modifying class lists (hidden or block). This allows a single-page feel without reloading or
navigating to other URLs.
Action buttons within each booking or message entry—such as “View”, “Approve”, or
“Reject”—also have event listeners attached, which trigger modals or send update requests.
Chapter 9: Data Flow and API Integration
Strategy
9.1 Overview of Data Interaction
In Eventify, data flows between the frontend and backend using a structured and consistent
pattern. The admin dashboard interacts with three major types of data: bookings,
messages, and admin login details. All these data points are fetched or updated using
RESTful API endpoints through asynchronous HTTP requests made from JavaScript.
This architecture separates concerns, allowing frontend logic to focus on user interaction
while delegating data management to the backend.
9.2 API Request Flow
Each data interaction begins with a request from the frontend using JavaScript’s Fetch API.
For instance, when an admin logs in, a POST request is sent to /api/admin/login. On
success, the backend responds with an authentication token and user info.
Subsequent API calls, such as fetching bookings or messages, include this token in the
Authorization header to ensure secure access. Example:
javascript
CopyEdit
fetch("/api/bookings", {
headers: { Authorization: `Bearer ${token}` }
});
9.3 Real-Time Polling and Updates
The admin dashboard uses polling to check for updates in bookings and messages every 10
seconds. This is achieved through:
javascript
CopyEdit
setInterval(() => {
loadBookings();
loadMessages();
}, 10000);
Each polling cycle sends a new GET request to the server. If new data is returned, the UI is
updated dynamically without reloading the page.
Chapter 10: Security, Privacy, and Session
Management
10.1 Role of Security in Admin Systems
Security is a critical concern for any web application, especially those that handle sensitive
data like client bookings and private messages. Eventify, though lightweight, incorporates
essential security features to prevent unauthorized access and maintain privacy for both
users and administrators.
The system ensures that only authenticated users can access the dashboard and
implements clear session control using token-based authentication. Security decisions are
integrated at both the frontend and assumed backend layers.
10.2 Authentication and Token Handling
Eventify uses a token-based authentication system. When an admin successfully logs in
through the admin-login.html form, a secure token is issued and saved in the browser’s
localStorage. This token is then attached to every protected API request:
javascript
CopyEdit
Authorization: `Bearer ${token}`
This approach ensures that the backend can verify the identity of the admin user with each
request. JavaScript checks for the presence of this token at every critical page, and if it’s
missing or invalid, the user is redirected to the login page.
10.3 Session Control and Logout
To prevent unauthorized dashboard access after a session ends, Eventify provides a
“Logout” button. This function clears the token and user data from localStorage:
javascript
CopyEdit
localStorage.removeItem("adminToken");
The admin is then redirected to the login screen. This ensures that no session information
persists unnecessarily, reducing the risk of session hijacking.
The dashboard also performs an automatic check at startup. If the token is missing or
malformed, it triggers a forced redirect to the login screen. This mechanism reinforces
session security and blocks bypass attempts.
Chapter 11: Graphical User Interface
11.1 Graphical User Interface (GUI) of the Eventify Platform
The graphical user interface (GUI) of the Eventify system is one of its most powerful and
user-friendly components. It plays a vital role in delivering a seamless experience to users
by visually representing all features and functionalities of the event management platform.
The design focuses on clarity, ease of navigation, and an elegant dark theme, creating a
professional and modern look suitable for both clients and administrators.
The About Us page serves as the foundation for building trust with visitors. It is cleanly
structured into sections such as Our Story, Our Values, and Our Team. This layout is
supported by a warm color scheme and high-quality images, such as an elegant dining table
setup, reinforcing the platform's association with premium events. The content clearly
communicates the platform’s origins, growth, and mission—to merge creativity with
technology for unforgettable event experiences.
Following this, the Our Values section integrates visually appealing icons and concise
messages to highlight the core principles of the company: Excellence, Collaboration, and
Innovation. These values are not just decorative but meaningful drivers of the Eventify
experience, emphasized through subtle animations and neatly separated cards. This
thoughtful GUI design helps communicate professionalism and commitment to quality in a
single glance.
Moving to the Our Team section, the interface showcases team members with profile
pictures, names, and titles. This personalized touch enhances user engagement and makes
the company appear more approachable and transparent. The visual arrangement in a grid
layout ensures users can easily recognize the faces behind Eventify’s success, promoting
trust and credibility.
On the Services page, the GUI presents each service—Weddings, Concerts &
Performances, and Conferences—in a visually segmented card format with relevant icons
and images. This design allows users to quickly scan through the offerings and understand
the scope of each service. The combination of dark backgrounds, white text, and vibrant
icons/images ensures high readability and user attention. Each service description is concise
yet informative, with a strong visual hierarchy.
The consistent placement of the navigation bar at the top, with clear links to Home, About,
Services, Contact, and Admin sections, ensures smooth interaction. Additionally, the
“Admin” button, styled differently, indicates access to a privileged area, making it intuitive for
backend users.
Overall, the GUI of Eventify is crafted not just for aesthetics but for usability and clarity. It
balances form and function by guiding users effortlessly through content and options.
Whether a client wants to learn about the company, explore services, or connect with the
team, every interaction is visually enhanced to be intuitive, informative, and engaging.
References
1. Mozilla Developer Network (MDN). HTML Reference Guide.
https://developer.mozilla.org/en-US/docs/Web/HTML
2. Tailwind CSS Documentation. Utility-First CSS Framework.
https://tailwindcss.com/docs
3. Vite Documentation. Next Generation Frontend Tooling.
https://vitejs.dev/guide/
4. PostCSS Official Docs. A Tool for Transforming CSS with JavaScript.
https://postcss.org/
5. JavaScript Info. Modern JavaScript Tutorial.
https://javascript.info/
6. OWASP Foundation. Web Security Guidelines and Best Practices.
https://owasp.org/
7. W3C Web Accessibility Initiative (WAI). Accessibility Guidelines (WCAG 2.1).
https://www.w3.org/WAI/standards-guidelines/wcag/
8. GitHub. Sample Open-Source Dashboard Projects for UI patterns and real-time
polling practices.
https://github.com/
9. Google Fonts. Typography and Font Usage in Web Design.
https://fonts.google.com/
10. FreeCodeCamp. Responsive Web Design Certification Course.
https://www.freecodecamp.org/learn/
Appendices
Appendix A: Project File Structure
pgsql
CopyEdit
/eventify-project
├── about.html
├── admin-login.html
├── admin-dashboard.js
├── package-lock.json
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
└── /assets
└── notification.mp3
Appendix B: API Endpoints Used
Endpoint Metho Description
d
/api/admin/login POST Authenticates admin
/api/bookings GET Retrieves all bookings
