Event Details Page of PeraVerse

Team

E/21/050, H.B.C.T. Bandara, e21050@eng.pdn.ac.lk
E/21/226, N.S. Kothalawala, e21226@eng.pdn.ac.lk
E/21/019, A.M.H.S. Adikari, e21019@eng.pdn.ac.lk
E/21/052, H.M.P.D. Bandara, e21052@eng.pdn.ac.lk

Supervisors

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

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

Introduction

PeraVerse is a lightweight event management web application developed for EngEx 2025.

Our team was responsible for building the Single Event Details Page, which serves as the user’s main interaction point for viewing detailed event information, marking interest, sharing events, and navigating to the rating system. This page is fully responsive, deployed in the cloud, and connected to a real backend and database.

Solution & Impact

The Single Event Details Page provides:

A clear, intuitive interface for exploring event information
A dynamic Interested system stored with anonymous user cookies
Real-time interested count updates
A mobile-friendly share feature (Web Share API)
A photo carousel for event images
Direct integration with the rating/feedback page
A modern, cloud-hosted full-stack experience

This improves user engagement, event visibility, and user interaction within the PeraVerse ecosystem.

Features & Architecture

Key Features

Event Details Section: Title, date, time, description, venue
Status Badge: Upcoming / Ongoing / Ended (time-based logic)
Photo Carousel: Swipeable images with arrows + dots
Interested Button: Mark/unmark interest, with optimistic UI updates
Share Button: Mobile share popup / Desktop URL copy
Rate Event Button: Redirects to the rating page

Architecture Overview

Frontend: React + Vite, React Router, CSS (Responsive with media queries)
Backend: Node.js + Express, REST API Routes (/api/events/:id, /status, /interested, /photos)
Database: Supabase PostgreSQL, Tables: events, event_photos, interested_events, event_categories
Deployment: Frontend: Vercel, Backend: Vercel Serverless Functions, Database: Supabase Cloud

How to Run

Clone Repository

git clone https://github.com/cepdnaclk/e21-co227-PeraVerse-Event-Details-Page.git
cd e21-co227-PeraVerse-Event-Details-Page

Install Dependencies

Frontend

cd frontend
npm install
npm run dev

Backend

cd backend
npm install
npm start

Environment Variables Edit .env file inside the backend:

SUPABASE_URL="Your Supabase URL"
SUPABASE_ANON_KEY="Your Supabase Anon Key"
SUPABASE_SERVICE_KEY="Your Supabase Service Key"
NODE_ENV=development
PORT=3000

Running the System Locally
- Start backend on http://localhost:3000
- Start frontend on http://localhost:5173
- Navigate to the Event List Page
- Click any event → opens the Single Event Details Page

Deployment

The complete system is deployed on Vercel:

Frontend: https://peraverse-events.vercel.app
Backend: Deployed as Vercel serverless API
Database: Supabase Cloud

All environment variables are stored securely in Vercel.