Peraverse Organizer Dashboard (Team-02)

Team

E/21/137, W.W.C.C.J. Fernando, e21137@eng.pdn.ac.lk
E/21/391, Sudasinghe W.R., e21391@eng.pdn.ac.lk
E/21/017, ADEESHA W.L.T., e21017@eng.pdn.ac.lk
E/21/157, R.C. GUNARATNE, e21157@eng.pdn.ac.lk

Supervisors

Ms. Yasodha Vimukthi, yasodhav@eng.pdn.ac.lk

Introduction
Solution & Impact
Features & Architecture
How to Run
Deployment
Links

Introduction

The 75Exhibition Organizer Dashboard is a full-stack web application that provides organizers with a central platform to manage events, alerts, and buildings including exhibits. Built with a web UI and microservices architecture, it delivers real-time updates, modular services, and a scalable, user-friendly interface to ensure efficient and smooth exhibition management.

Solution & Impact

The Organizer Dashboard provides:

A clear, intuitive interface for managing events, alerts, Organizers, and buildings including exhibits.
Real-time updates on event status and Real time alerts sent to kiosks.
Centralized monitoring of exhibition activities
A modular microservices architecture for scalable and reliable operations
A responsive web-based UI for easy access on multiple devices
Quick decision-making support through consolidated information

This enhances organizer efficiency, improves coordination, and ensures smooth management of the 75Exhibition.

Features & Architecture

Key Features

Authentication & Security: JWT authentication is used for secure access And use bcrypt for password hashing.
Event Management: Create, view, and update event details such as title, date, time, description, and venue.
Alert System: Real-time notifications for critical events or updates for kiosks.
Building Management: Managing buildings including exhibits, exhibition spaces for easier planning.
Dashboard Interface: Centralized view of all items.
User-Interfac: Provides a clear and intuitive interface for organizers to manage events, alerts, and building layouts.

Architecture Overview

Frontend: Web-based UI built with React, javascript, CSS, and responsive design
Backend: Microservices using Node.js and Express, exposing RESTful APIs for each service
Services: Authentication, Event, Alert, Building, and Organizer Management
Database: PostgreSQL for storing event, alert, organizer data and building data

How to Run

Clone Repository

   git clone https://github.com/cepdnaclk/e21-co227-PeraVerse-Organizer-Dashboard.git
   cd e21-co227-PeraVerse-Organizer-Dashboard

Install Dependencies

a) Frontend

cd frontend
npm install

b)Backend

Websocket for kiosk

cd backend/backend/tools
npm install

For Each Service

# go inside each service and run the follwing command in the directory where the src file is situated
npm install

Environmental Variables : Edit .env file inside the backend:

PORT=5000
BASE_URL=http://localhost:5000
JWT_SECRET=”Your JWT secret key”
DB_USER=postgres
DB_PASSWORD=”Your database password”
DB_HOST=localhost
DB_PORT=5432
DB_NAME=organizer_dashboard
ADMIN_EMAIL=”Email sending approval request to admin”
ADMIN_PASSWORD=”your-app-password for ADMIN_EMAIL”
ADMIN_NOTIFY_EMAIL=”Admin’s email(this email receives the approval request)

Running the System Locally

a) Frontend : will be running on http://localhost:5173
```
 cd frontend
 npm run dev
 #Then naviaget to the http://localhost:5173/dashboard/
```
b) Backend : will be running on http://localhost:5000 ``` bash # Websocket for kiosk : first you have to run the web socket cd backend/backend/tools nodemon ws-server.js

# Then go inside each service and run the follwing command inside the directory where the index.js file is situated nodemon index