Peraverse Organizer Dashboard Web UI (Team-14)

A complete frontend interface for the 75Exhibition crowd management system, designed to provide organizers with real-time data, analytics, communication tools, and an efficient building and event management workflow.

Team and Supervisors

Role	E-Number	Name	Email
Team	E/21/007	Abeynayake A.G.C.D.	e21007@eng.pdn.ac.lk
Team	E/21/006	Abeykoon A.M.U.I.B.	e21006@eng.pdn.ac.lk
Supervisor		Ms. Yasodha Vimukthi	yasodhav@eng.pdn.ac.lk

Introduction

The Organizer Dashboard Web UI is a feature-rich Single Page Application (SPA) developed using React, TypeScript, and Tailwind CSS. It serves as the primary client-side platform for interacting with the 75Exhibition backend microservices. The system enables organizers to monitor crowd activity, manage buildings and events, visualize real-time analytics, and communicate through live channels.

The application emphasizes high performance, responsive UI design, secure authentication mechanisms, and modular component architecture.

Complete Frontend Solution

End-to-End Dashboard Application

The system provides a complete user experience, including:

Secure Authentication and protected routing.
Real-time Crowd Monitoring with visual analytics.
Building and Exhibit Management via advanced CRUD workflows.
Event scheduling and lifecycle tracking.
Feedback analysis and sentiment insights.
Data Export in multiple formats.
Live Chat and communication between organizers.
A responsive and accessible UI across devices.

Comprehensive Features and Architecture

Authentication and Security

JWT-based authentication flow.
Axios interceptors for secure API calls with token injection.
Protected routes using React Router DOM.
Session persistence and automatic token refresh.

Dashboard Component Suite

This modular approach ensures maintainability and clear separation of concerns.

Component	Functionality	Key Technology
Buildings Management	CRUD for buildings, zones, exhibits; Multi-tag architecture.	React State
Events Management	Scheduling, creation, updates; Conflict detection.	React Router
Heatmap & Analytics	Real-time heatmap of exhibition zones; Historical trend analysis.	Chart.js / Visualization Library
Feedback Widget	Feedback listing, Sentiment visualization, Rating analysis.	Chart.js
Chat Client	Real-time messaging interface; Typing indicators; WebSocket client.	WebSockets
Export Widget	Export data in CSV, Excel, JSON, and PDF formats.	Client-side File Handling

Technology Stack Highlights

Core Technologies: React 18, TypeScript, Vite, Tailwind CSS.
Architecture: Modular component design, Centralized API handling (Axios).
Real-Time Support: Native WebSockets.

UI and UX Design

Tailwind CSS-driven responsive layout.
Component-based structure with reusable UI elements.
Interactive animations and transitions.
Accessible navigation with ARIA roles and keyboard support.
Clear validation messages and error feedback.

How to Run

Clone Repository

git clone https://github.com/cepdnaclk/Peraverse-Organizer-Dashboard-Core-Frontend.git
cd Peraverse-Organizer-Dashboard-Core-Frontend

Install Dependencies

Frontend
```
npm install
```
Environment Configuration

Create a .env file in the root directory and set the backend API URL:

VITE_BASE_API_URL=http://localhost:5000

Running the Frontend Locally

The frontend will run on http://localhost:5173:

npm run dev
# Navigate to http://localhost:5173/dashboard/ to access the dashboard