Event List Page of PeraVerse
Team
- E/21/442, Wijenayaka D.L.P.A., e21442@eng.pdn.ac.lk
- E/21/289, Perera I.S.A, e21289@eng.pdn.ac.lk
- E/21/068, Chandrasiri E.M.D.D.V., e21068@eng.pdn.ac.lk
- E/21/328, Rathnayaka R.M.P.M., e21328@eng.pdn.ac.lk
Supervisors
- Ms. Yasodha Vimukthi, yasodhav@eng.pdn.ac.lk
Table of Contents
Introduction
This is a full-stack event management web application developed as a comprehensive platform for browsing and interacting with events.
Our team was responsible for building the Events Dashboard with interactive features, which serves as the user’s main interaction point for viewing detailed event information, marking attendance, rating events, commenting, and filtering by categories. This application is fully responsive, cloud-ready, and connected to a real backend API with Supabase database integration.
Solution & Impact
The Event List Page provides:
- Clear interface for exploring event information
- Dynamic attendance system
- Real-time updates for attendance counts and attendee lists
- Interactive rating system with 1-5 stars and averages
- Comprehensive comment system for feedback
- Category-based filtering for event discovery
- Direct Supabase integration for instant synchronization
- Modern, cloud-hosted full-stack experience
Features & Architecture
Key Features:
- Event Cards with title, time, venue, categories
- Category filters + real-time search
- Attendance: mark/unmark, live count, attendee list
- Ratings: 1–5 stars, average rating, prevent duplicates
- Comments: add, edit, delete, real-time sync
Architecture Overview:
- Frontend: React + Vite, Tailwind CSS + Bulma, reusable components, Supabase client
- Backend: Node.js + Express, routes for events, categories, attendance, ratings, comments
- Database: Supabase PostgreSQL (events, categories, attendance, comments, ratings)
- Deployment: Cloud-ready frontend & backend, Supabase database, .env-based config
How to Run / Development Notes
1.Clone Repository
git clone https://github.com/cepdnaclk/e21-co227-PeraVerse-Event-List-Page.git
cd e21-co227-PeraVerse-Event-List-Page
2.Install Dependencies
Frontend
cd frontend/dashboard
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
Deployment:
- Start backend on http://localhost:3000
- Start frontend on http://localhost:5173
- Navigate to the Event List Page
Links
- Project Repository
- Project Page
- Department of Computer Engineering
- University of Peradeniya